WordPress Dropdown Menu
Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I’ll show you how to create a “Magazine Style” horizontal drop-down menu, for your categories or even your pages.
Once you added the lines above to your stylesheet, you’ll have a modern, accessible and xhtml/css valid fancy menu. If you want to ensure backward compatibility with IE6, you’ll have to add this bit of Javascript:
Paste this script into an external file, or in the head section of your index.php file. Once done, your blog now have a fancy dropdown horitontal menu!
Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I’ll show you how to create a “Magazine Style” horizontal drop-down menu, for your categories or even your pages.
The php
The first thing we have to do is to use php to get or pages and subpages (or our categories/sub-categories). Paste the following code in the header.php file of your theme.
<ul id="nav2" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
<?php wp_list_categories('orderby=name&exlude=181&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
The CSS
As usual, the CSS will control the look and feel of html elements, but it will also allows us to display only the sub-categories of the selected category. No Javascript is needed in this exemple, excepted if you want to ensure backward compatibility with Internet Explorer 6.
#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}
#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}
#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}
#nav2 li {
float: left;
list-style:none;
}
#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}
#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}
#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}
#nav2 li li {
width: auto;
}
#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}
#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
left: 30px;
}Once you added the lines above to your stylesheet, you’ll have a modern, accessible and xhtml/css valid fancy menu. If you want to ensure backward compatibility with IE6, you’ll have to add this bit of Javascript:
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
Paste this script into an external file, or in the head section of your index.php file. Once done, your blog now have a fancy dropdown horitontal menu!
If This Post Helps You Then Please Leave Your Comment Below
Thanks For Visiting
www.freehub4u.blogspot.com
Thanks For Visiting
www.freehub4u.blogspot.com
0 comments:
Post a Comment