logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Create Expand Collapse Sliding Menu Using jQuery

Create Expand Collapse Sliding Menu Using jQuery

May 4, 2016 No comments Article SEO Website Designing

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

Create Expand Collapse Sliding Menu Using jQuery Live Demo and Download:

You can see the live demo and download the code below




SEO Website Designing Live Demo    SEO Website Designing Download

How to Create Expand Collapse Sliding Menu Using jQuery:

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.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.