Bootstrap Navbar’a Alt Menü Ekleme (Multi Level)

Bootstrap‘in mobil destekli menü sistemi Navbar varsayılan haliyle (3.0 versiyonu itibariyle) sadece tek bir alt menüyü desteklemekte. Bir dizinden fazla dallanan bir menünüz varsa Bootstrap’in Navbar yapısı sizin ihtiyacınızı karşılamayacaktır.

Bugün sizlere Bootstrap’in Navbar menü yapısına çoklu alt menü desteğinin nasıl ekleneceğini anlatacağız.

ÖRNEĞİ GÖRÜNTÜLE

---

Bootstrap Navbar’a çoklu alt menü nasıl eklenir?

Birlikte basit bir menü örneği oluşturalım. Aşağıdaki kod bütünü klasik bir Bootstrap Navbar‘ın alt menü ile işlenmiş halidir.

---

HTML Kodları

<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <a class="navbar-brand" href="#">Adobewordpress.com</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Navbar Level <b class="caret"></b></a>
          <ul class="dropdown-menu multi-level">
            <li class="dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Alt Menü #1</a>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Alt Menü #2</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-submenu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Alt Menü #3</a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Alt Menü #</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

Sırada CSS kodlarımız var. Alt menülerimizi görünür kılacağız.

---

CSS Kodları

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Böylece menünün seviyeler halinde kırılmasını sağlamış oluyoruz.