Bootstrap Snippet Accordian using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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") {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Accordian"
Bootstrap 3.3.0 Snippet by ashum499

Related: See More

Questions / Comments:

"Accordian" Bootstrap 3.3.0 Snippet by ashum499

Related: See More

Questions / Comments:

"Accordian"
Bootstrap 3.3.0 Snippet by ashum499