ZFX + Developia

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 -->

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 */}

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 -------------+
	
}