CSS Pulldown Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

CSS Pulldown Menü

Scripte > Menü Navigation


Ein nicht so kompliziertes aufwendiges Pulldown Menü auf CSS. (UTF-8)

Das ist ein straff aber schön gehaltenes farbenfrohes vertikales Menü, das ohne Imagedateien auskommt.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "cs_pulldown-menu", das so übernommen werden kann. Zusätzlich befindet sich eine Datei (hover.htc) im Verzeichnis, damit die Auslösung der Untermenüs auch im Internet Explorer erfolgen.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Browser


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="cs_pulldown-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<div class="mainmenu">
<ul>
     <li class="li_nc"><a href="#x" target="_self" >Hauptmenü 1</a></li>
     <li class="li_hc"><a href="#" target="_self" >Hauptmenü 2</a><ul class="ul_ch">
        <li class="li_hc"><a href="#" target="_self" >Untermenü 2.1</a><ul class="ul_ch">
           <li class="li_hc"><a href="#"  >Untermenü 2.1.1</a><ul class="ul_ch">
              <li class="li_nc"><a href="#"  >Untermenü 2.1.1.1</a></li>
              <li class="li_nc"><a href="#"  >Untermenü 2.1.1.2</a></li>
              <li class="li_nc"><a href="#"  >Untermenü 2.1.1.3</a></li>
           </ul></li>
           <li class="li_nc"><a href="#"  >Untermenü 2.1.2</a></li>
        </ul></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 2.2</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 2.3</a></li>
     </ul></li>
     <li class="li_hc"><a href="#" target="_self" >Hauptmenü 3</a><ul class="ul_ch">
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.1</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.2</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.3</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.4</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.5</a></li>
     </ul></li>
     <li class="li_nc"><a href="#"  >Hauptmenü 4</a></li>
     <li class="li_nc"><a href="#"  >Hauptmenü 5</a></li>
     <li class="li_nc"><a href="#"  >Hauptmenü 6</a></li>
</ul>
</div>



Variante 2

Code für das HTML-Objekt:


<? include "cs_pulldown-menu/index.html"; ?>


Code der CSS-Datei (menu_style.css):


body {
behavior:url("hover.htc");
}

.mainmenu{
 width: 15em;
 padding: 0;
 float: left;
}

.mainmenu ul {
 float: left;
 width: 100%;
 list-style: none;
 line-height: 1;
 color:#FFFF00;
 background: #000080;

 padding: 0;
 border: solid #A0A0A4;
 border-width: 1px 1px;
 margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
 display: block;
 width: 100%;
font-family:Arial, Helvetica, sans-serif;font-size:1.0em;font-weight:bold;font-style:normal;text-decoration:underline;
 color: #FFFF00;
 text-decoration: none;
 padding: 1em 0em;
 text-indent:1em;
 margin: 0;

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
 width:100%;
 height:100%;
}
.mainmenu ul a{
  width: 100%;
}


.mainmenu li  {
 float: left;
 width:100%;
 margin:0;
 padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li  {width:100%;}

.mainmenu li ul {
 position: absolute;
 left: -999em;
 height: auto;
 width:15em;
 background: #000080;
 font-weight: normal;
 border-width: 1px;
 margin: 0;
}

.mainmenu li li {
 width: 100% ;
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
 width: 100%;
}

.mainmenu li ul  {
 margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
 margin: -2.1em 0 0 -0.3em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
 left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
 left: 100%;
}
.mainmenu li:hover>ul.ul_ch   
{
 left: 100%;
}

.mainmenu li:hover{
 background: #FF0000;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
 color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
 color:#FFFF00;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
 background: #B90000;
 z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
 color: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
 color: #FFFF00;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
 color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
 color: #FFFF00;
}


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 4 Online
 » 19 Heute
 » 998 Woche
 » 3785 Monat
 » 53013 Jahr
 » 299591 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü