LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Simple JQuery Responsive Menu Bar For Web And Blogs

Simple JQuery Responsive Menu Bar For Web And Blogs

JQuery-Responsive-Menu-Bar
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.

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.

Recommended For You:
How To Convert Color Image In GrayScale Using CSS?

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…

You Like It, Please Share This Recipe With Your Friends Using...

3 Responses to “Simple JQuery Responsive Menu Bar For Web And Blogs”

  1. Sumit Kumar Gogawat says:

    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.

Leave a Reply to Sumit Kumar Gogawat Cancel reply

Your email address will not be published. Required fields are marked *