Setting up the Navigation Menu

Paul Cracknell — Mon, 29 Jun 2009 12:14:59 +0000

Multi Level Navigation

Get the plugin (Multi Level Navigation) and activate it by following the directions with the plugin.

This plugin is particularly powerful in providing a navigation system that works in all browsers, looks good and is fully customisable. By following the next few steps we will integrate it into the look and feel that compliments the Breathe Theme.

Lets get started.

Once it is activated your navigation will look like this as the default. Blue which does not fit this theme so here is how to modify it.

Go to Settings > Multi Level Navigation

Click on the appearance tab at the top of the page.

Highlight the CSS

Delete all.

Copy and Paste the below CSS back into the box.

#suckerfishnav {font-weight:bold; width:100%; margin:0 0 0px 0;}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:40px;padding:0 ;margin:0; width:100%;}
#suckerfishnav a {display:block;color:#ffffff;text-decoration:none;text-transform: uppercase;padding:0px 0px 0px 15px;}
#suckerfishnav li {float:left;padding:0 0 0 0px;}
#suckerfishnav ul {position:absolute;left:-999em;height:auto; width:151px;font-weight:normal;margin:0;line-height:1; border:0;border-top:1px solid #666666;}
#suckerfishnav li li {width:149px;border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;font-weight:bold;font-family:verdana,sans-serif;}
#suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#dddddd;}
#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#suckerfishnav li li:hover {background:#dddddd;}
 #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#ff0000;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {text-decoration:none;color:#ff0000;}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#dddddd;}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#444444;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {text-decoration:none;}

Settings

Setting tab – First box Speed of fade in effect (drop down box) change to instant update options

Menu Contents

Menu Item #1 Home

Menu Item # 2 Categories (single dropdown)

Menu Item # 3 Archives Month (single dropdown)

Menu Item #4 Links with categories – single dropdown

Of course you can configure this anyway you like.

Paul Cracknell » multi level navigation

Setting up the Navigation Menu

Multi Level Navigation