WordPress 3 has a native menu functionality that is really cool and allows WordPress site administrators to easily add and edit menus on their sites.
Here’s a really simple way to get a smooth dropdown menu for those indented menu items in your custom menu.
View The Demo (view the source of this page to see how it’s done)
Stick this little snippet of jquery in your WordPress header.php file and be sure to include the main jquery library before it.
1 2 3 4 5 6 7 |
$(document).ready(function(){ <br />
$('.menu-item').hover(function(){ <br />
var position = $(this).position(); <br />
$('.sub-menu', this).css('margin-left', position.left); <br />
$('.sub-menu', this).slideToggle('slow'); <br />
}); <br />
});
|
Place this in your style.css file. As always with CSS it’s infinitely customisable but the styles i’ve included can get you started.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.menu{ position:relative;<br />
float:left;<br />
margin:0;<br />
padding:0;<br />
z-index:100;<br />
list-style:none;<br />
}
.menu li{
display:inline;<br />
float:left;<br />
padding:0;<br />
}
.menu a:link, .menu a:visited{
font-size:12px;<br />
text-decoration:none;<br />
float:left;<br />
color:#fff;<br />
background:#444;<br />
text-align:center;<br />
padding:8px 12px;<br />
line-height:12px;<br />
font-weight:bold;<br />
}
.menu a:active, .menu a:hover{
text-decoration:none;<br />
color:#fff;<br />
background:#888;<br />
}
ul.sub-menu{
position:absolute;<br />
top:27px;<br />
left:0px;<br />
display:none;<br />
background:#888;<br />
padding:12px 6px;<br />
z-index:100;<br />
-moz-border-radius-bottomleft:5px;<br />
-webkit-border-bottom-left-radius:5px;<br />
-moz-border-radius-bottomright:5px;<br />
-webkit-border-bottom-right-radius:5px;
width:160px;<br />
}
.sub-menu li{
background:transparent;<br />
}
.sub-menu a:link, .sub-menu a:visited {
text-align:left;<br />
display:block;<br />
border-bottom:1px solid #fff;
width:142px;<br />
color:#fff;<br />
text-decoration:none;<br />
padding:8px;<br />
background:#888;<br />
}
.sub-menu a:hover, .sub-menu a:active{
background:#444;<br />
}
|
