"plus and minus image menu toggle"
Bootstrap 3.3.0 Snippet by iammahesh

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
<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="container">
<nav>
<div class="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="nav_bg">
<div class="nav_bar"><!-- <span></span> <span></span> <span></span> -->
<span class="expand ">
<span class="plus">
<a href="#">
<img src="http://iammahesh.in/images/new/plus.png"/ width="20" alt="plus">
</a>
</span>
<span class="minus">
<a href="#">
<img src="http://iammahesh.in/images/new/minus.png" width="20"/ alt="minus">
</a>
</span>
</span>
</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
/* Index 2 */
.navigation {
display: block;
margin: 20px 0;
background: #009788;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 3px;
}
.navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
.navigation li {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
font-size: 17px;
color: #def1f0;
}
.navigation li a {
padding: 10px 15px;
font-size: 17px;
color: #def1f0;
display: inline-block;
outline: 0;
font-weight: 400;
}
.navigation li:hover ul.dropdown { display: block; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function() {
$('.nav_bar').click(function(){
$('.navigation').toggleClass('visible');
$('body').toggleClass('opacity');
});
$('.plus a img').on('click', function () {
console.log('plus clicked');
$('.first-tab-at services-top services-top-toggle').toggle();
$('.plus').hide();
$('.minus').show();
});
$('.minus a img').on('click', function () {
console.log('minus clicked');
$('.first-tab-at services-top services-top-toggle').toggle();
$('.minus').hide();
$('.plus').show();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: