"Accordian"
Bootstrap 3.3.0 Snippet by mrp3k

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content"> <nav> <div id="menu" class="menu"> <div class="menu-header"> ACCORDION MENU </div> <ul> <li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li> <li><a href="#"><i class="fa fa-file-image-o"> </i>Gallery</a> <ul class="submenu"> <li><a href="#"> Graphics</a></li> <li><a href="#"> Photoshop</a></li> </ul> </li> <li><a href="#"><i class="fa fa-cog"> </i>Services</a> <ul class="submenu"> <li><a href="#"> Web Design </a> <ul class="submenu"> <li><a href="#"> WordPress</a></li> <li><a href="#"> Joomla</a></li> </ul> </li> <li><a href="#"> Hosting</a></li> <li><a href="#"> Design </a></li> </ul> </li> <li><a href="#"><i class="fa fa-newspaper-o"> </i>News<span class="menu-label"> 8 </span></a></li> <li><a href="#"><i class="fa fa-user"> </i>About</a></li> <li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li> </ul> <div class="menu-footer"> @ Test</div> </div> </nav> </div>
.content { margin: 100px auto; width: 260px; } .colors { float: left; margin: 20px auto; width: 260px; } .colors a { float: left; height: 30px; width: 33.33333333%; } .menu { box-shadow: 0 20px 50px #333333; float: left; min-width: 260px; outline: 0; position: relative; } .menu * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; } .menu .menu-footer { background: #414956; color: #f0f0f0; float: left; font-weight: normal; height: 50px; line-height: 50px; font-size: 6px; width: 100%; text-align: center; } .menu .menu-header { background: #414956; color: #f0f0f0; font-weight: bold; height: 50px; line-height: 50px; text-align: center; width: 100%; } .menu ul { list-style: none; margin: 0; padding: 0; } .menu ul li { display: block; float: left; position: relative; width: 100%; } .menu ul li a { background: #414956; color: #f0f0f0; float: left; font-size: 13px; overflow: hidden; padding: 14px 22px; position: relative; text-decoration: none; white-space: nowrap; width: 100%; } .menu ul li a i { float: left; font-size: 16px; line-height: 18px; text-align: left; width: 34px; } .menu ul li .menu-label { background: #f0f0f0; border-radius: 100%; color: #555555; font-size: 11px; font-weight: 800; line-height: 18px; min-width: 20px; padding: 1px 2px 1px 1px; position: absolute; right: 18px; text-align: center; top: 14px; } .menu ul .submenu { display: none; position: static; width: 100%; } .menu ul .submenu .submenu-indicator { line-height: 16px; } .menu ul .submenu li { clear: both; width: 100%; } .menu ul .submenu li ul.submenu { display: none; position: static; width: 100%; overflow: hidden; } .menu ul .submenu li a { background: #383838; border-left: solid 6px transparent; border-top: none; float: left; font-size: 11px; position: relative; width: 100%; } .menu ul .submenu li:hover > a { border-left-color: #414956; } .menu ul .submenu li .menu-label { background: #f0f0f0; border-radius: 100%; color: #555555; font-size: 11px; font-weight: 800; line-height: 18px; min-width: 20px; padding: 1px 2px 1px 1px; position: absolute; right: 18px; text-align: center; top: 12px; top: 14px; } .menu ul .submenu > li > a { padding-left: 30px; } .menu ul .submenu > li > ul.submenu > li > a { padding-left: 45px; } .menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a { padding-left: 60px; } .menu .submenu-indicator { -moz-transition: "transform .3s linear"; -o-transition: "transform .3s linear"; -webkit-transition: "transform .3s linear"; transition: "transform .3s linear"; float: right; font-size: 20px; line-height: 19px; position: absolute; right: 22px; } .menu .submenu-indicator-minus > .submenu-indicator { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu > ul > li.active > a { background: #3b424d; color: #ffffff; } .menu > ul > li:hover > a { background: #3b424d; color: #ffffff; } .menu > ul > li > a { border-bottom: solid 1px #3b424d; } .ink { -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); background: rgba(255, 255, 255, 0.3); border-radius: 100%; display: block; position: absolute; transform: scale(0); } .animate-ink { -moz-animation: ripple .3s linear; -ms-animation: ripple .3s linear; -o-animation: ripple .3s linear; -webkit-animation: ripple .3s linear; animation: ripple .3s linear; } @-moz-keyframes 'ripple' { 100% { opacity: 0; transform: scale(2.5); } } @-webkit-keyframes 'ripple' { 100% { opacity: 0; transform: scale(2.5); } } @keyframes 'ripple' { 100% { opacity: 0; transform: scale(2.5); } } .blue.menu .menu-footer { background: #4a89dc; } .blue.menu .menu-header { background: #4a89dc; } .blue.menu ul li > a { background: #4a89dc; } .blue.menu ul ul.submenu li:hover > a { border-left-color: #3e82da; } .blue.menu > ul > li.active > a { background: #3e82da; } .blue.menu > ul > li:hover > a { background: #3e82da; } .blue.menu > ul > li > a { border-bottom-color: #3e82da; } .white.menu .menu-footer { background: #ffffff; color: #555555; } .white.menu .menu-header { background: #ffffff; color: #555555; } .white.menu ul li a { background: #ffffff; color: #555555; } .white.menu ul ul.submenu li:hover > a { border-left-color: #f0f0f0; } .white.menu ul ul.submenu li a { color: #f0f0f0; } .white.menu > ul > li.active > a { background: #f0f0f0; } .white.menu > ul > li:hover > a { background: #f0f0f0; } .white.menu > ul > li > a { border-bottom-color: #f0f0f0; } .white.menu > ul > li > a > .ink { background: rgba(0, 0, 0, 0.1); }
/* accordion menu plugin*/ ;(function($, window, document, undefined) { var pluginName = "accordion"; var defaults = { speed: 200, showDelay: 0, hideDelay: 0, singleOpen: true, clickEffect: true, indicator: 'submenu-indicator-minus', subMenu: 'submenu', event: 'click touchstart' // click, touchstart }; function Plugin(element, options) { this.element = element; this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } $.extend(Plugin.prototype, { init: function() { this.openSubmenu(); this.submenuIndicators(); if (defaults.clickEffect) { this.addClickEffect(); } }, openSubmenu: function() { $(this.element).children("ul").find("li").bind(defaults.event, function(e) { e.stopPropagation(); e.preventDefault(); var $subMenus = $(this).children("." + defaults.subMenu); var $allSubMenus = $(this).find("." + defaults.subMenu); if ($subMenus.length > 0) { if ($subMenus.css("display") == "none") { $subMenus.slideDown(defaults.speed).siblings("a").addClass(defaults.indicator); if (defaults.singleOpen) { $(this).siblings().find("." + defaults.subMenu).slideUp(defaults.speed) .end().find("a").removeClass(defaults.indicator); } return false; } else { $(this).find("." + defaults.subMenu).delay(defaults.hideDelay).slideUp(defaults.speed); } if ($allSubMenus.siblings("a").hasClass(defaults.indicator)) { $allSubMenus.siblings("a").removeClass(defaults.indicator); } } window.location.href = $(this).children("a").attr("href"); }); }, submenuIndicators: function() { if ($(this.element).find("." + defaults.subMenu).length > 0) { $(this.element).find("." + defaults.subMenu).siblings("a").append("<span class='submenu-indicator'>+</span>"); } }, addClickEffect: function() { var ink, d, x, y; $(this.element).find("a").bind("click touchstart", function(e) { $(".ink").remove(); if ($(this).children(".ink").length === 0) { $(this).prepend("<span class='ink'></span>"); } ink = $(this).find(".ink"); ink.removeClass("animate-ink"); if (!ink.height() && !ink.width()) { d = Math.max($(this).outerWidth(), $(this).outerHeight()); ink.css({ height: d, width: d }); } x = e.pageX - $(this).offset().left - ink.width() / 2; y = e.pageY - $(this).offset().top - ink.height() / 2; ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate-ink"); }); } }); $.fn[pluginName] = function(options) { this.each(function() { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); return this; }; })(jQuery, window, document); var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); jQuery(document).ready(function ($) { $("#menu").accordion(); $(".colors a").click(function () { if ($(this).attr("class") != "default") { $("#menu").removeClass(); $("#menu").addClass("menu").addClass($(this).attr("class")); } else { $("#menu").removeClass(); $("#menu").addClass("menu"); } }); });

Related: See More


Questions / Comments: