Doku Designer Top Navigation

Top-Navigation

---

Inhaltsverzeichnis

• Top-Navigation
  • Schritt 1 - Grundgerüst
  • Schritt 2 - Stylen
  • Schritt 3 - Admincenter
• Top-Navigation für Mobile-Navigation hinzufügen
  • Schritt 1 - Grundgerüst
  • Schritt 2 - Stylen

---

Um eine Navigation mit Dropdown-Funktion zu erstellen, ist Folgendes zu tun:

Schritt 1 - Grundgerüst

Folgenden Code in die application/layouts/clan3columns/index.php hinzufügen. Dadurch, das man die bootstrap.min.css nicht ändern soll (kann zu Problemen führen), wurden für diese TODO die Klasse "NeueKlasse" und "NeueUlKlasse" mit eingebaut, natürlich können diese Klassen umbenannt werden.

<div class="container hidden-xs">
 <div class="navbar navbar-inverse NeueKlasse">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">Clanname</a>
   </div>
   <ul class="list-unstyled ilch-ilch_menu_ul icon nav navbar-nav">
    <?php 
     echo $this->getMenu(3,' <li class="dropdown list-unstyled">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">%s<span class="caret"></span></a>
       <ul class="dropdown-menu list-unstyled ilch-ilch_menu_ul NeueUlKlasse">
         <li>%c</li>
       </ul>
     </li>');?>
    </ul>
   </div>
 </div>
</div>

Die Klasse "navbar-inverse" erzeugt einen dunkleren Hintergrund, für einen helleren ersetzt man diese Klasse mit der Klasse "navbar-default".

Schritt 2 - Stylen

Die Klasse für die Dropdown-Ansicht, wurde schon für die Mobile-Ansicht in der application/layouts/clan3columns/style.css bearbeitet. Damit jedoch die Dropdown-Ansicht passend zur Navigation ist, füge diesen Code in application/layouts/clan3columns/style.css ein:

.NeueKlasse {
         margin-bottom:0px;
         border:0px;
}
.NeueUlKlasse {
    background:#fff !important;
}
.NeueUlKlasse>li>ul>li {
    padding: 5px 15px !important;
}
.NeueUlKlasse>li>ul>li:hover {
    background:#f5f5f5;
}
.NeueUlKlasse>li>ul>li>a {
    color:#1b1b1b;
}
.NeueUlKlasse>li>ul>li>a:hover {
    text-decoration:none;
}

Schritt 3 - Admincenter

In diesem ToDo wird die Navigation über das Menü3 ausgegeben, daher fügt man unter Menü durch klicken des + Symbol ein neues Menü hinzu (Menü3). Nun kann man in diesem Menü, Menüs mit Modulen erstellen (keine Boxen). Jetzt haben wir eine Navigation mit Dropdown-Funktion.

Top-Navigation in der Mobile-Navigation hinzufügen

Schritt 1 - Grundgerüst

Folgenden Code in die application/layouts/clan3columns/index.php nach der Zeile 25 hinzufügen:

<div class="panel panel-gaming">
 <div class="panel-body">
  <ul class="list-unstyled ilch-ilch_menu_ul icon nav navbar-nav">
   <?php 
    echo $this->getMenu(3,'  <li class="dropdown list-unstyled">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">%s <span class="caret"></span></a>
     <ul class="dropdown-menu list-unstyled ilch-ilch_menu_ul NeueUlKlasse">
      <li>%c</li>
     </ul>
   </li>');?>
  </ul>
 </div>
</div>

Schritt 2 - Stylen

Folgenden Code in die application/layouts/clan3columns/style.css hinzufügen. Dies ist notwendig um einen Bug zu vermeiden.

@media (max-width:768px) {
   .nav .open > a, .nav .open > a:focus, .nav .open > a:hover,.navbar-gaming .panel-body>ul>.dropdown>a:hover {
    background-color:#f5f5f5 !important;
    color: #32333B !important;
    }

}

Somit wurde die Top-Navigation für Mobile-Endgeräte optimiert.