Hi Friends, Today i will tell you how to create expand collapse sliding menu using jquery. It is very useful because nowadays in every website we need a expand collapse menu to enhance website user interface and make your website attractive.
In this i am using toogle (show and hide), slide functions of jquery to expand and collapse the menu. We can choose the direction too in this blog.
For Know More about jquery you can read below articles
Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners
You can see the live demo and download the code below
You have to follow some steps to create a expand collapse sliding menu using jquery. These steps are
Step1: Create one html document i.e. index.html
Step2: Write below code in index.html
Body Section Code: In this you are writing your menu options like Home, About, Contacts etc.
<div class="menu"> <div class="butn-expand"></div> <div class="collapsed"> <ul> <li><a href="#" target="_blank">Home</a></li> <li><a href="#" target="_blank">About</li> <li><a href="#" target="_blank">Services</li> <li><a href="#" target="_blank">Contact</li> <li><a href="#" target="_blank">Submit Guest Post</li> </ul> </div> </div>
In the above code you can change the url and name of your url anytime.
<li><a href="Your URL" target="_blank">Name Of Your Menu</a></li>
Styling code: You can change the layout and other styling using this. Paste the recommended below styling code in your head section of page.
<style type="text/css"> .menu {background: #f3f3f3;padding: 10px;overflow: hidden;} .menu .butn-expand {float: left;background: url("expand.png") center no-repeat; width:32px;height:32px;cursor:pointer;} .collapsed{position:absolute;left:50px;top:25px;display:none;} ul{list-style:none;padding:0px;margin:0px;float:right;} ul li{list-style:none;display:inline-block;padding-right:15px;} li:first-child { padding-left:15px; } a { color:#ff0000; text-decoration:none;} a:hover , a:focus {color:#000;} </style>
Jquery Functionality Code: After using this your expand collapse menu will work properly and it comes in a sliding way.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script> $(document).ready(function (e) { $(".menu .butn-expand").click(function (e) { $('.collapsed').toggle("slide", { direction: "left" }, 1500); }); });</script>
You can increase or decrease the time interval anytime.
$(".menu .butn-expand").click(function (e) { $('.collapsed').toggle("slide", { direction: "left" }, Your Time Interval); });
Step3: Save your html document and see the preview in your browser.
Step4: Enjoy Your expand collapse menu.
Read About Other Interesting Things below.
If You like my blog, kindly Subscribe it.
Categories: Website Design
Leave a Reply