CSS - HTML: Navigation horizontal mit mehreren Ebenen

[Coder85]

Salü zusammen

Folgendes Problem:
Ich habe eine Navi die horizontal ausgerichtet ist. Nach jedem klick auf ein Link, wird das dazugehörige Untermenu geladen. Welches ebenfalls horizontal direkt unter dem bereits angezeigten Menu positioiniert wird..

html:

Code: Alles auswählen

  <div id="wrapper">
    <div id="header">
      <img id="logo" src="media/images/logo.png" width="222" height="40" alt="LOGO" />

      <ul id="navigation">
        <li class="itemCount5">
          <a onclick="navShowChildrenNodes(this);" href="#">Kauffrau / Kaufmann*</a>

          <ul style="display:none">
            <li class="itemCount4">
              <a onclick="navShowChildrenNodes(this);" href="#">&Uuml;K*</a>

              <ul style="display:none">
                <li class="itemCount5"><a onclick="alert('huhu');" href=
                "#">Abgabetermine</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href=
                "#">Unterlagen</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href="#">foo</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href="#">bar</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href=
                "#">foobar</a></li>
              </ul>
            </li>

            <li class="itemCount4"><a href="http://www.domain.ch">PE</a></li>

            <li class="itemCount4"><a href="http://www.domain.ch">foo</a></li>

            <li class="itemCount4"><a href="http://www.domain.ch">bar</a></li>
          </ul>
        </li>

        <li class="itemCount5">
          <a onclick="navShowChildrenNodes(this);" href="#">B&uuml;roassistent/in</a>

          <ul style="display:none">
            <li class="itemCount2">
              <a onclick="navShowChildrenNodes(this);" href="#">&Uuml;K*</a>

              <ul style="display:none">
                <li class="itemCount5"><a onclick="alert('huhu');" href=
                "#">Abgabetermine</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href=
                "#">Unterlagen</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href="#">foo</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href="#">bar</a></li>

                <li class="itemCount5"><a onclick="alert('huhu');" href=
                "#">foobar</a></li>
              </ul>
            </li>

            <li class="itemCount2"><a href="http://www.domain.ch">PE</a></li>
          </ul>
        </li>

        <li class="itemCount5"><a href="http://www.domain.ch">Nachholbildung</a></li>

        <li class="itemCount5"><a href="http://www.domain.ch">QV</a></li>

        <li class="itemCount5"><a href="http://www.domain.ch">&Uuml;ber uns</a></li>
      </ul>

      <div class="clear"></div>
    </div>

    <div id="content">
      content
    </div><!-- /content -->
  </div><!-- /wrapper -->

css:

Code: Alles auswählen

/* 
+----------------- NAVIGATION -----------------+
*/
#navigation{
	position:relative;
	width:100%;
	letter-spacing:1px;
}

#navigation,
#navigation ul,
#navigation li{
	margin:0;
	padding:0;
	list-style:none;
}

#navigation ul {
	position:absolute;
	left:0px;
	width:100%;
}

#navigation li,
#navigation li:first-child {
	border:none;
	display:inline;
	float:left;
	margin-left:3px;
}

#navigation li:first-child {
	margin-left:0px;
}

#navigation a {
	display:block;
	height:19px; /* 28px img height - top padding */
	padding:9px 0px 0px 10px;
	background:url(../images/nav_bg.png) no-repeat bottom right;
	color:white;
	text-decoration:none;
}

#navigation a.active,
#navigation a:hover {
	background:url(../images/nav_bg_active.png) no-repeat right bottom;
	color:#137DC1;
}

#navigation li.itemCount5 {	width:165px;	/* 840px / 5 - 3px margin-left */}
#navigation li.itemCount4 {	width:207px;	/* 840px / 4 - 3px margin-left */}
#navigation li.itemCount3 {	width:277px;	/* 840px / 3 - 3px margin-left */}
#navigation li.itemCount2 {	width:417px;	/* 840px / 2 - 3px margin-left */}

jquery:

Code: Alles auswählen

function navShowChildrenNodes(element)
{
	//get parent li
	var parentLi = $(element).parents("li");
	// hide all sub ul's (excl. main level)
	$("#navigation ul").hide();
	// show all parent ul's
	$(parentLi).parents("ul").show();
	//show child ul
	$(parentLi).children("ul").show();
	//remove class active on all nods
	$("#navigation a").removeClass("active");
	//add class active on parent nods
	$(parentLi).parents("li").children("a").addClass("active");
	//add class active on current element
	$(element).addClass("active");
	//add class active on all nods on deepest level
	// +---------- TODO -------------+
	
}

das menu läuft soweit einwandfrei. nur soll immer nach der letzen offenen (tiefsten) menupunktbar der content beginnen. das geht ned, da ich die folgenden uls als absolut positionieren muss... wie kriege ich nun den content direkt unter das letzte offene menu? gibts da ev. ein trick? js?

sry wegen der unübersichtlichen navi... wird von php generiert...
danke für alle ideen.
gruss

[Coder85]

solved mit jquery :)

// count parent uls
var parentUlCount = $(element).parents("ul").length;
// reposition "content" div
$("#content").css("margin-top",parentUlCount * 31 + "px");