Bootstrap mehrfach Navbar

Einige Zeit habe ich über der Usability einer Web Anwendung gegrübelt. Aktuell verwenden wir das Projekt um Realtime Feedback, vor während und nach Konferenz Sessions, zu bekommen. Die Idee ist einen lernen-wissen-teilen Zyklus weit über die eigentliche Konferenz hinaus zu etablieren.

Nächste Woche auf der GUI&DESIGN in Berlin, wird das Projekt wieder eingesetzt. Da wir unter anderem mobile Devices mit dieser Web App adressieren, folgt das UX dem responsive Design Paradigma. Framework ist Bootstrap.

Jede Konferenz Session kann einzeln von Teilnehmer  mit bis 5 Sternen bewertet oder mit Text Kommentaren versehen werden. Das Problem ist der begrenzte Bildschirm. Wie präsentiert man bis zu 30 Sessions gleichzeitig auf einem Smartphone? Nach einem Pair UX Review mit Martin Hoppe von Maximago, kam der Gedanke auf, das von der Bedienung wie eine Bootstrap Navar zu lösen.

Damit waren folgenden Anforderungen definiert

  • Mehrstufige Navbar
  • Navbar Toogle Button dauerhaft anzeigen
  • Menüpunkte nur bei Drop Down
  • Menü schließen bei Auswahl
  • mehrspaltiger Navbar Collapse Bereich

Da fertige UI auf einem iPhone Emulator

image

Und der nicht ganz perfekte multi drop down Navbar Anwendungsfall

image

Die Steuerung des AufZu einer Navbar, wird über ein UI Element mit dem Attribut data-toggle ausgelöst. Das Ziel ist eine Klasse oder ID eines DIV Elements, hier als collapse2 bezeichnet um einen Unterschied zu navbar-collapse des Top Menüs zu haben. Der Z Index  ermöglicht der Top Navbar sich über die zweite Reihe Navbar zu entfalten. Der Abstand top entspricht der Höhe der Top Navbar.

   1: <nav class="navbar navbar-inverse navbar-fixed-top always-open" 
style="top: 50px;z-index:999;">
   2:    <div class="navbar-header">
   3:      <a class="navbar-brand" href="#">Room {{target}}</a>
   4:        <button type="button" class="navbar-toggle"
   5:           data-toggle="collapse" data-target=".navbar-collapse2">
   6:           <span class="icon-bar"></span>
   7:           <span class="icon-bar"></span>
   8:           <span class="icon-bar"></span>
   9:       </button>
  10:     </div>
  11:              
  12:  <div class=" navbar-collapse2 collapse" >

Die ASPX Seite setzt sich aus einer Masterpage und einer Content Page zusammen. In der Content Page (gern auch View) wird das CSS  von Bootstrap in einem Style Block überschrieben und ergänzt. Ziel ist es das Verhalten der Second Navbar zu ändern (always-open). Diese ist dann nicht mehr Responsive, sondern verhält sich so wie eine Navbar im Smart Device Modus.

   1:  .navbar {
   2:     margin-bottom: 0 !important;
   3:          }
   4:  .navbar.always-open {
   5:     border-radius: 0;
   6:           }
   7:  .navbar.always-open .navbar-header {
   8:     float: none;
   9:           }
  10:  .navbar.always-open .navbar-toggle {
  11:     display: block;
  12:           }
  13:  .navbar.always-open .navbar-collapse {
  14:     border-top: 1px solid transparent;
  15:     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  16:            }
  17:  .navbar.always-open .navbar-collapse.collapse {
  18:     display: none !important;
  19:            }
  20:  .navbar.always-open .navbar-nav {
  21:     float: none !important;
  22:     margin: 7.5px -15px;
  23:             }
  24:  .navbar.always-open .navbar-nav > li {
  25:             float: none;
  26:             }
  27:  .navbar.always-open .navbar-nav > li > a {
  28:     padding-top: 10px;
  29:     padding-bottom: 10px;
  30:             }
  31:  .navbar-collapse2 {
  32:     padding-right: 15px;
  33:     padding-left: 15px;
  34:     overflow-x: visible;
  35:     -webkit-overflow-scrolling: touch;
  36:     border-top: 1px solid transparent;
  37:     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  38:     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  39:           }
  40:   
  41:  body {
  42:     padding-top: 100px !important;
  43:          }

 

Die beiden Attribute Data-Toggle und data-target werden dann in den einzelnen Listen Einträgen verwendet, um die Navbar nach Selektion auch wieder einzuklappen. Die Navbar Collapse Liste setzt sich dabei in der Regel aus UL und LI Elementen zusammen. Die LI Element werden einfach in der Breite geschrumpft. Für drei  spaltig auf einen Wert <33% und auf block formatiert.

   1:  <li  title="<%#Item.roomname%>" style=" width:32.6%; display: inline-block">
   2:  <a href='/chat#<%#HttpUtility.UrlEncode(Item.shortname)%>'
   3:  data-toggle="collapse" data-target=".navbar-collapse2"

 

und so sieht der normale Browser Benutzer die Web App

image

Viel Freude damit.

Kommentare sind geschlossen