CSS anpassen, ändern ...

Web-D

Hallo,

ich habe mit meiner Navi ein Problem und hoffe dass ihr mir helfen könnt.

Also, der Code müsste (automatisch) durch die CSS erkennen das ein Untermenü da ist und das irgendwie anzeigen.

Also Beispiel: Auf meiner Testseite ist ein Link "Leistungen" unterhalb befinden sich Links.
Ich habe im HTML ein Bild welches anzeigen soll das Unterseite da sind.

HTML

<li><a href="#"><img src="img/li.png" alt="" class="li-klein" /> Leistungen</a>

Das geht so weit. Ich muss nur, wenn ich weitere Unterseiten an anderer Stelle erstellen möchte das Bild jedes Mal mit der Hand in den HTML Code einfügen.

Das möchte ich so ändern, das eine CSS Einstellung besteht, die ein Bild oder was auch immer, automatisch einfügt, sobald der Code erkannt wird.

Also:

HTML

<nav id="nav">
          <ul id="navi">
           <li class="seite"><a href="index.php" title="Startseite">Startseite</a></li>
 
           <li><!-- Hier soll das Bild sein. Z.B. --> <a href="#">Leistungen</a>
            <ul>
            <li><a href="#" title="Webdesign">»&nbsp;Eine Seite</a></li>
            <li><a href="#" title="Fotodesign">»&nbsp;Seite</a></li>
            <li><a href="#" title="Fotoservice">»&nbsp;Noch eine Seite</a></li>
            </ul>
           </li>
 
           <li><!-- Hier soll das Bild sein. Z.B. --> <a href="#">Was anderes</a>
            <ul>
            <li><a href="#" title="Webdesign">»&nbsp;Eine Seite</a></li>
            <li><a href="#" title="Fotodesign">»&nbsp;Seite</a></li>
            <li><a href="#" title="Fotoservice">»&nbsp;Noch eine Seite</a></li>
            </ul>
           </li>
 
 
           <li><a href="#" title="Kontakt">Kontakt</a></li>
           <li><a href="#" title="Impressum">Impressum</a></li>
          </ul>
        </nav><!-- ende navi -->
</div> <!-- ende header -->

Alles anzeigen

Das ist der HTML Code wie er jetzt ist.

HTML

<nav id="nav">
          <ul id="navi">
           <li class="seite"><a href="index.php" title="Startseite">Startseite</a></li>
 
           <li><a href="#"><!-- Hier ist das Bild. --> <img src="img/li.png" alt="" class="li-klein" /> Leistungen</a>
            <ul>
            <li><a href="#" title="Webdesign">»&nbsp;Eine Seite</a></li>
            <li><a href="#" title="Fotodesign">»&nbsp;Seite</a></li>
            <li><a href="#" title="Fotoservice">»&nbsp;Noch eine Seite</a></li>
            </ul>
           </li>
 
           <li><a href="#" title="Kontakt">Kontakt</a></li>
           <li><a href="#" title="Impressum">Impressum</a></li>
          </ul>
        </nav><!-- ende navi -->
</div> <!-- ende header -->

Alles anzeigen

Hier noch der CSS Code

Code

#nav{
    max-width:800px;
    margin: auto;
}
#navi li{
    float:left;
    display:inline;
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 0.2em;
}
#navi ul{
    width:180px;
    list-style: none;
    position: absolute;
}
#navi li ul{
    display:none;
}
#navi li ul li{
    float:left;
    width:180px;
    background: #2F2F2F url(../img/header.png);
    border-bottom:1px solid #3F3F3F;
}
#navi li a{
    padding:30px 22px 15px 22px;
    font-size : 0.9em;
    color:#DFDFDF;
    text-decoration:none;
    display:block;
    border: none;
}
#navi li.seite a{
    color:#FFFFD5;
}
#navi li ul li a{
    padding:15px;
    color:#FFFFFF;
    text-decoration:none;
    display:block;
}
#navi li:hover ul{
    display:block;
}
#navi li a:hover, a.seite:hover{
    background: #2F2F2F;
    color: #00A179;
}

Alles anzeigen

Liebe Grüße
Andre

threadi

Ich sehe hier 3 Alternativen zu deinem Weg:

a) Du vergibst dem <li> in dem es ein <ul> gibt eine zusätzliche Klasse und erzeugst so per CSS ein Hintergrundbild an der von dir gewünschten Position. Nachteil: auch hierfür musst Du den HTML-Code jedes Mal anpassen, aber weniger als bei deiner Variante.
b) Du hängst das gewünschte Bild an das <ul> innerhalb eines <li> und positionierst es an die von dir gewünschte Stelle. So würde immer dann wenn eine <ul> innerhalb des Menüpunkts eingefügt wird automatisch das Bild auch eingefügt werden. Ob das bei dir möglich und sinnvoll ist hängt von deinem Design ab.
c) Du machst deine oder Variante a) mittels PHP, d.h. Du setzt die zusätzliche Eigenschaft wenn Du per PHP das Menü zusammenstellst. Das ist imho der modernste und sicherste Weg.

Tags