6. Januar 2011
Webdesign
Keine Kommentare

Einfache Dropdown-Navigation mit CSS und JavaScript

Ein typisches Aufklappmenü, umgesetzt mit reinem CSS. Internet Explorer bis Version 7 benötigt etwas Hilfe per JavaScript. Dazu habe ich die jQuery- Bibliothek eingesetzt (was zwar etwas übertrieben erscheint, ich jedoch meistens sowieso auf der Website einsetze).
Getestet mit IE 6-8, Firefox 3x und Google Chrome auf PC.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">

#nav, #nav ul {
  font-family:sans-serif;
  list-style:none;
  padding:0;
  margin:0;
}

#nav a {
  display:block;
  color:#000;
  text-decoration:none;
  padding:.5em;	
}

#nav li {
  float:left;
  background-color:#ddd;
}

#nav li ul {
  position:absolute;
  width:auto;
  left:-999em;
  padding:0;
}

#nav li ul li {
  clear:both;
}

#nav li:hover {
  background-color:#eee;
}

/* no support IE 6,7 see JavaScript */
#nav li:hover ul,  
#nav li.iehover ul {
  left:auto;
}

</style>
</head>
<body>

<ul id="nav">
  <li><a href="#">Parent 1</a></li>
  <li><a href="#">Parent 2</a>
    <ul>
      <li><a href="#">Child 2.1</a></li>
      <li><a href="#">Child 2.2</a></li>
      <li><a href="#">Child 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent 3</a>
    <ul>
      <li><a href="#">Child 3.1</a></li>
      <li><a href="#">Child 3.2</a></li>
      <li><a href="#">Child 3.3</a></li>
      <li><a href="#">Child 3.4</a></li>
    </ul>			
  </li>
  <li><a href="#">Parent 4</a></li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Single-level Dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/ -->
<!--[if lte IE 7]>
<script>
$(function() {
  $("#nav li").hover(
    function() { $(this).addClass("iehover"); },
    function() { $(this).removeClass("iehover"); }
  );
});
</script>
<![endif]-->

</body>
</html>

Quelle und ausführliche Beschreibung: http://htmldog.com/articles/suckerfish/dropdowns/