How to create Drop Down Menu From Scratch :- WordPress


1).  register your menu function in function.php

function register_my_menus() {
    register_nav_menus(
        array(
            'top-nav' => __( 'Top Nav' )
        )
    );
}
2). create a Main Menu from the wordpress menu tab (admin area)
create-menu
3).  add the following line in your page
<?php wp_nav_menu( array(‘theme_location’ => ‘top-nav’ , ‘container_class’ => ‘menu’)); ?>
4). you will get the menu like this.
Capture
5). style your drop down menu with css
.menu {
background-color: #000;
display: block;
float: left;
margin: 0 auto;
width: 100%;
height: 42px;
}
.menu ul,
div.menu ul {
list-style: none;
margin: 0;
padding: 0;
}.menu li,
div.menu li {
float: left;
position: relative;
}

6). Positioning and Hiding the Submenu

.menu ul ul {

display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

7). Better Colouring and spacing things out

.menu a {
    color: #aaa;
    display: block;
    line-height: 41px;
    padding: 0 10px;
    text-decoration: none;
    font-weight: normal;
}
8).  Adding the Hover
.menu ul li:hover > ul {
    display: block;
}

.menu li:hover > a,
.menu ul ul :hover > a {
background: #333;
color: #fff;
}

9).  Styling the Submenu

.menu ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}

10). Highlighting the Current Page

.menu ul li.current_page_item > a,
.menu ul li.current-menu-ancestor > a,
.menu ul li.current-menu-item > a,
.menu ul li.current-menu-parent > a {
color: #fff;
}

11). Final Menu

menu drop

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s