Sidebar, Pfad, Thumb

m34

Hallo,

ich habe so eine Sidebar gebastelt (siehe Anhang). Sie besteht aus Kategorien, die ich wie folgt eingefügt habe:

PHP

<a href="http://..."
onmouseover="austausch1.src='button1over.gif';"
onmouseout="austausch1.src='button1.gif';">
<img src="/button1.gif"
border="0" width="220"height="38"
name="austausch1">
</a>
 
<a href="http://..."
onmouseover="austausch2.src='button2over.gif';"
...
usw.

Alles anzeigen

Es kann evtl. sein, dass jetzt einige den Kopf schütteln, aber anders wusste ich mir nicht zu helfen.

Meine Frage ist nun: Sobald der Besucher auf eine Kategorie klickt, soll ...

- der gegklickte Button fest bleiben, also in dem Zustand, als wenn man darüber gehen würde oder
- es soll im Content-Bereich oben rechts ein bestimmtes Bild erscheinen oder
- es soll ein Pfadanzeige oben zu sehen sein

Kurzum, der Besucher soll wissen, in welcher Kategorie er sich befindet.

Wäre über jegliche Antwort sehr dankbar

Vielen Dank im Voraus
M34

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

marX

- Hovereffekte macht man heutzutage mit CSS. Da gibt einige nützliche Pseudoklassen wie :hover, :active usw. Siehe CSS 4 You - The Finest in Stylesheets

- Dass das Bild bei der aktiven Kategorie bleibt kannst du ebenfalls mit CSS machen. Je nachdem wie das am Ende aussehen soll ist das aber unterschiedlich aufwändig.

- Die Pfadanganbe nennt sich "Breadcrumb". Such nach dem Begriff in WordPress Plugin Database und du wirst ein passendes Plugin finden (z.B. Breadcrumb Navigation XT)

m34

Hallo,

besten Dank. Angenommen, man entscheidet sich dafür:

Navigationsleiste mit Überschriften

Gibt es eine leichte Möglichkeit, die Kategorien, die man im Admin erstellt, automatisch einfügen zu lassen?

Das wäre der Code des oben genannten Beispiels:

PHP

<head>
<title>Navigationsleiste mit Überschriften</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }
 
  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.2em 0.8em 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }
 
  ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
    display:block;
    padding: 0.2em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  ul#Navigation h2 {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: gray;
    color: black; background-color: #eee;
  }
 
</style>
</head>
<body>
  <h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>
 
  <ul id="Navigation">
    <li><h2>Rubrik 1</h2></li>
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a></li>
 
    <li><h2>Rubrik 2</h2></li>
    <li><span>aktuelle Seite</span></li>
    <li><a href="#Beispiel">Seite 5</a></li>
    <li><a href="#Beispiel">Seite 6</a></li>
 
    <li><h2>Rubrik 3</h2></li>
    <li><a href="#Beispiel">Seite 7</a></li>
    <li><a href="#Beispiel">Seite 8</a></li>
    <li><a href="#Beispiel">Seite 9</a></li>
  </ul>
 
</body>

Alles anzeigen

marX

Kategorien werde natürlich automatisch in die Liste eingefügt, dass ist ja der Sinn eines CMS. ;-)

Du kannst dein Menü auch an dieses Layout anpassen, sollte kein allzugroßes Problem sein. Guck dir dazu mal an, wie der HTML-Code aussieht, den Wordpress für die Kategorieliste generiert.

Ohne weitere Informationen, wie dein Blog strukturiert ist oder einen Link kann man hier aber nicht viel mehr sagen...

m34

Nochmal besten Dank für deine Antworten.

Also, so wie ich das sehe, ist das, was ich vorhabe nur schwer möglich. Ich möchte ja, dass jede angelegte Kategorie daneben ein Bildchen bekommt und dass sich dieses Bild von sw in Farbe ändert, sobald man drüber geht und so bleibt, wenn man in der entsprechenden Kategorie ist.

Nun habe ich das auf die "primitive" Art gemacht. Ist es dennoch möglich dabei die aktive Kategorie in dem Zustand zu lassen, so als würde man mit der Mouse drüber gehen?

Das ist nochmal der Code:

PHP

<a href="http://..."
onmouseover="austausch1.src='button1over.gif';"
onmouseout="austausch1.src='button1.gif';">
<img src="/button1.gif"
border="0" width="220"height="38"
name="austausch1">
</a>
 
<a href="http://..."
onmouseover="austausch2.src='button2over.gif';"
...
usw.

Alles anzeigen

ich weiß, hat jetzt nicht mehr viel mit Wordpress zu tun, aber vielleicht hat ja dennoch jemand Lust und Zeit zu antworten.:roll:

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar, Pfad, Thumb

Jetzt mitmachen!