Responsive navigation – converting menu navigation to dropdown navigation

0
20

Basically this article is about preparing the Responsive Navigation by converting horizontal menu navigation to dropdown navigation. In the very fast and moving edge of responsive designs and responsive layouts you might have seen X numbers to responsive navigation with different look and feel, which actually requires a bit extra time and CSS efforts to prepare them. But preparing a dropdown navigation using <select> and <option> tag is quite easier and along which actually consume very less space to fit in web page to be viewed on mobile devices

What it just need a very few line of CSS code, CSS3 media queries, and JQuery. So let’s start the session.

HTML TO PREPARE DROPDOWN NAVIGATION

1. Adding Media viewport inside the <head> tag – :-  if you are already using a responsive layout structure, then no need to add Media viewport again as that will be already there in your page <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

2. Placing the navigation code inside <nav> tag – if you are using a WordPress site then simply place the navigation code inside the <nav> tag. So your navigation code will look something like this –

<nav><?php wp_nav_menu( array( 'theme_location' =>  'primary' ) ); ?></nav>

If you have a normal HTML or PHP site then your navigation code will look something like this –

<nav>
  <ul>
     <li><a  href="#">Home</a></li>
     <li><a href="#">About  Us</a></li>
     <li><a href="#">Our  Services</a>
        <ul>
           <li><a href="#">Web Designing</a></li>
           <li><a href="#">Web Development</a></li>
        </ul>
     </li>
     <li><a href="#">Contact  Us</a></li>
  </ul>
  </nav>

CSS

Now by default we are going to hide the dropdown navigation and instead we will force horizontal navigation (normal navigation of your website) to get displayed. So for that simply place the below CSS code inside your Style sheet –

nav select 
{
  display: none; /*= Force dropdown navigation to hide on desktop = */
}
@media (max-width: 960px)  
{
  nav ul     { display: none; } /*= Force normal horizontal navigation to hide mobile devices and ipad = */
  nav select { display: inline-block; } /*= Force dropdown navigation to get displayed on mobile devices and ipad = */
}

JQUERY TO PREPARE DROPDOWN NAVIGATION USING TAG

Simply place the below code inside the < head > tag of your template file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
 $(function() {
$("<select />").appendTo("nav"); 

$("<option />", 
{ 
   "selected": "selected", 
   "value"   : "", 
   "text"    : "Site Menu" // default <option> to display in dropdown 

}).appendTo("nav select"); 

$("nav a").each(function()
{ 
 var el = $(this); 
 $("<option />", { 
     "value"   : el.attr("href"), 
     "text"    : el.text() 
 }).appendTo("nav select"); 
});

$("nav select").change(function() 
{ 
  window.location = $(this).find("option:selected").val(); 
}); });
</script>

Here you are all set, just go and check the out on your mobile device and ipad.

LEAVE A REPLY

Please enter your comment!
Please enter your name here