WordPress Theme Development: Drop-Down and JQuery Toggle Navigation (Lesson-5)

Hello guys, I am Rashad and writing for w3Programmers wordpress theme development. Now we are in position that I was display logo, search form and navigation menu in our theme in the previous lesson-4. In the first part of this post, I will use our theme style.css file to drop down navigation menu also later I will use Jquery for toggle navigation menu. I add all categories of w3Programmers and the look of our theme below:
current-look-of-wordpress-theme-2

Look at previous lession that wordpress default value of container_class is w3-menu class. Now I put the below css code in style.css file:

/*Drop down menu css*/

.w3-nav {
    background: -webkit-linear-gradient(#2794A3, #20747F) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#2794A3, #20747F) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(#2794A3, #20747F) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#2794A3, #20747F) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
}
.w3-menu ul, .w3-menu li {
    display: inline;
}

.w3-menu a {
    display: block;
    color: #F9F9F9;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 50px;
    padding: 0 20px;
    text-decoration: none;
}
.w3-menu a:hover {
    background: #444444;
}
.w3-menu ul ul a {
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 0 dotted #DDDDDD;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    height: auto;
    line-height: 1.4em;
    padding: 5px;
    width: 210px;
}
.w3-menu ul{
    font-size: 16px;
    list-style: none outside none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
}
.w3-menu li {
    position: relative;
    float: left;
}
.w3-menu ul li {
    position: relative;
    float: left;
}

.w3-menu ul ul {
    position: absolute;
    top: -99999px;
    left: 0;
    background: #4b4b4b;
    text-align: left;
}
.w3-menu ul li:hover > ul {
    top: 100%;
    opacity: 1;
    z-index: 3;
}
.w3-menu .current-menu-item > a, .w3-menu .current-menu-ancestor > a, .w3-menu .current_page_item > a, .w3-menu .current_page_ancestor > a {
    color: #F9F9F9;
    font-weight: bold;
}
.w3-menu li:hover a, .w3-menu a:focus {
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#f9f9f9, #e5e5e5) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color: black;
}

The above css is drop-down basic navigation menu css and as I am scratching the current theme of w3Programmers, I copy the colors and background. The below image is drop-down effect in our theme for navigation menu:

drop-down-navigation-menu

Now I am going to use a little bit Jquery to toggle navigation for hide and show menu bar and the full website responsive mobile version support. A toggle menu is a responsive part of the wordpress theme. Now I am using the below toggle jQuery script in our footer.php before the </body> tag.

<script>
    jQuery("#show-nav").click(function() {
        jQuery(".w3-menu").toggle("slow");
        jQuery("#close-nav").show("slow");
    });
    jQuery("#close-nav").click(function() {
        jQuery(".w3-menu").toggle("slow");
        jQuery("#close-nav").hide("slow");
    });
</script>

And some css for hide, show and some media query in the below css code in our style.css file:

#show-nav {
    display: none;
    background: #2794A3;
}
#close-nav {
    display: none;
    background: #2794A3;
    text-align: right;
    font-family: sans-serif;
}


@media only screen and (max-width: 700px) {
    .w3-menu ul ul {
        position: relative;
        top: 0;
    }
    .w3-menu ul li:hover > ul {
        opacity: 1;
        z-index: 3;
    }
    .w3-menu ul{
        font-size: 16px;
        list-style: none outside none;
    }
    .w3-menu li {
        float: left;
    }
    .w3-menu li:hover a, .w3-menu a:focus {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        color: black;
    }
    .w3-menu ul li:hover > ul {
        position: relative;
    }
    .w3-menu ul ul a {
        padding: 0 20px 0 40px;
        width: auto;
        line-height: 50px;
    }
    .w3-menu ul li {
        float: none;
    }
    .w3-menu {
        display: none;
    }
    #show-nav {
        display: block;
    }
}

Now back to our header.php file. Here I need responsive css grid and I am using Skeleton CSS: download github link. And link the Skeleton css to header.php into <head> tag. And below the complete modified header.php code where I use wp_enqueue_script() which is link to jQuery code to toggle our navigation.

<!DOCTYPE html>
<html language="en">
    <head>
        <title>
            <?php
            wp_title('|', 'true', 'right');
            bloginfo('name');
            ?>
        </title>
        <?php wp_enqueue_script('jquery'); ?>
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css">
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/skeleton.css">
        <?php
        wp_head();
        ?>
    </head>
    <body>
        <div id="container">
            <header id="header">
                <div class="logo">
                    <a href="<?php echo get_option('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" title="<?php bloginfo('title'); ?>" height="200" width="399"></a>
                </div>
                <div class="search">
                    <?php get_search_form(); ?>
                </div>
                <div class="clear"></div>
                <div class="w3-menu sixteen columns" id="close-nav"><a href="#">X</a></div>
                <div class="w3-menu sixteen columns" id="show-nav"><a href="#">w3Programmers Menu</a></div>
                <div class="sixteen columns row w3-nav">
                    <?php wp_nav_menu(array('theme_location' => 'primary', 'container_class' => 'w3-menu', 'container' => 'nav')); ?>
                </div>
            </header>

Finally I got the jQuery toggle navigation menu from the below images:
w3Programmers-mobile-menu

w3Programmers-toggle-menu

w3Programmers-toggle-mobile-menu

Hello, This is Rashad. I like programming.

Leave a Reply

Your email address will not be published. Required fields are marked *