Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

CSS3 Dropdownmenü
Kategorie: CSS
PHP-Fusion Version: Keine
Quelle: www.red-team-design.com
Schwierigkeitsgrad:
 
Ein schickes Multilevel Dropdownmenü das allein mit CSS arbeitet

Faq

HTML-Code
Code
<ul id="menu">
   <li><a href="http://www.php-fusion.at/">Home</a></li>
   <li>
      <a href="#">Categories</a>
      <ul>
         <li>
            <a href="#">CSS</a>
            <ul>
               <li><a href="#">Item 11</a></li>
               <li><a href="#">Item 12</a></li>
               <li><a href="#">Item 13</a></li>
               <li><a href="#">Item 14</a></li>
            </ul>            
         </li>
         <li>
            <a href="#">Graphic design</a>
            <ul>
               <li><a href="#">Item 21</a></li>
               <li><a href="#">Item 22</a></li>
               <li><a href="#">Item 23</a></li>
               <li><a href="#">Item 24</a></li>
            </ul>            
         </li>
         <li>
            <a href="#">Development tools</a>
            <ul>
               <li><a href="#">Item 31</a></li>
               <li><a href="#">Item 32</a></li>
               <li><a href="#">Item 33</a></li>
               <li><a href="#">Item 34</a></li>
            </ul>            
         </li>
         <li>
            <a href="#">Web design</a>            
            <ul>
               <li><a href="#">Item 41</a></li>
               <li><a href="#">Item 42</a></li>
               <li><a href="#">Item 43</a></li>
               <li><a href="#">Item 44</a></li>
            </ul>   
         </li>
      </ul>
   </li>
   <li>
      <a href="#">Work</a>
      <ul>
         <li>
            <a href="#">Work 1</a>
            <ul>
               <li>
                  <a href="#">Work 11</a>      
                  <ul>
                     <li>
                        <a href="#">Work 111</a>                  
                     </li>
                     <li>
                        <a href="#">Work 112</a>
                     </li>
                     <li>
                        <a href="#">Work 113</a>
                     </li>
                  </ul>                     
               </li>
               <li>
                  <a href="#">Work 12</a>
                  <ul>
                     <li>
                        <a href="#">Work 121</a>                  
                     </li>
                     <li>
                        <a href="#">Work 122</a>
                     </li>
                     <li>
                        <a href="#">Work 123</a>
                     </li>
                  </ul>                     
               </li>
               <li>
                  <a href="#">Work 13</a>
                  <ul>
                     <li>
                        <a href="#">Work 131</a>                  
                     </li>
                     <li>
                        <a href="#">Work 132</a>
                     </li>
                     <li>
                        <a href="#">Work 133</a>
                     </li>
                  </ul>                     
               </li>
            </ul>               
         </li>
         <li>
            <a href="#">Work 2</a>
            <ul>
               <li>
                  <a href="#">Work 21</a>
                  <ul>
                     <li>
                        <a href="#">Work 211</a>                  
                     </li>
                     <li>
                        <a href="#">Work 212</a>
                     </li>
                     <li>
                        <a href="#">Work 213</a>
                     </li>
                  </ul>                     
               </li>
               <li>
                  <a href="#">Work 22</a>
                  <ul>
                     <li>
                        <a href="#">Work 221</a>                  
                     </li>
                     <li>
                        <a href="#">Work 222</a>
                     </li>
                     <li>
                        <a href="#">Work 223</a>
                     </li>
                  </ul>                     
               </li>
               <li>
                  <a href="#">Work 23</a>
                  <ul>
                     <li>
                        <a href="#">Work 231</a>                  
                     </li>
                     <li>
                        <a href="#">Work 232</a>
                     </li>
                     <li>
                        <a href="#">Work 233</a>
                     </li>
                  </ul>                     
               </li>
            </ul>               
         </li>
         <li>
            <a href="#">Work 3</a>
            <ul>
               <li>
                  <a href="#">Work 31</a>
                  <ul>
                     <li>
                        <a href="#">Work 311</a>                  
                     </li>
                     <li>
                        <a href="#">Work 312</a>
                     </li>
                     <li>
                        <a href="#">Work 313</a>
                     </li>
                  </ul>                     
               </li>
               <li>
                  <a href="#">Work 32</a>
                  <ul>
                     <li>
                        <a href="#">Work 321</a>                  
                     </li>
                     <li>
                        <a href="#">Work 322</a>
                     </li>
                     <li>
                        <a href="#">Work 323</a>
                     </li>
                  </ul>                     
               </li>
               <li>
                  <a href="#">Work 33</a>
                  <ul>
                     <li>
                        <a href="#">Work 331</a>                  
                     </li>
                     <li>
                        <a href="#">Work 332</a>
                     </li>
                     <li>
                        <a href="#">Work 333</a>
                     </li>
                  </ul>                     
               </li>
            </ul>               
         </li>
      </ul>      
   </li>
   <li>
      <a href="#">About</a>   
   </li>
   <li>
      <a href="#">Contact</a>   
   </li>
