2015Feb03
0

Multiple Device Responsive Menu Plugin with jQuery

Mobile optimized jQuery navigation menu plugin that automatically convert a regular navigation into a multi-level drop down menu on mobile screens.
Multiple Device

Demo Download

1. Import jQuery library and the responsivemenu.js script into your document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript" src="responsivemenu.js"></script>

 2. HTML Marckup:
<div class="rmm">
<ul>
<li>
<a href="#">Tutorials</a>
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">javascript</a>
</li>
<li>
<a href="#">Graphic</a>
<ul>
<li>
<a href="#">Photoshop</a>
</li>
<li>
<a href="#">Game Design</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Demos</a>
</li>
<li>
<a href="#">Downloads</a>
<ul>
<li>
<a href="#">Web Templates</a>
</li>
<li>
<a href="#">PSD Layouts</a>
</li>
<li>
<a href="#">Wordpress Theams</a>
</li>
</ul>
</li>
<li>
<a href="#">Inspiration</a>
</li>
</ul>

</div>

 3. CSS:
.rmm {
     margin: 1px auto;
     text-align: center;
     font-family: Tahoma;
}

.rmm ul {
     text-align: left;
     display: inline;
     margin: 0;
     padding: 0;
}

.rmm ul ul {
     display: none;
     margin: 0;
}

.rmm ul li:hover > ul {
     display: block;
}

.rmm ul {
     background: #373737;
     box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
     list-style: none;
     position: relative;
     display: inline-table;
}

.rmm ul:after {
     content: "";
     clear: both;
     display: block;
}

.rmm ul li {
     float: left;
}

.rmm ul li:hover {
     background: #6FC46D;
}

.rmm ul li:hover a {
     color: #fff;
}

.rmm ul li a {
     color: #fff;
     font-weight: 600;
     display: block;
     padding: 5px 35px;
     text-decoration: none;
     text-transform: uppercase;
}

.rmm ul ul {
     background: #6FC46D;
     border-radius: 0px;
     padding: 0;
     position: absolute;
     top: 100%;
}

.rmm ul ul li {
     border-bottom: 1px solid #6FC46D;
     border-top: 1px solid #528450;
     float: none;
     min-width: 200px;
     position: relative;
}

.rmm ul ul li a {
     padding: 5px 35px;
     color: #fff;
     text-align: left;
}

.rmm ul ul li a:hover {
     background: #9BDB99;
}

.rmm ul ul ul {
     position: absolute;
     left: 100%;
     top: 0;
}

.rmm li.dl-back:after, .rmm li > a:not(:only-child):after {
     font-family: 'icomoon';
     speak: none;
     -webkit-font-smoothing: antialiased;
    
     position: relative;
     display: inline-block;
     -webkit-transform: rotate(210deg);
     transform: rotate(210deg);
     top: -1px;
     right: -20px;
     float: right;
}

.rmm .fixie:after {
     top: -20px !important;
}

.rmm-mobile .fixie:after {
     top: -1px !important;
}

.rmm .dl-back:after {
     display: none !important;
}

.rmm li li.dl-back:after, .rmm li li > a:not(:only-child):after {
     -webkit-transform: rotate(120deg) !important;
     transform: rotate(120deg) !important;

}

 4. This step for the menu header on mobile devices:
.rmm-toggled {
     width: 100%;
     background-color: #555555;
     min-height: 50px;
     margin: 0 auto;
     display: none;
}

.rmm-closed ~
ul {
     display: none;
}

.rmm-toggled-controls {
     width: 100%;
}

.rmm-toggled-title {
     width: 60%;
     float: left;
     font-size: 27px;
     color: #fff;
     font-weight: 600;
     display: block;
     padding: 8px 0;
     text-decoration: none;
     text-transform: uppercase;
     text-align: left;
     padding-left: 35px;
}

.rmm-toggled-button {
     width: 20%;
     float: left;
     margin-top: 3px;
     display: block;
     width: 32px;
     padding: 0 !important;
     margin: 10px 10px 0 0;
     border: 1px solid #fff;
     border-radius: 3px;
     float: right;
}

.rmm-toggled-button span {
     float: left;
     display: block;
     margin: 3px 6px;
     height: 3px;
     background: white;
     width: 20px;

}

 5. This Required CSS for Mobile Devices:
.rmm-mobile {
     width: 100%;
}

.rmm-mobile .rmm-dropdown:hover ~
ul, .rmm-mobile .rmm-dropdown:hover > ul, .rmm-mobile .rmm-dropdown:hover + ul {
     display: none !important;
}

.rmm-mobile li {
     width: 100%;
     background: #6FC46D;
     border-bottom: 1px solid #9BDB99 !important;
     border-top: 0 !important;
}

.rmm-mobile li.dl-back:after, .rmm-mobile li > a:not(:only-child):after {
     -webkit-transform: rotate(120deg) !important;
     transform: rotate(120deg) !important;
}

.rmm-mobile .dl-submenu {
     position: relative;
     left: 0px;
}

.dl-back {
     display: none;
}

.rmm-mobile .dl-back {
     display: block;
}

.rmm-dropdown {
     display: block !important;
}

.dl-subview {
     display: block !important;
}

.dl-subover-hidden {
     display: none !important;
}

.dl-subover-visible {
     display: block;
}

.dl-subover-header {
     display: none !important;
}

.rmm .rmm-mobile li:hover > ul {
     display: none;

}

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

Related Posts:

No comments :

Post a Comment