I'm building my first custom WordPress theme, following Chris Coyier's (he's great) tutorial on Lynda . The tutorial uses a sidebar for a nav bar, but I'd like to create a horizontal nav bar. I've always done this in Dreamweaver (or Fireworks) with CSS, using images as the tabs, but Dreamweaver uses some sort of swap image code:
<a href="#" onmouseout="MM_swapImgRestore()"
My worry is that WordPress won't accept that sort of code used for Nav bar in Dreamweaver?
The tutorial uses a list order approach, html styled with CSS.
I'm guessing I should use the list order approach? But then how do I get the nav bar to be horizontal, and not vertical?
In Dreamweaver, I'd create a nav bar space with CSS, then float the images/tabs into that space, next to one another.
List order uses text, not images. Not sure how to approach. Anyone familiar?
Thanks to both of you for responding. Chris: yep, I looked at a sample on the w3schools site, and it looks a lot like what you just showed me. I'd love to show you the design, but it's not coded or online yet. Only the Photoshop version. I don't think I can insert a jpg here?
But I can show you a past website I designed: http://www.thepinchdc.com/
The nav bar is the same that I'm trying to do with this new site: simple rollovers where the text changes. I think I figured it out though, from the w3school code sample, using a float left CSS style.
Pauli: In Dreamweaver I just imported the graphic I made in Photoshop (nav bar sliced up into each category: "home" as one graphic, "about" another graphic, etc...). But you can insert/image objects/rollover image. That gives you the option to bring in the graphic as a rollover. Dreamweaver ads some sort of image swap code, that swaps from, say, the "home" graphic, to an 2nd "home" graphic I made in Photoshop that you view when the mouse hovers over. But I don't know if WordPress will allow that sort of thing. That's why I'm trying to do things without Dreamweaver's help. Just html and code, the standard way...which I suck at.
I have a design brain, and am fairly new to code, so I'm sure I'm not doing things the best way. That's why I joined this site :)
@tigerpaw
What that site has is a background image that covers the entire right side of the screen. You can simply make a background image in photoshop and set it as the background.
When it comes to the hover effects, that is simple css.
.nav ul li a {
/* css here for how you want the text to look without being hovered */
}
.nav ul li a:hover {
/* css here for how you want the text to look when being hovered */
}
If you're using a graphic for the hovered button, you can use the onmouseover function to change the img src to the hover img. Here a link to the w3c school for some more direction W3C onmouseover
You could also change the background via CSS. I recommend taking a little time and watching this video that Chris made. It should be more than enough info to figure it out and you'll definitely learn a bit about what you're doing.
Chris's Three State Menu
@chrisburton Yeah, you're right. I just like giving options. The video Chris made is sprite based. That should be able to show him exactly what he needs to do for it.
I'm building my first custom WordPress theme, following Chris Coyier's (he's great) tutorial on Lynda . The tutorial uses a sidebar for a nav bar, but I'd like to create a horizontal nav bar. I've always done this in Dreamweaver (or Fireworks) with CSS, using images as the tabs, but Dreamweaver uses some sort of swap image code: <a href="#" onmouseout="MM_swapImgRestore()"
My worry is that WordPress won't accept that sort of code used for Nav bar in Dreamweaver?
The tutorial uses a list order approach, html styled with CSS.
I'm guessing I should use the list order approach? But then how do I get the nav bar to be horizontal, and not vertical?
In Dreamweaver, I'd create a nav bar space with CSS, then float the images/tabs into that space, next to one another.
List order uses text, not images. Not sure how to approach. Anyone familiar?
Thanks!
Ah. I think I need to use a float left option in the CSS...
You must be running an old version of DW if it's recommending using images....not that you can't but it's very...erm...20th Century.
A sprite can be the way to go (which is a single combined image) but it entirely depends on the design of your site.
If you have one, why not let us take a look and we could recommend some alternatives.
@tigerpaw Are you talking about something like this? http://codepen.io/chrisburton/pen/AbdKe
Thanks to both of you for responding. Chris: yep, I looked at a sample on the w3schools site, and it looks a lot like what you just showed me. I'd love to show you the design, but it's not coded or online yet. Only the Photoshop version. I don't think I can insert a jpg here? But I can show you a past website I designed: http://www.thepinchdc.com/ The nav bar is the same that I'm trying to do with this new site: simple rollovers where the text changes. I think I figured it out though, from the w3school code sample, using a float left CSS style.
Pauli: In Dreamweaver I just imported the graphic I made in Photoshop (nav bar sliced up into each category: "home" as one graphic, "about" another graphic, etc...). But you can insert/image objects/rollover image. That gives you the option to bring in the graphic as a rollover. Dreamweaver ads some sort of image swap code, that swaps from, say, the "home" graphic, to an 2nd "home" graphic I made in Photoshop that you view when the mouse hovers over. But I don't know if WordPress will allow that sort of thing. That's why I'm trying to do things without Dreamweaver's help. Just html and code, the standard way...which I suck at.
I have a design brain, and am fairly new to code, so I'm sure I'm not doing things the best way. That's why I joined this site :)
You can paste images here. Either link us to the file using http://tinypic.com or use html.
@tigerpaw What that site has is a background image that covers the entire right side of the screen. You can simply make a background image in photoshop and set it as the background.
When it comes to the hover effects, that is simple css.
If you're using a graphic for the hovered button, you can use the onmouseover function to change the img src to the hover img. Here a link to the w3c school for some more direction W3C onmouseover You could also change the background via CSS. I recommend taking a little time and watching this video that Chris made. It should be more than enough info to figure it out and you'll definitely learn a bit about what you're doing. Chris's Three State Menu
@keving11189 If he's using images for the text, he's better off using a sprite.
Excellent! Thanks for the advice. I'm about to code the design, so we'll see how it goes.
@chrisburton Yeah, you're right. I just like giving options. The video Chris made is sprite based. That should be able to show him exactly what he needs to do for it.
Although he probably doesn't need a sprite. I agree that he should just apply the menu bar as a background image and use a font to render the text.