Navigation system on a web page or a blog is too much important now a day and consider as a SEO techniques so thinking to avoid this is a big mistake so its sure and confirmed that you have to use it but Responsive requirements are also in market too and trending so you have to think about that. also.
So here we have a Simple JQuery Responsive Menu Bar that is use able on any blog or a web page so this will give you a single menu bar but as per page device it will go responsive that can make it much better then a wide off screen menu bar so you will able to see all links within user screen. So now checkout the DEMO for Simple JQuery Responsive Menu Bar and then garb the ready to use code of Simple JQuery Responsive Menu Bar.
Table of Contents
Features:
1.) JQuery File Added.
2.) JavaScript Files Added.
3.) CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.
How To Add In A WebPage?
1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.
JQuery / JavaScript:
<script src='https://code.jquery.com/jquery-1.10.1.min.js' type='text/javascript'></script> <script type='text/javascript'> $(document).ready(function () { $("<select></select>").appendTo(".LinkList"); $("<option></option>", { selected: "selected", value: "", text: "Navigation" }).appendTo(".LinkList select"); $(".LinkList a").each(function () { var el = $(this); $("<option></option>", { value: el.attr("href"), text: el.text() }).appendTo(".LinkList select") }); $(".LinkList select").change(function () { window.location = $(this).find("option:selected").val() }); }) </script>
CSS:
<style type='text/css'> .LinkList li{list-style: none;display: inline-block;padding: 10px;} .LinkList select {display: none;} @media (max-width: 600px) { .LinkList ul { display: none; } .LinkList select { display: inline-block; } } </style>
HTML:
<div class="widget LinkList" id="LinkList1"> <ul> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Home</a></li> </ul> <div class="clear"></div> </div>
Customization:
1.) You Can Add More CSS. If You Are Pro, Then You Can Do Any Thing.
Last Words:
That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…
Very Nice Article.,but can you please provide a tutorial for responsive menu for mobile view. When a visitor comes from mobile then menu will automatically convert to drop down responsive menu.
Thanks in advance.
Welcome here and thanks for reading our article and sharing your views.
Welcome here and thanks for reading our article and sharing your views.