zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Suche Hilfe bei komplexem Menu-Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.03.2013, 22:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2013
Beiträge: 2
Schüttelreim befindet sich auf einem aufstrebenden Ast
Frage 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

Geändert von Schüttelreim (08.03.2013 um 23:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.03.2013, 23:01
bel bel ist offline
Faulancer
neuer user
 
Registriert seit: 31.01.2005
Beiträge: 60
bel befindet sich auf einem aufstrebenden Ast
Standard

Du hast dir zwar sichtlich Mühe gegeben, deine Struktur zu erklären, aber so lässt sich das wirklich nicht nachvollziehen.
Stell doch mal dein Beispiel z.B. per dabblet dar, dann kann man dir auch helfen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.03.2013, 00:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2013
Beiträge: 2
Schüttelreim befindet sich auf einem aufstrebenden Ast
Standard

Hat nicht vielleicht doch einer eine Idee oder Anregung zur Lösung?
Mit Zitat antworten
  #4 (permalink)  
Alt 21.03.2013, 11:44
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

das liegt überienander wegen der absoluten positionierung.

und pack die unterpunkte von Menue3-4 mit in den li tag
Mit Zitat antworten
Antwort

Stichwörter
css, css menü, css menue, menü, menue

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
menu problem: hover effekt bei submenu dorkio CSS 4 10.02.2012 11:44
Css Menu Problem Rapidement CSS 11 16.06.2011 14:38
CSS Flyout Menu z-index Problem? Deluxestyler CSS 6 18.05.2010 12:05
Drop Down Menu: focus Problem enoo CSS 8 20.03.2007 17:51
Problem mit Menu auf der rechten Seite kix (X)HTML 1 24.09.2004 09:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:30 Uhr.