Simple dropdown menu with Bootstrap | 2my4edge

26 December 2014

Simple dropdown menu with Bootstrap

Now a days bootstrap makes all designing works simple, bootstrap is html, css and javascript framework. this makes everything simple, like that here we are going to see simple dropdown menu with the help of Bootsrap. let see the simple code for dropdown menu in css jquery with Bootstrap.

simple-drop-dowm-menu-with-bootstap
DOWNLOAD                              LIVE DEMO

We knew that, we must have to add bootstrap files and jquery file to run bootstrap simple dropdown menu.

Past Bootstrap posts :


BOOTSTRAP and JQUERY
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

HTML CODE
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Arunkumar Maha<span class="glyphicon glyphicon-user pull-right"></span></a>
    <ul class="dropdown-menu">
      <li>
        <a href="#acc">Account Settings <span class="glyphicon glyphicon-cog pull-right"></span></a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#fav">Favourites<span class="glyphicon glyphicon-heart pull-right"></span></a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#status">Status <span class="glyphicon glyphicon-stats pull-right"></span></a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#logout">Logout<span class="glyphicon glyphicon-log-out pull-right"></span></a>
      </li>
    </ul>
  </li>
</ul>
The highlighted line is for make dropdown menu in Bootstrap, and the css is below down.

CSS
<style type="text/css">
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;
}
.dropdown ul.dropdown-menu:after {
    content: "";
    border-bottom: 12px solid #ccc;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    position: absolute;
    top: -12px;
    right: 14px;
    z-index: 10;
}
</style>

Thank you, i hope you really like this post, keep visiting us, we will post more things about web designing and development in upcoming posts.





RELATED POSTS :










1 comment:

  1. Thanks for a wonderful codes...Please if you could go further about how to add the LOGOUT code for the dropdown Options

    ReplyDelete

^