Standard dropdown menu
Description
this code generates a standard dropdown mene based on WordPress parameters
this code generates a standard dropdown mene based on WordPress parameters
HTML Source Code
<!--HTML Menu Starts-->
<div id="menu">
<ul id="nav">
<?php $args = array(
'depth' => 2,
'show_date' => '',
'date_format' => get_option('date_format'),
'child_of' => 0,
'exclude' => '',
'include' => '',
'title_li' => '',
'echo' => 1,
'authors' => '',
'sort_column' => 'menu_order, post_date',
'link_before' => '',
'link_after' => '',
'walker' => '' ); ?>
<?php wp_list_pages( $args ); ?>
</ul>
</div>
<!--HTML Menu Ends-->
CSS Source Code
/*Drop Down Menu Start*/
#menu {
background: none repeat scroll 0 0 transparent;
border: 1px solid;
float: left;
font-family: calibri;
margin-top: 20px;
width: 100%;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
z-index: 999;
}
#nav a {
color: #FFFFFF;
display: block;
font-family: helvetica;
font-size: 18px;
height: 23px;
margin-right: 4px;
padding-top: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav li:hover{
background-color:#00A4E1;
color:#ffffff;
}
#nav li {
background: none repeat scroll 0 0 #F16820;
float: left;
position: relative;
width: 135px;
}
#nav ul {
display: none;
margin-top: 0;
padding-top: 2px;
position: absolute;
}
#nav li, #nav ul {
margin-right: 3px;
width: 135px;
}
#nav li ul a {
width: 125px;
height: auto;
float: left;
text-align: left;
padding-left: 10px;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
/*Drop Down Menu End*/
JavaScript Code
<!--Jquery Menu Starts-->
<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>
<!--Jquery Menu Ends-->