Menu mit Hervorhebung

foxcomputers

Hallo zusammen,

leider musste das Menu durch ein html-menu ersetzen, da sonst die Abstände - die so gewünscht sind - nicht eingebaut werden können. Nun sollte aber die aktuell geöffnete Seite im Menu markiert, bzw. anders gefärbt sein. Leider habe ich nach stundenlangem Probieren keinen Geistesblitz. Freue mich über jeden Tipp!

Quellcode von sidebar.php:

<div id="sidebar">
<ul>
<li><a href="index.php">Home</a> 
<a href="?page_id=5">Zur Person</a> 
 
<a href="?page_id=7">Atemtherapie</a> 
<a href="?page_id=9">Methode</a> 
<a href="?page_id=11">Therapieziele</a> 
<a href="?page_id=15">Anwendungsgebiete</a> 
<a href="?page_id=17">Therapieformen</a> 
<a href="?page_id=19">Tarife | Krankenkasse</a> 
<a href="?page_id=21">Kursangebot</a> 
 
<a href="?page_id=23">Praxis</a> 
<a href="?page_id=25">Kontakt</a> 
<a href="?page_id=27">Links</a></li>
</ul>
</div>

Quellcode-Auszug aus der style.css:

#sidebar ul a:active {
color: #f29432;
text-decoration: none;
font-weight:bold;
}

Danke im Voraus...

Grüsse, Michael

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

monotonWEBmedia

Ich glaube kaum, das man dem Eröffnungstag von <li> die Linkdefinierung ankloppen kann, dürfte nur Theoretisch garnicht funktionieren ;D
Probier ma folgendes:

sidebar.php
in den a Tag ne class zur navi setzen:

Code

<body>
<div>
<ul>
<li><a class="navi" href="index.php">Home</a><br />
<a class="navi" href="#">Zur Person</a><br />
<br />
<a class="navi" href="#">Atemtherapie</a><br />
<a class="navi" href="#">Methode</a><br />
<a class="navi" href="#">Therapieziele</a><br />
<a class="navi" href="#">Anwendungsgebiete</a><br />
<a class="navi" href="#">Therapieformen</a><br />
<a class="navi" href="#">Tarife | Krankenkasse</a><br />
<a class="navi" href="#">Kursangebot</a><br />
<br />
<a class="navi" href="#">Praxis</a><br />
<a class="navi" href="#">Kontakt</a><br />
<a class="navi" href="#">Links</a></li>
</ul>
</div>

Alles anzeigen

in die CSS

Code

