Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag11.11.2009 um 20:12 (UTC)    
Titel: CSS: Fest positioniertes Coolmenü

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
______________




Zuletzt bearbeitet von s2z-anime am 12.11.2009, 22:55, insgesamt 4-mal bearbeitet
Beitrag12.11.2009 um 21:54 (UTC)    
Titel:

Hallo s2z-anime,
bei dem Coolmenü Code gibt es leider immer ein Problem...
Der Code ist für linksbündige Design gedacht,
sobald einer den Code bei seinem zentrierten Design einfügt,
gibt es leider Probleme bei der Positionierung in den versch. Auflösungen.

Bei deinem Code ist momentan genau das Gegenteil der Fall...
Bei einem zentrierten Design würde alles richtig angezeigt werden,
aber sobald das Design linksbündig ist,
wird auch das Menü in den versch. Auflösungen falsch positioniert...

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag13.11.2009 um 20:42 (UTC)    
Titel:

naja war eben als alternative gedacht^^
______________


Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de