Halli-hallo liebe HPBK User,
mir ist bei Ansehen des Coolmenü-Threads aufgefallen, das sich die hier vorgestelte Cool-Menü Variante sich bewegt, zwar gibt es Hilfen, doch die meisten Anfänger stecken da den Kopf in den Sand. Da ich seit längerm nur auf CSS basierende Designs nutze und viele noch Iceblue nutzen, wollte ich meine Variante auf zB Iceblue übertragen. Also hier ist meine Lösung:
/*Hier erstellen wir ein neues Feld namens "V_Nav", hier legt ihr auch die Namen der Links fest und gebt die URL dieser ein, die Oberkategorien brauchen nicht zwingend einen Link, aber das ist ja euch überlassen^*/
<div id="V_Nav">
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="" target="_self" >Menü1</a>
<ul>
<li><a href="" target="_self">Untermenü1</a></li>
<li><a href="" target="_self">Untermenü2</a></li>
<li><a href="" target="_self">Untermenü3</a></li>
<li><a href="" target="_self">Untermenü4</a></li>
</ul>
<li><a href="" target="_self" >Menü2</a>
<ul>
<li><a href="" target="_self">Untermenü1</a></li>
<li><a href="" target="_self">Untermenü2</a></li>
<li><a href="" target="_self">Untermenü3</a></li>
<li><a href="" target="_self">Untermenü4</a></li>
</ul>
<li><a href="" target="_self" >Menü3</a>
<ul>
<li><a href="" target="_self">Untermenü1</a></li>
<li><a href="" target="_self">Untermenü2</a></li>
<li><a href="" target="_self">Untermenü3</a></li>
<li><a href="" target="_self">Untermenü4</a></li>
</ul>
<li><a href="" target="_self" >Menü4</a>
<ul>
<li><a href="" target="_self">Untermenü1</a></li>
<li><a href="" target="_self">Untermenü2</a></li>
<li><a href="" target="_self">Untermenü3</a></li>
<li><a href="" target="_self">Untermenü4</a></li>
</ul>
<li><a href="" target="_self" >Menü5</a>
<ul>
<li><a href="" target="_self">Untermenü1</a></li>
<li><a href="" target="_self">Untermenü2</a></li>
<li><a href="" target="_self">Untermenü3</a></li>
<li><a href="" target="_self">Untermenü4</a></li>
</ul>
</div>
</div>
<style type="text/css">
<!--
/* V-Navi */
#V_Nav {
position: absolute;
left: 50%;
top:
233px;
margin-left:
-470px;
width:
936px;
height:
37px;
color: #C6BA8A;
font-size: 12px;
font-family: arial;
text-align: center;
border: 0px solid #FFFFFF;}
/* Dieser Teil ist nur notwendig, wenn ihr die normale Navi loswerden wollt!*
/* Navigation Buttons */
td.nav {
display:none; }
/* Hover-Effekt Navigation Buttons */
td.nav:hover {
display:none; }
/* Ab hier gehts normal weiter*/
/* CODE DER NAVIGATION*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#; url("") ;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#Normal-Farbe Oben;
color:#Normal-Schrift-Oben;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #Hover-Farbe Oben;
color:#Hover-Schrift-Oben;
text-decoration:none;
}
.menu li ul{
background:#;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('');
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background: #Hover-Farbe(Folddown!);
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background: #Normal-Farbe(Folddown!);
border:0px;
color:#Schrift-Hover;
text-decoration:none;
}
.menu p{
clear:left;
}
-->
</style>
Erklärungen:
Grün = Position Oben/Unten
Blau = Position Links/Rechts
Violet =Breite
Dunkelrot =Höhe
Der Code hat vllt noch ein paar Macken aber ich hoffe der erste Versuch geht einigermaßen^^
Lg Sylar1992
______________
