Die letzten Tage durfte ich eine neue Funktion testen die Tanja in Ihrem Blog eingebaut hat. es geht um die Navigation in den Kategorien. Es hat sich im ersten Moment schwer gestaltet da ich etwas falsch gemacht habe.
Ich wollte die Leiste nicht unter dem Header sondern in der Artikel Ansicht unterbringen. Weil ich das Design an das der Seite anpassen wollte habe ich in der style.css ein paar Elemente kopiert. Und genau da musste ich später einsehen das ich das so nicht machen kann.
Nachdem ich die Leiste dann doch im Header, wie von Tanja vorgesehen, untergebracht habe ging es nach einer kleinen Anpassung dann auch.
Das Problem war das die Anordnung nicht gestimmt hat. Wenn eines der Menüs aufgeklappt ist, dann wurde es hinter dem Content Bericht angezeigt.
Ich musste die CSS anpassen und das Aufklappmenü mit “z-index” nach oben setzten.
Hier der Code der bei mir in der “header.php” untergebracht ist:
<?php if ( !is_tag() && !is_category() ) { ?>
<div id="katnav">
<ul>
<li><em><strong>Kategorien:</strong></em></li>
<?php wp_list_categories('orderby=name&use_desc_for_title=0&show_count=1&title_li='); ?>
</ul>
</div>
<?php } ?>
Folgender Code gehört in die “style.css” und ist für das aussehen zuständig:
#katnav { width:1040px; margin:30 auto; font-size:11px; background:#D4E0E8; color:#000000; overflow:hidden; height:46px; margin-left:0px; padding-bottom:5px; }
#katnav a, #katnav a:visited { color:#000000; }
#katnav a:hover { color:#000000; }
#katnav ul { margin:0; }
#katnav li { float:left; width:auto; list-style:none; margin:0; padding:5px 12px 5px 12px; }
#katnav li li { clear:both; }
#katnav li ul { position:absolute; left:-9999px; top:-9999px; display:inline; width:0; height:0; background-color:transparent; }
#katnav li:hover ul { left:auto; top:auto; display:block; width:270px; height:auto; background:#EAF1F6; color:#000000; padding-bottom:5px; position:absolute; z-index:2 ; }
#katnav li:hover ul li { border-bottom:0px solid #811517; width:246px; }
Die genaue Beschreibung wie Ihr die einzelnen Elemente Farblich und in der Größe ändern könnt, zeigt euch Tanja in Ihrem Tutorial.
Dann möchte ich mich noch mal herzlich bei Tanja bedanken das ich als Versuchskaninchen hinhalten durfte
So habe ich ein neues nützliches Element in meinem Blog!