CSS menu - hover

Dieses Thema im Forum "Webdesign" wurde erstellt von leex, 27. Januar 2014 .

Schlagworte:
  1. 29. Januar 2014
    AW: CSS menu - hover

    Perfekt. Genau das was ich gesucht habe

    Danke.

    - - - - - - - - - - Beitrag zusammengefügt - - - - - - - - - -

    Habs jetzt hinbekommen im Shop

    http://testshop.thirty3.de/

    leider verschiebts immer noch nach unten wenn man drüber fährt. kann man das beheben?
    läuft nich flüssig.
     
  2. 30. Januar 2014
    Zuletzt bearbeitet: 30. Januar 2014
    AW: CSS menu - hover

    Was machst du denn? :O

    HTML:
    <ul>
     <a href="#">
     <li>yolo</li>
     </a>
    </ul>
    Das ist alles andere als valider HTML Code

    Hier ein einfach Beispiel von mir:
    Browser Support: IE >8
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
     <title>RaidNav</title>
     <style type="text/css">
     #middle {
     margin: auto;
     width: 200px;
     }
    
     body {
     background: darkgrey;
     }
    
     ul, li {
     margin: 0;
     padding: 0;
     line-height: 1;
     }
    
     ul {
     width: 200px;
     background: #fff;
     }
    
     li {
     list-style: none;
     position: relative;
     }
    
     a {
     color: #000;
     text-decoration: none;
     display: block;
     width: 100%;
     padding: 2px 5px;
     }
    
     a:hover {
     background: #ffa500;
     color: #fff;
     position: relative;
     left: -10px;
     padding: 2px 10px;
     }
    
     a:hover:before,
     a:hover:after {
     content:'';
     position: absolute;
     bottom: -10px;
     width: 0;
     height: 0;
     border-style: solid;
     line-height: 0px;
     _filter: progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
     }
    
     a:hover:after{
     right: 0;
     border-width: 10px 10px 0 0;
     border-color: #000000 transparent transparent transparent;
     _border-color: #000000 #ffffff #ffffff #ffffff;
     }
     a:hover:before{
     left: 0;
     border-width: 0 10px 10px 0;
     border-color: transparent #000000 transparent transparent;
     _border-color: #ffffff #000000 #ffffff #ffffff;
     }
     </style>
    </head>
    <body>
    <div id="middle">
     <ul>
     <li>
     <a href="#">yolo</a>
     </li>
     <li>
     <a href="#">swag</a>
     </li>
     <li>
     <a href="#">uber</a>
     </li>
     </ul>
    </div>
    </body>
    </html>
     
  3. 30. Januar 2014
    Zuletzt bearbeitet: 30. Januar 2014
    AW: CSS menu - hover

    Vielen Dank. Werde versuchen das umzusetzen.

    Bräuchte auch noch einen Pfeil vor der aktiven Kategorie. Wie würdest du das dann in meinem fall machen machen?

    Ich hab den link um das li gemacht weils bei mir sonst nicht funktioniert hat, dass man den ganzen balken anklicken kann. bei dir geht das. wraum?! ---> lösung gefunden a{ width: 100%}

    edit:
    habs jetzt mal eingebaut, auch das mit dem active. Leider erkennt es irgendwie nicht, dass der link aktiv ist.
    Wenn ich in Firebug die :active links anmache zeigt es aber richtig an.

    Autoschilder
     
  4. 30. Januar 2014
    AW: CSS menu - hover

    Du hast die Lösung nicht zu 100% gefunden ;-)

    <a> ist normal ein "inline" Element, das nimmt keine höhen/breiten Angaben an. Deshalb habe ich es in ein "block" Element umgewandelt, selbiges würde mit "inline-block" funktionieren.

    inline: Diese Elemente erzeugen keinen neuen Absatz.
    inline-block: Diese Elemente erzeugen keinen Absatz, sind aber in der höhe/breite definierbar
    block: Diese Elemente erzeugen einen neuen Absatz.

    Beispiel:
    HTML:
    <span style="background:blue;width: 200px">yolo1</span>
    <span style="background:red;display:inline-block;width:200px">yolo2</span>
    <span style="background:green;display:block;width:200px">yolo2</span>
    <span> ist von Natur aus ein "inline" Element

    Zu dem Pfeil:
    ich würde das mit sogenannten "iconfonts" machen. Like Twitter Bootstrap.
     
  5. 31. Januar 2014
    AW: CSS menu - hover

    ahh ok alles klar

    Ok das kenne ich noch gar nicht. Problem mit dem active-link besteht aber ja tortzdem weiterhin, denn das es active ist wird ja nicht erkannt. ich weiß aber nicht warum.

    edit:
    hab entypo jetzt aml eingefügt. Funktioniert auch wenn ichs direkt in die html datei mache, aber wenn ichs im a:active:before mache mit content: "U+25B6" oder content: "▶" gehts nicht.

    - - - - - - - - - - Beitrag zusammengefügt - - - - - - - - - -

    Ok. Habs jetzt hinbekommen. funktioniert jetzt
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.