Mobile Navigation

Für mobile Geräte wird oft ein aufklappbares Menü verwendet das mit dem sogenannten “Hamburger” (≡ die drei Balken erinnern daran) als Erkennung versehen ist. Praktisch ist, wenn das über den “Hamburger” aufgeklappte Menü wieder geschlossen werden kann. Da im css das hover bei Touchscreens nicht nutzbar ist wird das mit JavaScript umgesetzt. Der responsive Ansatz ist in meinem Beispiel berücksichtigt.
Als Hilfsbibliothek wird jQuery verwendet.

So sieht das HTML aus:


<!doctype html>
<html>
  <head>
    <!-- auf mobilen Geräten die volle Größe ausfüllen-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery_1_12_2.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <!-- folgendes css wird per JavaScript bestimmt -->
    <link id="select-style" rel="stylesheet" type="text/css" href="css/desktop.css" />
  </head>
  <body>
    
    <div id="header">
      <h1>Test für eine mobile Navigation mit "Hamburger" Button</h1>
      <div id="navigation">
        <div id="menu-hamburger" class="hidden">
          <a href="#" class="create-hamburger" onclick="toggle_menu()"></a>
        </div>
        <div id="menu-container" class="hidden">
          <ul id="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Versuch, das Flackern beim neu Laden der Seite zu verhindern-->
    <script type="text/javascript">
      $("#menu-container").addClass("hidden");
    </script>
    <div id="content">
      ...
    </div>
    
    <div id="footer">
      <div id="js-debug"></div>
    </div>
    
  </body>
</html>

Die JavaScript Funktionen laden je nach Browserbreite das entsprechende css Stylesheet. Das lässt sich ohne Javascript auch mit css Media Queries lösen.
Ist bei schmalem Bildschirm die mobile Navigation eingeblendet klappt die Funktion toggle_menu() die Menüpunkte auf oder zu.


//jQuery muss eingebunden sein
function adjust_style(width, height) {
  width = parseInt(width);
  height = parseInt(height);
  if (width < 601) {
    $("#select-style").attr("href", "css/mobile.css");
  } else {
     $("#select-style").attr("href", "css/desktop.css"); 
  }
  //nach dem Laden des passenden Stylesheets die Elemente wieder einblenden (wird für eins der beiden überschrieben)
  $("#menu-hamburger").removeClass("hidden");
  $("#menu-container").removeClass("hidden");
}
//wird ausgeführt nach laden des Dokuments
$(function() {
  adjust_style($(this).width(), $(this).height());
  $(window).resize(function() {
    adjust_style($(this).width(), $(this).height());
  });
});

function toggle_menu()
{
  if($("#menu-hamburger").hasClass("expanded")){
    //wird nur der Text / html gesetzt, dann sind die 
    //Klassen create-close und create-hamburger überflüssig
    //$('#menu-hamburger a').html("≡");
    $('#menu-hamburger a').removeClass("create-close");
    $('#menu-hamburger a').addClass("create-hamburger");
    $("#menu-hamburger").removeClass("expanded");
    $("#menu-container").removeClass("expanded");
    $("#navigation").removeClass("expanded");
  }else{
    //$('#menu-hamburger a').text("x");
    $('#menu-hamburger a').removeClass("create-hamburger");
    $('#menu-hamburger a').addClass("create-close");
    $("#menu-hamburger").addClass("expanded");
    $("#menu-container").addClass("expanded");
    $("#navigation").addClass("expanded");
  }
}

Basisformatierung:


* {
  margin: 0; 
  padding: 0;
}
body {
  background-color:#FFFFFF;
  font-size: 1em;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}
h1 { 
  font-size: 1.2em; 
  padding: 2px 0 5px 2px;
}
a { 
  text-decoration: none;
  color: #272727;
}
a:hover { color: #555555; }
li { list-style: none; }
#header {
  margin-top: 1em;
}
#navigation {
  background-color:#EEEEEE;
  height: 30px;
}
#content {
  padding: 1em;
  background-color: #DDDDDD;
  min-height: 300px;
}
#footer {
  background-color:#CCCCCC;
  padding: 1em;
}
.hidden { display: none; }

Bei breiten Bildschirmen wird ein horizontales Menü verwendet


/* Navigation für Desktop bzw Bildschirme breiter 600px */
#menu-hamburger {
  display: none;
}
#menu-container {
  background: #999999;
}
ul#menu li  {
  display: inline-block;
  width: 8em;
}
ul#menu li a {
  background: #888888;
  display: block;
  padding: 5px 0;
  color: #FFFFFF;
  font-weight: bold;
  border-right: 5px solid #999999;
  text-align: center;
  width: 100%;
}
ul#menu li a:hover {
  background: #777777;
}

Formatierungen für die mobile Navigation
Öffnen / Schliessen Button formatieren


#menu-container {
  visibility: hidden;
}
#menu-container.expanded {
  visibility: visible;
}
#navigation.expanded {
  height: auto;
}
ul#menu {
  background:#BBBBBB;
}
ul#menu a {
  display:block;
  padding: 0.5rem 0 0.5rem 1rem;
  color:#FFFFFF;
  border: 1px solid #CCCCCC;
}
ul#menu a:hover {
  background:#AAAAAA;
}
#menu-hamburger {
/*  display: block;*/
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  background-color: #BBBBBB;
  border-radius:4px;
  position:relative;
}
#menu-hamburger a {
  display: block;
  font-size: 2em;
  line-height: 0.6;
  height: 30px;
  font-weight: bold;
}
#menu-hamburger a:hover {
  background-color: #AAAAAA;
  border-radius:4px;
}
/* wenn im JavaScript nur der Text gesetzt wird sind folgende Anweisungen überflüssig */
#menu-hamburger .create-hamburger:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 20px;
  height: 4px;
  background: #111111;
  border-radius: 1px;
  box-shadow: 1px 1px 1px 0 #444444, 
              0 8px 0 0 #111111, 1px 9px 1px 0 #444444,
              0 16px 0 0 #111111, 1px 17px 1px 0 #444444;
}
#menu-hamburger .create-close:before, #menu-hamburger .create-close:after{
  content: '';
  position: absolute;
  width: 26px;
  height: 4px;
  background-color: #111111;
  border-radius: 1px;
  top: 13px;
  box-shadow: 0 0 2px 0 #444444;
}
#menu-hamburger .create-close:before{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 2px;
}
#menu-hamburger .create-close:after{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 2px;
}

Und das ganze im Beispiel