Vollständige Version anzeigen : CSS menu - hover


leex
27.01.2014, 15:10

Hey,
kann mir jemand sagen wie ich diesen Hover hinbekomme:

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
onip
28.01.2014, 18:54

vielleicht hilft dir das weiter:
dreidimensionale bänder (CSS-tut-dreidimensionale-b%C3%A4nder)


leex
29.01.2014, 15:30

Perfekt. Genau das was ich gesucht habe :)

Danke.

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

Habs jetzt hinbekommen im Shop

(;testshop;thirty3~de/)

leider verschiebts immer noch nach unten wenn man drüber fährt. kann man das beheben?
läuft nich flüssig.


UltimateHulk
30.01.2014, 11:04

Was machst du denn? :O

<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
<!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>


leex
30.01.2014, 13:14

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 (;testshop;thirty3~de/kategorie-1)


UltimateHulk
30.01.2014, 15:27

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:
<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.


leex
31.01.2014, 16:21

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 :)


Ähnliche Themen zu CSS menu - hover
  • hover mit onclick
    hallo! ich würde gerne auf meine hp einen hover bei einem bild einbringen... ist ja kein problem, nur soll der hover nur kommen wenn ich drauf klicke und wenn ich ein weiteres mal drauf klicke soll wieder das alte bil kommen... damit habe ich jetzt probleme! hier mein cod vllt hilft es ja was... [...]

  • [CSS] hover unterstreichen
    Hallo. Ich würde gerne wissen wo der fehler liegt. Die links werden wenn man mit der maus darüber fährt einfach nicht unterstrichen /* Allgemein Überschirften */ h1 /* Allgemein Links */ a:link a:visited a:active a:hover strong body a: [...]

  • Navigation + Hover
    hi rr'ler, und zwar hab ich diese navigation und möchte die nun auch coden. ;;1;xup~in/exec/ximg;php?fid=79577134 meine frage ist: Wie bekomm ich es hin, dass der hover und der link auch unter den Ecke liegt? also bitte keine antwort, dass man die ecken als seperator oder ähnliches verwenden [...]

  • [CSS] Überlappendes hover-dropdown-menü
    Hey Leute, ich denke hier kann ich kompetente Hilfe bekommen. Ich muss eine Website in HTML und CSS erstellen für die es eine Semesternote gibt. Nun habe ich das Grundgerüst schon fertig, leider haben sich einige Bugs eingeschlichen, die ich alleine nicht gelöst bekomme. KIND194 (;;;ichhabn [...]



raid-rush.ws | Imprint & Contact pr