jstemp's Introduction

Jquery Slide Menu

HOW TO USE

First go to website http://fortawesome.github.io/Font-Awesome/ and download the last version of the Font Awesome

Next, include Font Awesome to your project.

And, include the jquery plugin to your project. Jquery Quick Access : (code.jquery.com/jquery-1.10.2.min.js)

1- Include jquery-slide-menu.css in head

2- Include jquery-slide-menu.js in after jquery plugin

3 - Use :

<script type="text/javascript">
	$(document).ready(function(e) {
        $('.nav-slide').SlideMenu({
			speedLR: 1000,
			speedUD: 500,
			expand: true,
			collapse: true
		});
  });
</script>

6- Html template :

<div class="nav-slide">
    <div class="btn-slide"></div>
    <div class="nav-body">
        <div class="head-slide">Main Menu</div>
        <div class="body-slide">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="nav-body">
        <div class="head-slide">Software</div>
        <div class="body-slide">
            <ul class="nav">
                <li><a href="#">Windows</a></li>
                <li><a href="#">Linux</a></li>
                <li><a href="#">Apple Mac</a></li>
            </ul>
        </div>
    </div>
    <div class="nav-body">
        <div class="head-slide">Games</div>
        <div class="body-slide">
            <ul class="nav">
                <li><a href="#">Wrcraft III</a></li>
                <li><a href="#">Dota 2</a></li>
                <li><a href="#">Diablo III</a></li>
            </ul>
        </div>
    </div>
</div>

Recommend Projects