Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 “Navigation – Second Level Menu”

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

The end result with a little mod will look like this:

#topbar .subwrap {
background: #fff;
height: 51px;
width: 958px
}
.submenu {
background: #fff;
height: 34px;
line-height: 34px;
padding: 0;
margin: 0;
}
.submenu a {
color : #790000;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.submenu a:hover, .submenu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.submenu ul {
list-style : none;
padding : 0;
margin : 0;
}
.submenu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}
/* Override Children */
.children {display: none;}

Note how I made a few changes to .subwrap and .submenu to differential it from the main menu, very subtle change though. Also note how I added a style at the very end to prevent the child(ren) category(ies) from being displayed.

That’s it, check the result, a second level menu using categories.

Next time, we will discuss conditional and dropdown/slidedown menus.

02.11.2008 - 7:22 pm - Design, How to, Resources, Tips - 1,150 views -