Adding Navbar to “Sidebar.php”

well for starters, you don’t need the table setup OR javascript to do this… it can be done entirely in CSS

i’d scrap the idea of tables, as well as the javascript.

here’s an EXAMPLE of css for “button-type” navigation… you’re going to definitely have to tweak it to relate to your theme and everything, but this will get you started…

#sidebar a, a:visited {
border:1px solid #c00000;
background:#ffffff url(images/button1.jpg);
color:#FFD5D5;
display:block;
padding:3px 10px 5px;
text-transform:uppercase;
}

#sidebar a:hover {
border:1px solid #c00000;
background:#ffffff url(images/button2.jpg);
color:#FFD5D5;
display:block;
padding:3px 10px 5px;
text-transform:uppercase;
}

“button1.jpg” would be your “normal state” of the button and “button2.jpg” would be the “hover state” of the button. make sure you include the correct file path to get to the buttons… they should be in the images folder inside your theme.

NOTE: There are additional ways to accomplish this, with “boxes” – but it’s a little more complicated (not much, just a teeny bit) – try this one first, and let us know if it works for you.

Another NOTE: When you’re calling this in to your sidebar, you’d use <div id="sidebar"> and then end the div with </div>

Thank you.

Well, I’m not really comfortable with CSS but I’m ready to learn. If we’re going to go for this we might as well go all the way.

My page is located at https://fuelwerks.dreamhosters.com/

I’ve cleared all of the aforementioned Javascript and HTML out of my sidebar, and I’ve added the code to my CSS file. I’m getting a rollover effect, but it looks like my graphic is now appearing everywhere there’s a link.

For what it’s worth, I think I’d like to do this with boxes. (Containers?) I’m going to have to deal with some positioning issues.

Forging ahead…

I’ve created a container for my graphic elements and I’ve positioned it in the sidebar. I’m still not sure how to place my graphics for the rollover effect. (I’m not sure if I really want text for the rollover.)

I still need help, but I’m scouring the internet and some books for more information. All assistance is appreciated…

Don’t forget that IE does not support the hover pseudo-class and so rolover images via CSS will not function. There are Javascript routines that are used by the Suckerfish dropdown menu that will give you a very good work around for this.

In no event will any of this work in anything before IE6, though.

I am sorry that I don’t have the links to hand, but you can search this forum or the ‘net at large for “Suckerfish” and examine the JS coding in combination with CSS commands to see how you might hack their code for your purposes.

To directly answer your question, Zacurtjadi, no WordPress does not seem to support Javascript behaviors for rollover buttons or dropdown menus. I’ve tried to get them to work on the WordPress portion of my site and have had no success whatsoever; something about splitting the code up between the header and body files seems to break the JS.

If you have success with hacking Suckerfish, please let me know as I am very interested in creating an alternative form of navigation for my site.

Thanks!