Hallo!
Ich bin gerade dabei aus meiner Seiten Navigation ein vollständiges Menu mit Grafiken, Active Funktion und allem drum und dran zu machen.
genauer gesagt habe ich dieses tutorial nachgebaut..
Soweit so gut, meine "Seiten" werden erkannt und auch "gehighlighted" wenn ich drauf bin!
Ich würde das ganze jetzt aber mit verschiedenen Grafiken für jede "Seite" haben!
Meine Navi sieht also so aus: Home - Skills - Contact
Screenshot von Navi, wie sie später aussehen soll:
[Blockierte Grafik: http://www2.pic-upload.de/08.12.09/6sn9dzylxzqa.jpg]
Jede Seite soll eine andere Hover/Active Grafik bekommen und genau das ist das Problem, welches ich probiere zu lösen. Wie weise ich meinen Seiten unterschiedliche Klassen (Grafiken) zu??
Hier der Code für die header.php
<!--See Note 1-->
<ul id="nav">
<!--See Note 2-->
<?php if(is_home() && !is_paged()){ ?>
<li class="current_page_item">
<a href="<?php echo get_settings('home'); ?>" title="You are Home">Blog Navigation</a>
</li>
<?php } else { ?>
<li>
<a href="<?php echo get_settings('home'); ?>" title="Click for Home">Blog Home</a>
</li>
<?php } ?>
<!--See Note 3-->
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>..und hier der Code für die CSS:
/* This styles the unordered list element to remove bullets and align the text */
ul#nav {
list-style-type : none;
text-align : right;
}
/*
This styles the links. It’s a block-level link and the text is positioned
with padding. Other styles are defined: width, colors, text attributes, etc.
*/
ul#nav a, ul#nav a.rss {
background-color : #d3d3a7;
padding : 15px 5px 2px 10px;
margin-bottom : 10px;
width : 180px;
height : auto;
color : #333;
font-weight : bold;
font-style : normal;
display : block;
text-decoration : none;
}
/* This gives the “rss” class link a background image */
ul#nav a.rss {
background : #d3d3a7 url(images/rss.jpg) no-repeat 2px 2px;
}
/* This is only necessary for IE6 else the link margins will collapse on hover */
ul#nav li {
margin-bottom : 10px;
}
/* This removes the default left margin (indentation) */
ul#nav li {
margin-left : 0;
float:left;
}
/*
Now to offer some hover and focus styles. Further specification of focus/active styles
could be added but I didn’t do it in this example. I didn’t feel it was needed
*/
ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
background-color : #669900;
color : #fff;
}
/* This offers up a hover/focus state image for the “rss” class link */
ul#nav a.rss:hover, ul#nav a.rss:focus {
background : #669900 url(images/rss_on.jpg) no-repeat 2px 2px;
}