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;
}
Published by