"Dropdown Menu UI"
Bootstrap 3.2.0 Snippet by maridlcrmn

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Iasmani Pinazo <span class="glyphicon glyphicon-user pull-right"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right"></span></a></li>
<li class="divider"></li>
<li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right"></span></a></li>
<li class="divider"></li>
<li><a href="#">Messages <span class="badge pull-right"> 42 </span></a></li>
<li class="divider"></li>
<li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right"></span></a></li>
<li class="divider"></li>
<li><a href="#">Sign Out <span class="glyphicon glyphicon-log-out pull-right"></span></a></li>
</ul>
</li>
</ul>
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 {
background:#f0f0f0;
}
.nav {
left:50%;
margin-left:-150px;
top:50px;
position:absolute;
}
.nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background:#fff;
}
.dropdown {
background:#fff;
border:1px solid #ccc;
border-radius:4px;
width:300px;
}
.dropdown-menu>li>a {
color:#428bca;
}
.dropdown ul.dropdown-menu {
border-radius:4px;
box-shadow:none;
margin-top:20px;
width:300px;
}
.dropdown ul.dropdown-menu:before {
content: "";
border-bottom: 10px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -10px;
right: 16px;
z-index: 10;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Pro
Navbar with Social icon & Dropdown
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu

Questions / Comments:

awesome Thanks for sharing!

yanosa (-1) - 5 years ago - Reply 0

Does work in preview

marciano () - 5 years ago - Reply 0

Really cool. Thanks for sharing!

Muhammad Arslan () - 7 years ago - Reply 0

Nice work!

skv1991 () - 9 years ago - Reply 0

nice dropdown design thumbs Up Mirchu Team

Mirchu () - 10 years ago - Reply 0

ul.dropdown-menu > li > a {
white-space: normal;
}

change the white-space value seems to fix the icon position in FF

Shaiful Latih () - 10 years ago - Reply 0

it's error or just in my browser ? http://prntscr.com/3ggcla

suryaadtmaja () - 10 years ago - Reply 0

first the icons and then the text.

see here LINK

Robin () - 10 years ago - Reply 0

Same as gazgaz78 here. Icons are not centered in FF.

Pablo Fullana () - 10 years ago - Reply 0

Icons are not center on text for the popin on my Firefox 28.

gazgaz78 () - 10 years ago - Reply 0

Really cool, I'll use this for my little social media experiment ^_^

Matthieu vdb () - 10 years ago - Reply 0

Thanks for your comment, I really appreciate it.

Maria Del Carmen Perez () - 10 years ago - Reply 0

I really like this, but you can limit the html by adding a few additional lines of CSS. I have created a forked example here: http://bootsnipp.com/mouse0... Check out the html and than look at the css at the bottom.

mouse0270 () - 10 years ago - Reply 0