"collapse menu"
Bootstrap 3.3.0 Snippet by ravi7284007

Post to Facebook Tweet this

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
<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 ---------->
<link href="http://fonts.googleapis.com/css?family=Arimo:400" rel="stylesheet">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="container">
<div class="row">
<h2 class="text-center">Collapsible Menu</h2>
</div>
</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
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.bars {
display: block;
width: 20px;
height: 3px;
background-color: #333;
box-shadow: 0 5px 0 #333, 0 10px 0 #333;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Pro
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments:

nice job. Its simple, it works in all browsers, very easy to modify. NICE JOB!!

devans () - 6 years ago - Reply 0

Hi there,

i'm implementing your code in a project, but my skill with bootstrap is verry low.
Perhaps could you help me ?

I have to trigger the #menu element to open and close the menu from different place in the project.

I tought i could use jquery like this :

$("#menu").hide();

It works, but then the click on the #menu element doesn't works anymore.

To make it work again, i should fire this before:

$("#menu").show();

In the same way, if i do not fire the jquery event, and click first on the #menu element, the menu appears.
Then, if i try to hide it with jquery, that doesn't work.
I have to first close it by clicking the #menu element and then open it with jquery. And after that, i can close it with jquery.

Is there a way to control the #menu in javascript without disabling its bootstrap behaviour ?

ChÉ·t qui rÉ·â„“É› () - 8 years ago - Reply 0