War ja klar, das es noch Probleme geben wird...
Problem 1:
Damit alle Hauptnavigationspunkte nebeneinander stehen, muss man "width" deaktivieren.
Das ist so, weil der aktive Hauptnavigationspunkt die Klasse "navig" nochmal zugewiesen
bekommt.
Gerenderter Code der kompletten Navigation:
<ul id="uff_0" class="
navig">
<li id="li_uff_1" class="sub_ul"><a href="index.php?hallihallo-1">HalliHallo-1</a>
<ul id="uff_1">
<li id="li_uff_4" class="sub_no"><a href="index.php?hallihallo-1-1">HalliHallo-1-1</a></li>
<li id="li_uff_5" class="sub_no"><a href="index.php?hallihallo-1-2">HalliHallo-1-2</a></li>
<li id="li_uff_6" class="sub_no"><a href="index.php?hallihallo-1-3">HalliHallo-1-3</a></li>
</ul>
</li>
<li id="li_uff_2" class="sub_ul"><a href="index.php?hallihallo-2">HalliHallo-2</a>
<ul id="uff_2">
<li id="li_uff_7" class="sub_no"><a href="index.php?hallihallo-2-1">HalliHallo-2-1</a></li>
<li id="li_uff_8" class="sub_no"><a href="index.php?hallihallo-2-2">HalliHallo-2-2</a></li>
</ul>
</li>
<li id="li_uff_3" class="sub_ul"><a href="index.php?hallihallo-3">HalliHallo-3</a>
<ul id="uff_3">
<li id="li_uff_17" class="sub_no"><a href="index.php?HalliHallo-3-1">HalliHallo-3-1</a></li>
<li id="li_uff_18" class="sub_no"><a href="index.php?HalliHallo-3-2">HalliHallo-3-2</a></li>
</ul>
</li>
<!-- Weil hier die Klasse navig zugewiesen wird, bricht die Hauptnavigation um -->
<li id="li_uff_16" class="sub_ul
navig selected"><a href="index.php?hallihallo-4">HalliHallo-4</a>
<ul id="uff_16" class="
navig">
<li id="li_uff_19" class="sub_no"><a href="index.php?HalliHallo-4-1">HalliHallo-4-1</a></li>
<li id="li_uff_20" class="sub_no"><a href="index.php?HalliHallo-4-2">HalliHallo-4-2</a></li>
<li id="li_uff_21" class="sub_no"><a href="index.php?HalliHallo-4-3">HalliHallo-4-3</a></li>
</ul>
</li>
</ul>
Hier nochmal die entsprechende css. Ist die gleiche wie von FlipFlop weiter oben.
Code: Select all
/* 27.06.07 Horizontales Menü mit einer horiz. Unterebene
Navigation core
http://www.phpwcms.de/forum/viewtopic.php?p=88630#88630
*/
.navig {
line-height: 1;
margin: 0 0 1.2em 0;
display: block;
position: relative;
}
/* remove all list stylings */
.navig, .navig ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
/* move all list items into one row, by floating them */
.navig li {
margin: 0;
padding: 0 1px;
border: 0;
display: block;
float: left;
background: url(../../../picture/menubg.gif) repeat-x;
}
/* initialy hide all sub menus */
.navig ul {
width: 100%;
display: block;
visibility: hidden;
position: absolute;
clear: both;
top: 1.8em;/* watch for this value! you must make sure that this value and value of line-height for the parent items are such that it is possible to move the mouse over to submenu */
left: 0;
}
/* -- float.clear -- force containment of floated LIs inside of main UL */
.navig:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
/* -- float.clear.END -- */
.navig li.selected ul, .navig li:hover ul {
visibility: visible;
}
.navig li.selected ul {
z-index: 10;
}
.navig li:hover ul {
z-index: 100;
}
/* Navigation make-up */
.navig {
font-size: 12px;
font-weight: bold;
color: #fff;
background: url(../../../picture/menubg.gif) repeat-x;
margin: 0em auto 2em;
padding: 0 1em;
width: 550px; /* this value should be close to what is needed for elements to stay on one line */
}
.navig a {
color: #fff;
text-decoration: none;
padding: 1em 5px 1.05em; /*THIS DEFINES NAV LI HEIGHT*/
display: block;
text-transform: uppercase;
}
.navig li {
margin: 0;
/*border-right: 1px dotted #fff;*/
}
.navig li li{
border: 0px;
}
/* if the following selector was ".navig li:hover a" IE7 will NOT render nested UL! the reason is the background-color rule. */
.navig li:hover {
color: #000;
background-color: #cde;
}
/* which is why the link is styled separatelly */
.navig li:hover a {
color: #FFF;
}
.navig li:hover ul {
background-color: #cde;
}
/* always pay attention that the value for top is such that it is possible to move the mouse over to submenu */
.navig ul {
top: 3em;
padding: 0 1em;/* should be identical to .navig, for best results */
color: #FFF;
width: 550px;
}
.navig li li {
padding: 0 6px;
background: url(../../../picture/sub_bg.gif) repeat-x;
}
.navig li ul {
background: url(../../../picture/sub_bg.gif) repeat-x;
}
.navig li li a {
color: #000;
padding: 0.3em;
font-family: sans-serif, 'Arial';
font-size: 11px;
text-transform: none;
}
/* fix the colors for selected item and submenu, for better usability */
.navig li.selected li a, .navig li.selected li a:hover {
color: #FFF;
background: url(../../../picture/sub_bg.gif) repeat-x;
}
.navig li.selected li, .navig li.selected:hover li a, .navig li.selected ul {
background: url(../../../picture/sub_bg.gif) repeat-x;
text-decoration:none;
}
.navig li li.selected, .navig li.selected:hover li.selected a, .navig li li.selected a{
background: url(../../../picture/sub_hover_bg.gif);
}
.navig li.selected li a:hover, .navig li.selected:hover li a:hover{
color: #eee;
}
/* IE5/Mac: \*//*/
.navig {
display: inline-block;
}
.navig a {
float: left;
}
.navig li ul {
top: 1.8em;
height: 2em;
}
.navig li li, .navig li li a {
display: inline;
float: none;
}
/* */
Innerhalb der Hauptnavigation, die z.B. eine Breite von 700px hat, wird dem aktiven Hauptmenüpunkt (HalliHallo-4)
also nochmal eine Breite von 700px zugewiesen. Daher bricht die Navigation natürlich um, da die
Inhaltsbreite nur 760px hat.
width=700px in der Klasse "navig aktiv:
Entferne ich nun "width" in der Klasse "navig", so steht meine Hauptnavigaton zwar schön
nebeneinander, aber dafür stehen dann die aktiven Subnavigationsmenüpunkte untereinander.
width=700px in der Klasse "navig" nicht aktiv:
Ich sitzte da leider schon eine ganze Weile dran und komme echt nicht weiter.
Und noch ein paar Fragen.
Wieso wird die Klasse "navig" eigentlich drei mal ausgegeben?
Woher kommen die beiden Klassen "sub_no" und "sub_ul"? Aus dem RT?
Viele Grüße!
Spielplan
