<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");
}
});
});