a.navi:link{ color:#000000; text-decoration:none; font-weight:bold;}
a.navi:hover{ color:#000000; text-decoration:none; font-weight:bold;}
a.navi:active{ color:#000000; text-decoration:none; font-weight:bold;}
a.navi:visited{ color:#f29432; text-decoration:none; font-weight:bold;}

Sollte im Grunde funktionieren! Ansonsten muss ich mich Heut abend nomma ransetzen, kanns grad nich ausprobieren xD

perryzelda

1. a:active hat nichts mit der aktiven Seite zu tun sondern ist nur eine CSS-Formatierung für den Mauszeiger-Zustand auf einem Link.
2. Warum sind alle deine Links in einem einzigen <li> - sollte besser pro Link ein <li>.. /<li> sein.
3. m.A. kannst du über die automatische Erstellung der Navi alles mit CSS formatieren was nur geht. Also dort, wo zu 2 x hast holst du dir die von WP vergebene Klasse und machst dort ein entsprechendes margin-bottom oder padding-bottom. Damit hättest du auch jeweils "aktive Klasse" und kannst damit für aktuellen Seiten eine generelle Anweisung im Stylesheet schreiben.
schau hier wg. der Anpassung Template Tags/wp list pages WordPress Codex
4. Es geht natürlich auch über HTML, aber dazu müsstest du auf jeder einzelnen Seite eine eindeutige ID oder Klasse - zB beim body-tag - händisch eingeben.

monotonWEBmedia: eine Klasse für alle Links zu vergeben macht überhaupt keinen Sinn, das wird über #sidebar a, #sidebar a:visited, etc im Stylesheet definiert.
Ausserdem ist die Reihenfolge der Deklarationen falsch.
Richtig ist: a:link, a:visited, a:hover, a:active

foxcomputers

hallo perryzelda,

erstmal besten Dank für Deine Hilfe. Deine Einwände leuchten ein. Kommen wir also zu Punkt 3. Ich habe versucht das Ganze umzusetzen, doch irgendwie will es nicht so ganz wie ich... Ausserdem wird jetzt nach jedem Menupunkt eine Riesen-Zwischenzeile angezeigt, die ich mit CSS-tags nicht mehr wegbekomme...

auch das mit dem current page habe ich noch nich so ganz verstanden... könntest du mir da evt. genauere infos geben?

beste grüsse, michael

pressi

Hallo,

ich bin zwar erst seit einer Woche mit WP zugange, aber vielleicht ist das ein Ansatz:

PHP

<li><a href="/"<?php if(is_home() and !is_page()) echo ' class="aktiv"'; ?>title="Zurück zur Startseite">Start</a></li>


<li><a href="/statische_seite1/"<?php if(is_page('statische_seite1')) echo ' class="aktiv"'; ?> title="statische_seite1">Link2</a></li>

... die Klasse kannst Du dann im Stylesheet ansprechen und den Link verändern, oder schreib sofort style-Informationen rein:

PHP

<li><a href="/wordpress"<?php if(is_home() and !is_paged()) echo "style=\"background-image:url('http://localhost/wordpress/wp-content/themes/dein_theme/images/bg_button.jpg'); background-repeat:repeat-x; color:#666666; margin:0px; font-size:18px;\""; ?> title="Zur&uuml;ck zur Startseite">Start</a></li>

... anstatt eines Images kannst Du natürlich auch die Hintergrundfarbe ändern etc.! 'localhost' durch Deine Adresse ersetzen ...

Gruß pressi

perryzelda

Die Navigation bekommst du so:

PHP

<div id="sidebar"
<ul><li class="home"> <a href="<?php bloginfo('url'); ?>/" >Startseite
    </a></li><?php wp_list_pages('arguments'); ?></ul></div>

um für die Sartseite eine eigene Klasse definieren zu können:

PHP

<body <?php if ( is_home()){ ?> id="home"<?php } ?>>

im Stylesheet gibst du etwas in dieser Art hinein:

Code

#sidebar li    { ....  }
        #sidebar a, #sidebar a:visited  {  ....     }
        #sidebar a:hover, #sidebar a:active {  ....;}


       /*    ab  hier die Deklaration für die jeweils aktive Seite  */


        #sidebar .current_page_item a, 
        #sidebar .current_page_item a:visited,    
        #home  #sidebar .home a, #home  #sidebar .home a:visited  {  ....     }

Alles anzeigen

Damit passiert folgendes: mit wp-list-pages erstellt WP automatisch für die aktuelle Seite die Klasse "current_page_item" , da musst du nichts tun. Mit dem Code für den <body> und der Klasse .home bekommst Du ebenfalls eine eindeutige Definition - nämlich die für die Startseite.

Arguments bei wp-list-pages: da kannst du z.B. &include=1,2,3 eingeben ( die IDs der pages aus deiner Liste,) oder einfach nur wp_list_pages(); schreiben, falls du alle Pages in deiner Navigation anzeigst.

Im Stylesheet werden zuerst die allgemeinen Angaben für die Links in der Sidebar geschrieben und dann die speziellen Angabe für die aktuelle Seite.
Und danach dann die Angabe für die unterschiedlichen Abstände

foxcomputers

Danke

Thanx... Hat alles geklappt...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menu mit Hervorhebung

Jetzt mitmachen!