| Schüttelreim |
08.03.2013 22:54 |
Suche Hilfe bei komplexem Menu-Problem
Hallo,
ich habe mir mit viel Einlesen in CSS und diversen Vorbildern eine Menü-Struktur (Hauptmenü + Sub-Menü) gebaut. Diese geht über 3 Level. Dabei spielt ein Menüpunkt "verrückt". Meine angelesenen CSS-Kenntnisse erlauben mir nicht, das Problem zu lösen, darum bitte ich das erfahrene Forum, mir Hilfestellung zu leisten.
Anforderung:
Der Nav-Frame enthält das horizontale Hauptmenü (HMenü). Bei HMenue3 können zwei weitere Menü-Level geöffnet werden. Die Struktur ist je Level eingerückt. OnHover silberner Hintergrund.
Der Sub-Nav-Frame (vertikal am linken Rand) enthält die statische Menü-Struktur zu Menue3 (entspricht HMenue3). Ein aktivierter Menüpunkt wir fett. Die Struktur ist je Level eingerückt. OnHover silberner Hintergrund.
Situation:
Während in der Sub-Nav-Struktur die Darstellung erwartungsgemäß ist, erscheint in der geöffneten Nav-Frame-Struktur der Menü-Punkt Menue3-5 ("Very long Menue point numberH35") direkt nach Menüpunkt Menue3-4 anstatt nach der Level3-Struktur unter Menue3-4-4.
Frage:
Wie bekomme ich in der Nav-Frame-Struktur Menue3-5 unter Menue3-4-4?
Ich habe den Code schon soweit wie möglich bereinigt, um nur die hier beschriebene Funktionalität darzustellen, dennoch ist er noch ziemlich lang. Wie gesagt, ich habe ihn aus vielen Anregungen und Vorbildern zusammengebaut. Neben der eigentlichen Pröblemlösung bin ich natürlich auch für Vereinfachungsvorschläge offen. Ich lerne gerne dazu. :)
So sieht es dann beispielhaft aus: http://result.dabblet.com/gist/5120532/
(@bel: Danke für die Anregung.)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* Start - navigation css xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
div#nav-frame {
position: absolute;
width: 100%;
top: 120px;
left: 0px;
padding-left: 0px;
background-color: white;
clear: both;
z-index: 3;
}
* html div#nav-frame { /* Korrektur fuer IE 5.x */
width: 100%; /* 48.7em; */
w\idth: 100%; /* 47.1em; */
}
div#nav-frame div {
clear: left;
}
ul#navigation, ul#sub-nav {
margin: 0;
padding: 0.2em;
text-align: center;
}
ul#navigation li a:hover, ul#sub-nav li a:hover {
background-color: silver;
border-radius: 3px;
}
ul#navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative; /* brings each nav-item and sub-nav-item under another*/
margin: 0.4em 0.8em 0.4em 0em;
padding: 0.1em; /* nav frame margin */
}
ul#navigation li li, ul#sub-nav li li {
white-space: pre; /* text wrap as in editor */
margin: 0.1em; /* sub-item margin */
}
* html ul#navigation li, * html ul#sub-nav li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#navigation li, *:first-child+html ul#sub-nav li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#navigation li ul { /* Sub-nav Frame */
margin: 0;
padding: 0;
position: absolute;
left: 0.4em; /* Distance of Sub-nav to nav */
display: none; /* Unternavigation ausblenden */
}
* html ul#navigation li ul, * html ul#sub-nav li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#navigation ul, *:first-child+html ul#sub-nav ul { /* Workaround fuer den IE 7 */
background-color: silver;
padding-bottom: 0.4em;
border-radius: 3px;
}
ul#navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
padding: 0.2em; /* Distance to item above */
background-color: white;
}
ul#navigation li ul li { /* Sub-nav Item */
float: none; /* makes sub-nav-items appear under another */
margin-bottom: 0.2em;
position: relative;
}
ul#navigation a, ul#navigation span, ul#sub-nav a, ul#sub-nav span {
display: block; /* brings text-conteiner (and href-sensitivity) to the size of the sub-nav-frame */
width: auto; /* 6.4em;*/ /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.1em 0.4em 0.1em 0.2em;
text-align:left;
text-decoration: none;
color: silver;
}
* html ul#navigation a, * html ul#navigation span, * html ul#sub-nav a, * html ul#sub-nav span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#navigation a:hover, ul#sub-nav a:hover, ul#navigation span:hover, ul#sub-nav span:hover, #footright a:hover, p a:hover {
color: black;
background-color: silver;
border-radius: 3px;
}
ul#navigation span.aktuell, ul#sub-nav span.aktuell, #footright span.aktuell { /* aktuelle Rubrik kennzeichnen */
color: black;
}
/* End - navigation css xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* Start - sub-navigation css xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
div#sub-nav-frame {
position: absolute;
float: left;
width: 110px;
margin-top: 155px;
left: 0px;
padding-left: 0px;
background-color: white;
z-index: 2;
}
ul#sub-nav li {
list-style: none;
margin-top: 1em;
padding: 0em; /* nav frame margin */
}
ul#sub-nav li ul {
margin: 0 0 0 0.4em;
padding: 0;
}
/* End - sub-navigation css xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#content {
position: relative;
margin-top: 150px;
left: 115px;
float: left;
}
</style>
</head>
<body>
<div id="nav-frame">
<ul id="navigation">
<li><a href="Menue1.html">HMenue1</a></li>
<li><a href="Menue2.html">HMenue2</a></li>
<li><span class="aktuell">HMenue3</span>
<ul>
<li><a href="Menue3-1.html">HMenue3-1</a></li>
<li><a href="Menue3-2.html">HMenue3-2</a></li>
<li><a href="Menue3-3.html">HMenue3-3</a></li>
<li><a href="Menue3-4.html">HMenue3-4</a></li>
<ul>
<li><a href="Menue3-4-1.html">HMenue3-4-1</a></li>
<li><a href="Menue3-4-2.html">HMenue3-4-2</a></li>
<li><a href="Menue3-4-3.html">HMenue3-4-3</a></li>
<li><a href="Menue3-4-4.html">HMenue3-4-4</a></li>
</ul>
<li><a href="Menue3-5.html">Very long
Menue point numberH35</a></li>
</ul>
</li>
<li><a href="Menue4.html">HMenue4</a></li>
<li><a href="Menue5.html">HMenue5</a></li>
<li><a href="Menue6.html">HMenue6</a></li>
<li><a href="Menue7.html">HMenue7</a></li>
</ul> <!-- navigation -->
</div> <!-- nav-frame -->
<div id="sub-nav-frame">
<ul id="sub-nav">
<li><a href="Menue3.html"><span class="aktuell">Menue3</span>
<ul>
<li><a href="Menue3-1.html">Menue3-1</a></li>
<li><a href="Menue3-2.html">Menue3-2</a></li>
<li><a href="Menue3-3.html">Menue3-3</a></li>
<li><a href="Menue3-4.html">Menue3-4</a></li>
<ul>
<li><a href="Menue3-4-1.html">Menue3-4-1</a></li>
<li><a href="Menue3-4-2.html">Menue3-4-2</a></li>
<li><a href="Menue3-4-3.html">Menue3-4-3</a></li>
<li><a href="Menue3-4-4.html">Menue3-4-4</a></li>
</ul>
<li><a href="Menue3-5.html">Very long
Menue point number3-5</a></li>
</ul>
</li>
</ul>
</div> <!-- sub-nav-frame -->
<div id="content">
<p>Content</p>
</div> <!-- content -->
</body>
</html>
Danke für Eure Unterstützung,
Schüttelreim |
