Hey Friend after Short break I am back. In this tutorial creating Css3 and Jquery sliding menu. This is an awesome work. You add this your website. I likes very much. Watch now this tutorial. Please Share This post Friends And Family. GOD BLESS YOU & ALLAH HAFIZ.
This is a very good Sliding Menu
HTML Structure
<!DOCTYPE html><html lang="en"><head><title> Navigation Menu</title><link rel="stylesheet" href="css/style.css"/><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"><script type="text/javascript" src="js/jquery.js"></script></head><body></body></html>
Create the HTML link Home About us Portfolio Contact us
<ul id="toggle"><li><div class="active"> <span class="menu-icons home"><i class="menu-icons fa fa-home"></i> </span><h3>HOME</h3></div></li><li><div><span class="menu-icons about"> <i class="fa fa-user"></i> </span><h3>ABOUT US</h3><span class="the-btn"><i class="fa fa-plus"></i></span><div class="clear"></div></div><ul><li><a href="#">OUR TEAM</a></li><li><a href="#">OUR SERVICES</a></li></ul></li><li><div><span class="menu-icons portfolio"><i class="fa fa-briefcase"></i> </span><h3>PORTFOLIO</h3><span class="the-btn"><i class="fa fa-plus"></i></span></div><ul><li><a href="#">WEB DESIGN</a></li><li><a href="#">GRAPHIC DESIGN</a></li></ul></li><li><div> <span class="menu-icons contact"><i class="fa fa-envelope"></i> </span><h3>CONTACT</h3></div></li></ul>
Add Css Code
This is a style css beautiful. This is awesome.
body {width: 100%;background: #fff;}#toggle {width: 240px;list-style: none;margin: 170px auto;}#toggle div:hover {background: #D100A7;}#toggle div.active {background: #D100A7;}#toggle div {background-color: #D100A7;cursor: pointer;display: block;margin: 1px;}#toggle h3 {font-size: 14px;margin: 0;padding: 0;font-family: Tahoma;color: #fff;line-height: 41px;font-weight: normal;text-shadow: 1px 1px 0px #adadad;filter: dropshadow(color=#adadad, offx=1, offy=1);}.clear {clear: both;display: block;overflow: hidden;visibility: hidden;}/*= ICONS--------------------------------------------------------*/span.menu-icons {font-size: 26px;height: 20px;width: 22px;float: left;margin: 6px 12px 10px 12px;color: #fff;}span.the-btn {float: right;font-size: 26px;height: 30px;width: 43px;margin-top: -34px;margin-right: -10px;padding:0;color: #fff;}/*= UNORDERED LIST STYLES--------------------------------------------------------*/#toggle ul {list-style: none;display: none;background-color: yellow;color: fff;}#toggle ul li {line-height: 41px;color: #fff;list-style: circle;width: 240px;padding: 0;margin: 0;}#toggle a {text-decoration: none;color: #fff;font-family: Tahoma;font-size: 14px;text-shadow: 1px 1px 0px #adadad;filter: dropshadow(color=#adadad, offx=1, offy=1);}#toggle a:hover {color: green;}
The jQuery Sliding Effect
$("#toggle > li > div").click(function () { if (false == $(this).next().is(':visible')) { $('#toggle ul').slideUp(); } var $currIcon=$(this).find("span.the-btn > i") $("span.the-btn > i").not($currIcon).addClass('fa-plus').removeClass('fa-minus'); $currIcon.toggleClass('fa-minus fa-plus'); $(this).next().slideToggle(); $("#toggle > li > div").removeClass("active"); $(this).addClass('active'); });Final Thoughts
Post a Comment