WordPress: Dynamische Drop-Down-Navigation mit CSS3 Transitions

CSS3 ist toll! Das Attribut „transition“ macht es zum Beispiel möglich, auf jQuery zu verzichten. Dadurch wird die Ladezeit beschleunigt und Speicherplatz gespart. Ich habe hier mal ein Beispiel für eine komplette dynamische Navigation in WordPress zusammengeschrieben.

Zuerst wird der Code für die Navigation in das entsprechende Template, meistens die header.php eingefügt:

<div id="topnav"><ul><?php wp_list_pages('title_li=’); ?></ul></div>

Danach kommen die CSS-Klassen, die 1:1 so übernommen werden können:
/* Header-Navigation */
#topnav {
   width:940px;
   position:absolute;
   top:0px;
}
#topnav ul,
#topnav ul li {
   padding:0px;
   margin:0px;
   list-style:none;
}
#topnav ul li {
   float:left;
   position:relative;
}
#topnav ul li a {
   line-height:53px;
   padding:0px 7px;
   text-transform:uppercase;
   color:#53534a;
   display:block;
}
#topnav ul li a:hover,
#topnav ul li.current_page_item a,
#topnav ul li.current_page_ancestor a {
   background:#fff url("images/topnav_active.png") repeat-x top;
}
#topnav ul li.current_page_item a,
#topnav ul li.current_page_ancestor a {
   color:#df7104;
}
#topnav ul li ul.children {
   background:#fff;
   position:absolute;
   top:53px;
   z-index:100;
   min-width:200px;
   box-shadow:0px 5px 5px #ddd;
   opacity:0.0;
   transition:all 0.3s linear;
   -moz-transition:all 0.3s linear;
   -webkit-transition:all 0.3s linear;
   -ms-transition:all 0.3s linear;
   -o-transition:all 0.3s linear;
}
#topnav ul li:hover ul.children {
   opacity:1.0;
}
#topnav ul li ul.children li {
   float:none;
   border-bottom:1px dotted #ddd;
}
#topnav ul li ul.children li:last-child {
   border-bottom:0px none;
}
#topnav ul li ul.children li a {
   line-height:0px;
   opacity:0.0;
   transition:all 0.4s linear;
   -moz-transition:all 0.4s linear;
   -webkit-transition:all 0.4s linear;
   -ms-transition:all 0.4s linear;
   -o-transition:all 0.4s linear;
}
#topnav ul li:hover ul.children li a {
   line-height:30px;
   opacity:1;
}
#topnav ul li ul.children li a:hover,
#topnav ul li.current_page_item ul.children li a:hover,
#topnav ul li.current_page_ancestor ul.children li a:hover,
#topnav ul li.current_page_ancestor ul.children li.current_page_item a,
#topnav ul li.current_page_ancestor ul.children li.current_page_item ul.children li a:hover,
#topnav ul li.current_page_ancestor ul.children li.current_page_ancestor a,
#topnav ul li.current_page_ancestor ul.children li.current_page_ancestor ul.children li.current_page_item a,
#topnav ul li.current_page_ancestor ul.children li.current_page_ancestor ul.children li a:hover {
   color:#fff;
   background:#df7104;
}
#topnav ul li ul.children li ul.children {
   position:absolute;
   left:180px;
   top:0px;
   opacity:0.0;
   transition:all 0.3s linear;
   -moz-transition:all 0.3s linear;
   -webkit-transition:all 0.3s linear;
   -ms-transition:all 0.3s linear;
   -o-transition:all 0.3s linear;
}
#topnav ul li ul.children li:hover ul.children {
   opacity:1.0;
}
#topnav ul li.current_page_item ul.children li a,
#topnav ul li.current_page_ancestor ul.children li a,
#topnav ul li.current_page_ancestor ul.children li.current_page_item ul.children li a,
#topnav ul li.current_page_ancestor ul.children li.current_page_ancestor ul.children li a {
   background:none;
   color:#53534a;
}