আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

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 *