How to get the menus inside the drop down for Responsive?
Here is the script for you. Jquery makes our work very simple and more efficient. The steps below will automatically create a drop down of menus instead of creating drop down manually to mange the menus simply. Thanks Jquery !!!
Step 1 : Add the Jquery latest min.js in the header
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Step 2 : Add the below code in your Main CSS page to hide the navigation on load by default.
nav select { display: none; }
Step 3 : Add the below code in your Media CSS page
@media only screen and (max-width: 1000px){
nav ul { display: none; }
nav select { display: inline-block; margin-bottom: 30px; width: 98%; }
}
@media only screen and (max-width: 750px){
nav ul { display: none; }
nav select { display: inline-block; margin-bottom: 30px; width: 98%; }
}
Step 4 : Add the below code in your Common .js page or custom js page
jQuery(document).ready(function(){
jQuery('<select />').appendTo('#mobile-menu');
jQuery('<option />', {
'selected': 'selected',
'value' : '',
'text' : 'Go to...'
}).appendTo('#mobile-menu select');
jQuery('nav a').each(function() {
var el = jQuery(this);
if(el.parents('.subNav').length) {
jQuery('<option />', {
'value': el.attr('href'),
'text': '— ' + el.text()
}).appendTo('nav select');
} else {
jQuery('<option />', {
'value': el.attr('href'),
'text': el.text()
}).appendTo('nav select');
}
});
jQuery('#mobile-menu select').change(function() {
window.location = jQuery(this).find('option:selected').val();
});
});
Step 5 : Add the below code inside your <body> tag. The drop down will create automatically inside the #mobile-menu identification.
<nav id="mobile-menu" role="navigation"></nav>
<nav class="topNav">
<ul>
<li class="first"><a href="index.html" class="active">Home</a></li>
<li>
<a href="product.html">Product</a>
<ul class="subNav">
<li><a href="#">FaQs</a></li>
<li><a href="#">Customer Testimonials</a></li>
</ul>
</li>
<li><a href="#">Pricing</a></li>
<li class="last"><a href="#">Company</a></li>
</ul>
</nav>
Last step : Save as .html page and run in the browser and set the browser as responsive.
Enjoy !!!
