einfache Dropdownliste mit Links?

[Sneer]

Hi,
bin blutiger Anfänger...vergebt mir bitte :cry:
Was ich erstellen wollte: Wenn man mit der Maus über ein Wort fährt - soll eine Dropdownliste mit 5 Links erscheinen.

Bei Google hab ich schon viele Scripts zu einer Textbox mit einen "Go"-Button gefunden.
Das finde ich aber schon zu komplex und Untermenües benötige ich auch nicht.

Geht sowas mit reinen html code?
Oder gibt es ein kleines Script dafür?
Bin für jeden Tipp dankbar.

 

[threadi]

Mit reinem HTML geht das nicht. Wenn Du aber einige CSS-Eigenschaften mittels der Pseudoklasse hover setzt, kannst Du durchaus etwas ausklappen.

 

[Sneer]

Danke für den Tipp, threadi!
Konnte mit den Suchbegriffen schon ein paar Beispiele finden.
Falls jemand noch ein benutzerfreundliches Script kennt, probier gerne weitere aus.

 

[prm]

http://www.ohne-css.gehts-gar.net/0066.php

 

[lowsaxonian]

Es gibt (wie für fast alles, wie mir scheint) auch Generatoren, die Dir die Arbeit abnehmen. Aber wen Du css nicht mal ansatzweise beherrschst, wird das nix werden.
Hier ein paar Beispiele (Generatoren und selfhtml): wis.net, css-technik.de und selfhtml.
Grüsse
low

 

[Sneer]

Danke für den Link prm! Genau so eine Anleitung habe ich gesucht.
Ich hab mir die Generatoren angesehen, aber wie Du schon sagst, ich glaube es macht wirklich Sinn sich ein wenig mit CSS zu beschäftigen, lowsaxonian.
Das Dropdownmenü habe ich soweit fertig, bis auf eine unschöne Darstellung.

Im CSS wird die Breite der einzelnen Blocks bestimmt:

#menu ul {
float: left;
width: 110px;
list-style-type: none;
}

Kann ich die Breite auch relativ zum Text erstellen lassen?
Also das jeder Block so groß wie sein Inhalt wird?

 

[lowsaxonian]

Hm, da hab ich noch nie drüber nachgedacht, weil ich das für unschön halte. Ich hab in meiner Navigation mal die Breitenangabe rausgenommen, aber sie wird nur so schmal wieder der breiteste Teil. Was wohl darin liegt, dass die gesamte Liste definiert wird.
Möglicherweise könnte man jede li einzeln über inline-Code definieren, aber ob das sinnvoll ist (der Anteil Code zu Content wächst natürlich erheblich) sei mal dahin gestellt. Aber ich denke, da gibt´s sicher noch eine andere Möglichkeit. Falls sich keiner meldet, stell mal ´ne Anfrage im css-forum; ich bin ja noch kein "HTML-Guru" ;-)

 

[prm]

Du kannst bei #menu ul den width-Wert weglassen und bei #menu a das "display: block"
Wirkt aber nach meinem Geschmack dann ziemlich unruhig, ausgefranselt und unschön.

 

[Sneer]

Ausgefranselt schaut es bei mir nicht aus, da ich die gleiche Farbe wie im Hintergrund verwende (Rahmen sind auch ausgeschaltet).
Wollte es bewusst schlicht halten und nur die Dropdown-Funktion irgendwie einbinden.
Hier ist noch eine hilfreiche Liste von CSS-Navigations-Funktionen: SELFHTML: Navigationshilfen / Kurzreferenz: CSS
Zumindest konnte ich damit einiges zurecht biegen :)
Grüße Sneer

 

[Sneer]

So ein Ärger..dachte ich wär fertig..

jetzt fällt mir auf, dass im IE die Hauptmenüs vertikal gestaffelt sind...
und in Firefox die Schriften unterschiedlich :(
nur in chrome funktioniert es.
Hat jemand ne Idee was ich ändern muss?
Hier das was ich zusammengeschustert habe:

/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Menüleiste--*/
#menu {
width: 80%;
padding: 0 12px;
background: #DDDDDD;
font-family: Arial;
color: #999999;
font-size: 1em;
line-height: 1.5 ;
float: left;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: absolute;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h1 { 
font-size: 1em; 
text-align: center; 
color: #999999;
font-size: small;
border: 5px solid #DDDDDD;
background: #DDDDDD; 
} 

/*--definiert die "Drop-Down-Links" im Normalzustand--*/ 
#menu a { 
text-decoration: none ;
display: block; 
border: 5px solid #DDDDDD; 
text-align: center;
white-space: nowrap;
font-weight: bold;
font-size: small;
background: #DDDDDD; 
color: #999999; 
} 

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/ 
#menu a:hover { 
color: #000000; 
background: #DDDDDD; 
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/

* html #menu ul li {
float: left;
width: 100%;
}

/*--nur für IE 7 erkennbar--*/

*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #999999;
border: 5px solid #DDDDDD;
background: #DDDDDD;
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:hover {
color: #000000;
background: #DDDDDD;
border: 5px solid #DDDDDD;
}