ebsoftmedia.com

Content

Simple Dropdown Menu dengan Bootstrap

Dalam pembuatan Menu Dropdown dengan Bootstrap sangatlah mudah, Bootstrap sudah menyediakan icon menu, dan fungsi untuk membuat menu dropdown, Tutorial ini kita akan membuat contoh simple membuat menu dengan menggunakan framework bootstrap.

Komponen HTML untuk membuat menu kita menggunakan list yang terdiri dari tag <ul> dan selanjutnya <li> , Sementara itu dalam class bootstrap kita menggunakan class nav, dan menggunakan class dropdown .

Untuk tutorial ini kita harus terkoneksi dengan internet, agar script kita jalan dengan baik, sementara itu, jika kita tidak ingin menggunakan koneksi internet download terlebih dahulu komponen Bootstrap dan Jquery nya

membuat menu dropdown dengan bootstrap

 

BOOTSTRAP & JQUERY

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

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>

HTML

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ebsoftmedia<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>

 

Artikel Terkait

title
»

Membuat Responsive Back to Top dengan Bootstrap

Tutorial Boostrap Kali ini kita akan Membuat Back To Top dengan Bootstras di webiste yang...