Ergebnis 1 bis 5 von 5

Thema: vertikale Navi mit Submenu - wie aktive Links hervorheben

  1. #1
    HTML Newbie
    Registriert seit
    09.11.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard vertikale Navi mit Submenu - wie aktive Links hervorheben

    Guten Abend,

    ich versuche seit Stunden folgendes Problem zu lösen, komme aber damit irgendwie nicht klar und würde mich deshalb über Hilfe freuen.

    Ich habe ein vertikales Menu mit einem Untermenu erstellt. Das hat alles prima geklappt.

    Problem ist jetzt nur, auf der Seite die gerade besucht wird soll der Link/Button optisch hervorgehoben werden (Schrift bzw. Buttonfarbe z. B. rot) und nicht beim wegnehmen der Maus wieder in die Ursprungsfarbe (weiß) wechseln.

    Das Gleiche soll auch bei dem Submenu so funktionieren. Außerdem soll es nach dem "aufblättern" "stehen bleiben" und nicht wieder zugehen. Zugehen soll es erst, wenn ein neuer Button außerhalb des Submenu angeklickt wird.

    Was kann ich tun?

    Gruß
    Anna


    Hier der Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vertikale Navi mit Submenu</title>
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="naviie6.css"><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

    <style>
    * {
    margin:0;
    padding:0;
    list-style:none;
    text-decoration:none;
    }


    ul#navi , ul#navi ul {
    width:125px;
    float:left;
    background:#5b544a;
    }

    ul#navi a {
    display:block;
    padding:5px;
    color:#fff;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    }


    ul#navi li {
    position:relative;
    }

    /* Alle Ebenen ausblenden */

    ul#navi ul ,
    ul#navi li:hover ul ul ,
    ul#navi li:hover ul ul ul {
    position:absolute;
    left:-9999px;
    top:0;
    background:#5b544a;
    }

    /* Einzelne Ebenen einblenden */
    ul#navi li:hover ul ,
    ul#navi ul li:hover ul ,
    ul#navi ul ul li:hover ul
    {
    left:125px;
    }



    /* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
    ul#navi li:hover > a ,
    ul#navi ul li:hover > a,
    ul#navi ul ul li:hover > a,
    ul#navi ul ul ul li:hover > a
    {
    background:#7a7063;
    color:#990000;
    }

    ul#navi a span {
    float:left;
    font-weight:normal;
    }



    </style>


    </head>

    <body id="home">

    <ul id="navi">
    <li><a href="#">Button 1</a> </li>
    <li><a href="#">Button 2</a>
    <ul>
    <li><a href="#">Button 2a</a></li>
    <li><a href="#">Button 2b</a></li>
    <li><a href="#">Button 2c</a></li>
    </ul>
    </li>
    <li><a href="#">Button 3</a>
    <ul>
    <li><a href="#">Button 3a</a> </li>
    <li><a href="#">Button 3b</a></li>
    </ul>
    </li>

    <ul style="clear:both;">
    </ul>

    </body>


    </html>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: vertikale Navi mit Submenu - wie aktive Links hervorheben

    Bin nicht sicher, ob ich dich ganz richtig verstehe hier. Du möchtest in der Navi einen Indikator haben, welches die aktuelle Seite ist? Das löst du am besten mit einer eigenen Klasse, die dann das entsprechende Navigationselement erhält.

    Das Submenü geöffnet zu lassen ist deutlich komplizierter. Wahrscheinlich liesse sich mit der Verwendung der Pseudoklase :focus etwas machen, wird in älteren IE-Versionen aber wahrscheinlich zu Problemen führen. Eine Alternative dazu wäre Javascript.

  3. #3
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Submenu - wie aktive Links hervorheben

    Ich denke du meinst so etwas wie hier gezeigtes.
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Submenu - wie aktive Links hervorheben


  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    09.11.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Submenu - wie aktive Links hervorheben

    Danke an Euch.

    Ich werde es jetzt noch mal probieren...

    Gruß
    Anna

Ähnliche Themen

  1. vertikale Navi mit Grafiken nicht korrekt im IE
    Von drefman im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 08.02.2009, 13:29
  2. aktive links
    Von mamo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 07.09.2006, 17:47
  3. Problem mit Menu-Submenu
    Von Ragb im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 02.08.2006, 08:39
  4. Antworten: 9
    Letzter Beitrag: 23.07.2006, 14:00
  5. aktive links sollen bestehen bleiben
    Von Tsu im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 01.02.2006, 13:39

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •