StartseiteSkripteJavascript

Dropdown Menü mit jQuery

29. DEZEMBER 2011
von Jörg
Skripte - Javascript
fancybox icon

Hier stelle ich ein einfaches Dropdown-Menü vor, welches mit Unterstützung von Javascript einen Rolleffekt hat.
Wenn im Browser Javascript deaktiviert ist lässt sich das Untermenü dennoch öffnen.

Demoseite

Folgender Quellcode in der html Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Drop Down Menü mit jQuery slideDown slideUp</title> 
    <script type="text/javascript" src="jquery-1.7.min.js"></script>
    <script type="text/javascript" src="dropmenu.js"></script>
 
<style type="text/css">
<!--
    * {
      margin: 0;
      padding: 0;
      font-size: 13px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    body {
      background: url(linen_bg.png) repeat;
    }
    div#bg {
      background: url(bkg_gradient.png) no-repeat; 
      background-size: cover;
      overflow: hidden;
      position: absolute;
      top:-600px;
      left:-600px;
      right:0;
      bottom:0;
    }
    
    ul#menu a {
      color: white;
      text-decoration: none;
    }

    ul#menu {
      margin: 0;
      padding: 0;
      list-style: none;
      width: 100%;
      background-color: green;
      display: block;   
    }
    ul#menu li {
      float: left;
      position: relative;
      display: block;
      border-right: 1px dashed #353535;
      background-color: #2D2D2D;
      background: url(bgmenu.jpg) repeat-x top;
    }
    ul#menu li a {
      padding: 4px 20px 5px 20px;      
      display: block;
    }
   
    ul#menu li ul {
      list-style: none;
      position: absolute;
      left: 0;
      top: 25px;
      display: none;
    }
    ul#menu li ul li {
      float: none;
      margin:0;
    }
    ul#menu li ul li a {
      padding: 4px 18px 5px 18px;
      border-top: 1px solid black;      
    }
    
    ul#menu li a:hover{
      background-color: #606060;
      background: url(bgmenu_hov.jpg) repeat-x top;
    }
    
    #bgmenu {
      width: 100%;
      height: 25px;
      margin: 30px 0 0 0;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      background: url(bgmenu.jpg) repeat-x;
    } 
    -->
    </style>
    
  <noscript>
    <style type="text/css">
    <!--   
      ul#menu li>ul {
        display: none;
      }
      ul#menu li:hover>ul {
        display: block;
      }
    -->
    </style>  
  </noscript>
  
  </head>                                                                     
  <body>
  <div id="bg"> </div>
    <div id="bgmenu"> 
      <ul id="menu">
        <li><a href="">menu1</a>
          <ul>
            <li><a href="">menu1.1</a></li>
            <li><a href="">menu1.2</a></li>
            <li><a href="">menu1.3</a></li>
            <li><a href="">menu1.4</a></li>
            <li><a href="">menu1.5</a></li>
            <li><a href="">menu1.6</a></li>
          </ul>
        </li>
        <li><a href="">menu2</a>
          <ul>
            <li><a href="">menu2.1</a></li>
            <li><a href="">menu2.2</a></li>
            <li><a href="">menu2.3</a></li>
            <li><a href="">menu2.4</a></li> 
            <li><a href="">menu2.5</a></li>
            <li><a href="">menu2.6</a></li>
          </ul>
        </li>  
        <li><a href="">menu3</a>
          <ul>
            <li><a href="">menu3.1</a></li>
            <li><a href="">menu3.2</a></li>
          </ul>
        </li>
        <li><a href="">menu4</a>
          <ul>
            <li><a href="">menu4.1</a></li>
            <li><a href="">menu4.2</a></li>
          </ul>
        </li>
        <li><a href="">menu5</a></li>
      </ul>
    </div>    
  </body>
</html>
Hier gehts zur Demoseite

Kommentare:

Sehr schick
Danke fürs Teilen :)

von Benny Klotz am 10. MAI 2012 um 18:49 Uhr » http://www.benny-design.eu

Hinterlasse einen Kommentar

Ein Frosch der sich an der Seite festhält

Hallo Besucher,

ich würde mich sehr freuen
wenn du einen Kommentar

hinterlässt!

Gruß Jörg