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:
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:
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:
Hello, This is Rashad. I like programming.