I have finally implemented drop-down menus on the navigation bar. This should make page navigation that much easier I hope. Now I can remove the pages from the navigation bar and fill it with something more interesting (No idea what though)
It took me a few hours until I got everything done. Initially I was trying to figure it out myself but I could not find any plugin to do it nor any hint from themes that implemented something similar. Fortunately, the admin over at Back-on Online was kind enough to provide me with some code snippets when I contacted him. Unfortunately it wasn’t as simple as copying and pasting them into my style sheet and header files (Although I was secretly hoping for that) 🙂
After some unsuccesful tries over the course of an hour or so, I decided to google the name of the script which fortunately pointed me in the right direction.
Three hours later and my drop down menus are complete (in their first incarnation that is). Not only that but I’ve managed to add the categories as a drop down menu which should make navigation even easier.
My Relevant stylesheet part for the navigation drop-downs is this
/* Drop Down Menu */
#suckerfish, #suckerfish ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#suckerfish a {
display: block;
color: #fff;
}
#suckerfish li {
float: left;
position: relative;
}
#suckerfish li ul {
position: absolute;
left: -999em;
height: auto;
}
#suckerfish li ul li {
background: #009;
width: 20em;
}
#suckerfish li ul li a{
color: #AAA;
}
#suckerfish li ul ul {
margin: -3em 0 0 20em;
}
#suckerfish li ul li ul li{
width: auto;
}
#suckerfish li:hover ul ul, #suckerfish li:hover ul ul ul, #suckerfish li.sfhover ul ul, #suckerfish li.sfhover ul ul ul {
left: -999em;
}
#suckerfish li:hover ul, #suckerfish li li:hover ul, #suckerfish li li li:hover ul, #suckerfish li.sfhover ul, #suckerfish li li.sfhover ul, #suckerfish li li li.sfhover ul {
left: auto;
}
/* End Drop Down Menu */
It took me quite while to have the third level menu come out at the same level. The most important part to notice is that the width and the margin of it should be the same, otherwise you either get the manus overlapping or too far apart. In the third menu I fount it better to leave the width automatic so as not to extend the background color too much. However that created a problem with small links and as a result I had to reduce the parent <ul> width to something small to force the list items to fall under each other.
In the header, after adding the new class id in the <ul> parent of the navbar, I also included this
Categories
Which creates a drop down menu for the categories.
All in all, I like this way of navigating through the pages much more. Unfortunately I only tested this in Firefox and Konqueror does not seem to handle everything as it should be so I just don’t even want to think what is happening in IE (even with the javascript hacks I had to put in). So if you’re using that and things look strange, do yourself a favor and get a standards compliant browser.
I might go back to this once I get in the mood but for now I’m happy it’s at least working in firefox.
PS: I just now discovered that the <code> function in worpress’ wusyiwyg editor pretty much suchs as it tends to be moved around every time I save.