</ul>

CSS
Code
#menu
{
   width: 100%;
   margin: 0;
   padding: 10px 0 0 0;
   list-style: none; 
   background: #111;
   background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));   
   background: -webkit-linear-gradient(#444, #111);   
   background: -o-linear-gradient(#444, #111);
   background: -ms-linear-gradient(#444, #111);
   background: linear-gradient(#444, #111);
   -moz-border-radius: 50px;
   border-radius: 50px;
   -moz-box-shadow: 0 2px 1px #9c9c9c;
   -webkit-box-shadow: 0 2px 1px #9c9c9c;
   box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
   float: left;
   padding: 0 0 10px 0;
   position: relative;
   line-height: 0;
}

#menu a
{
   float: left;
   height: 25px;
   padding: 0 25px;
   color: #999;
   text-transform: uppercase;
   font: bold 12px/25px Arial, Helvetica;
   text-decoration: none;
   text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
   color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
   color: #fafafa;
}

#menu li:hover > ul
{
   display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;   
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;   
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);   
    background: -o-linear-gradient(#444, #111);   
    background: -ms-linear-gradient(#444, #111);   
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);   
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;   
}

#menu ul a
{   
    padding: 10px;
   height: 10px;
   width: 130px;
   height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
   text-transform: none;
}

*html #menu ul a /* IE6 */
{   
   height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{   
   height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
   background: -moz-linear-gradient(#04acec,  #0186ba);   
   background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
   background: -webkit-linear-gradient(#04acec,  #0186ba);
   background: -o-linear-gradient(#04acec,  #0186ba);
   background: -ms-linear-gradient(#04acec,  #0186ba);
   background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;   
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec;
    border-bottom-color: transparent;    
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after
{
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */


Das Dropdownmenü kommt ohne Javascript aus, jedoch ist beim IE6 zur korrekten funktion ein kleines Script notwendig, binden Sie daher bitte in den Headbereich Ihrer Webseite folgendes ein:
Code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
   $(function() {
     if ($.browser.msie && $.browser.version.substr(0,1)<7)
     {
      $('li').has('ul').mouseover(function(){
         $(this).children('ul').show();
         }).mouseout(function(){
         $(this).children('ul').hide();
         })
     }
   });       
</script>


Demo ansehen

Demo


Tutorial Verlinken

URL: 
BBCode: 
HTML-Code: 
Kommentare
Es wurden noch keine Kommentare verfasst.
Kommentar schreiben
Bitte logge dich ein, um einen Kommentar zu verfassen.
Anzeige


Anmelden


Registrieren Passwort vergessen

RSS Feeds

Feeds abonieren

Letzte News
Letzte Threads
Anzeige

© Copyright 2018 PHP-Fusion.at | Alle Rechte vorbehalten.

© 2016 Real Space. All rights reserved | Design by W3layouts | 10,330,763 eindeutige Besuche
Powered by PHP-Fusion copyright © 2002 - 2018 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.