Button navigation look and feel

[nooozeguy]

Hi,

I am trying to implement a horizontal navigation system using "buttons" in CSS.

Here is what I have using the WordPress Menubar Plugin: http://mjoc.biz/news-articles-especiall … rs-agents/

I would like to get the same look using the Suckerfish method, because the Multi-level nav is so much easier to create dynamically through WP Admin pages.

My questions are:

1) Can I get this look and feel through the Multi-level plugin?
2) Is my reasoning correct that it is better to use this plugin than the WordPress Menubar Plugin?

Thanks,
Josh

[imported_Ryan]

Hi,
I hadn’t seen that plugin until you mentioned it. The only problem I see with it is that it does not place the Javascript into an external file. Otherwise it seems to behave identically to the Multi-level navigation plugin.

A major advantage of our plugin though is that it is compatible with our Multi-level navigation CSS generator, so you can style your menu automatically rather than having to know a lot about CSS to modify the look of it.

You can definitely recreate that look with a Suckerfish dropdown menu. In fact any plain CSS menu design can be mimicked as a Suckerfish style menu, although it occasionally requires a little lateral thinking.

[nooozeguy]

Hi Ryan,

Thanks (as always) for your prompt reply!

Here is the CSS which draws the nav.

<code>

/* WP Menubar Suckerfish template

Credits:
Son of Suckerfish Dropdowns
By Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
*/

#navbar {
margin: 10px 10px 0 10px;
background: #1874CD;
height: 26px;
border-top: 1px solid #2EB0FF;
}

#nav {
margin: 0;
padding: 0;
height: 26px;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
background: #1874CD;
}

#nav li {
float: left;
padding: 0;
height: 26px;
}

#nav a {
color:white;
display:block;
float:left;
font-family:arial;
font-size:16px;
font-weight:bold;
height:26px;
line-height:26px;
overflow:hidden;
padding:0 15px;
text-decoration:none;
}

#nav li li a {
padding: 0;
text-indent: 15px;
width: 167px;
}

#nav ul li {
position: relative;
}

#nav li ul {
top: 26px;
position: absolute;
left: -999em;
zheight: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li li {
float: left;
padding: 0;
width: 170px;
}

#nav li ul ul {
margin: -26px 0 0 170px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul, 
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul,
#nav li.sfhover ul ul ul ul {
left: -999em;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul,
#nav li li li li.sfhover ul{
left: 0;
}

#nav li.active {
background: #1C86EE;
}

#nav li:hover,
#nav li.sfhover {
background: #1C86EE;
}

#nav li {
border-left: 1px solid #2EB0FF;
border-right: 1px solid #104E8B;
}

#nav ul ul {
border-left: 1px solid #2EB0FF;
border-right: 1px solid #104E8B;
}

#nav li li {
border-left: 0;
border-right: 0;
border-top: 1px solid #2EB0FF;
border-bottom: 1px solid #104E8B;
}

#navclear {
clear: left;
margin: 0 10px 0 10px;
background: url(shadow.png) repeat-x;
height: 6px;
border-top: 1px solid #104E8B;
}
</code>

I tried to match up the various attributes with the corresponding MLN ones, but apparently didn’t do a very good job.

<code>
/* WP Menubar Suckerfish template

Credits:
Son of Suckerfish Dropdowns
By Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
*/

#suckerfishbar {
margin: 10px 10px 0 10px;
background: #1874CD;
height: 26px;
border-top: 1px solid #2EB0FF;
}

#suckerfish {
margin: 0;
padding: 0;
height: 26px;
}

#suckerfish ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
background: #1874CD;
}

#suckerfish li {
float: left;
padding: 0;
height: 26px;
}

#suckerfish a {
font-size: 12px;
font-weight: bold;
float: left;
color: white;
text-decoration: none;
display: block;
height: 26px;
line-height: 26px;
padding: 0 15px;
overflow: hidden;
}

#suckerfish li li a {
padding: 0;
text-indent: 15px;
width: 167px;
}

#suckerfish ul li {
position: relative;
}

#suckerfish li ul {
top: 26px;
position: absolute;
left: -999em;
zheight: auto;
width: 170px;
margin: 0;
padding: 0;
}

#suckerfish li li {
float: left;
padding: 0;
width: 170px;
}

#suckerfish li ul ul {
margin: -26px 0 0 170px;
}

#suckerfish li:hover ul ul,
#suckerfish li:hover ul ul ul,
#suckerfish li:hover ul ul ul ul, 
#suckerfish li.sfhover ul ul,
#suckerfish li.sfhover ul ul ul,
#suckerfish li.sfhover ul ul ul ul {
left: -999em;
}

#suckerfish li:hover ul,
#suckerfish li li:hover ul,
#suckerfish li li li:hover ul,
#suckerfish li li li li:hover ul,
#suckerfish li.sfhover ul,
#suckerfish li li.sfhover ul,
#suckerfish li li li.sfhover ul,
#suckerfish li li li li.sfhover ul{
left: 0;
}

#suckerfish li.active {
background: #1C86EE;
}

#suckerfish li:hover,
#suckerfish li.sfhover {
background: #1C86EE;
}

#suckerfish li {
border-left: 1px solid #2EB0FF;
border-right: 1px solid #104E8B;
}

#suckerfish ul ul {
border-left: 1px solid #2EB0FF;
border-right: 1px solid #104E8B;
}

#suckerfish li li {
border-left: 0;
border-right: 0;
border-top: 1px solid #2EB0FF;
border-bottom: 1px solid #104E8B;
}

#suckerfishclear {
clear: left;
margin: 0 10px 0 10px;
background: url(shadow.png) repeat-x;
height: 6px;
border-top: 1px solid #104E8B;
}
</code>

Any suggestions you have would be greatly appreciated.

Thanks again,
Josh

[Author]

Posts