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.