I'm looking for some options for creating a horizontal flyout/rollover menu from the WordPress categories listing when category items have child nodes.
Ideally, all in css, but I can include javascript or enqueue jQuery too.
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It only takes a minute to sign up.
Sign up to join this communityA lot of themes have a menu like this. The CSS I'm usually using (I left the visual stuff like colors out):
(assumming the container is a div and its class is .nav
)
/* 1st level items are layed out horizontally */
.nav li{
position:relative;
float:left;
}
/* level 2+ */
.nav ul ul{
position:absolute;
z-index:15;
display:none;
width:300px;
top:20px;
}
/* level 3+ */
.nav ul ul ul{
top:10px;
left:280px;
}
/* 2nd level+ items vertically */
.nav li li{
float: none;
}
/* when mouse over a list item, show its child nodes */
.nav li:hover ul, .nav li li:hover ul,
.nav li li li:hover ul, .nav li li li li:hover ul{
display:block;
}
/* related to the above property, hide the child's child nodes :) */
.nav li:hover ul ul, .nav li:hover ul ul ul,
.nav li:hover ul ul ul ul{
display:none;
}
You can also use superfish on the list to apply some nice effects to the menu and to make it work in IE 6.