Horizontales Drop Down Menü erstellen?
0 0 0 0 0 
at
0 0
Horizontales Drop Down Menü erstellen?
Hallo,
ich möchte ein horizontales Menü in css erstellen. Sobal ich mit der Maus über einen Link fahre, soll sich ein Menü unter dem Link öffnen, bzw. aufklappen als Drop-Down Menü. Bisher habe ich dieses nur mit javascript gemacht. Wie kann ich das ganze mit css erstellen?
Gruss
Thomas
-
puts "Hallo " + gets.chomp + "."
?> Thomas
=> Hallo Thomas.Bisher habe ich dieses nur mit javascript gemacht. Wie kann ich das ganze mit css erstellen?
Durchstöbere einmal das Kapitel CSS-basierte Layouts in SelfHTML.
Ich würde dir gerne den Link direkt geben, doch unsere Firewall spinnt gerade rum.Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 20: search.ini
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software] -
Hallo Thomas,
ich möchte ein horizontales Menü in css erstellen. [...] Wie kann ich das ganze mit css erstellen?
zufällig habe ich da was zur Hand: http://de.selfhtml.org/css/layouts/navigationsleisten.htm. ;-) Funktioniert aber nur in "richtigen" Browsern.
Mit freundlichen Grüßen,
André-
puts "Hallo " + gets.chomp + "."
?> Zeromancer
=> Hallo Zeromancer.zufällig habe ich da was zur Hand: http://de.selfhtml.org/css/layouts/navigationsleisten.htm. ;-) Funktioniert aber nur in "richtigen" Browsern.
Danke für den präzisen Link.
Wenn ich ihn aufrufe kommt bei mir das hier:---
ERROR
The requested URL could not be retrievedWhile trying to retrieve the URL: NONE://localhost:8080http://de.selfhtml.org/css/layouts/navigationsleisten.htm
The following error was encountered:
Zero Sized Reply
---Hoffentlich bekomme ich das wieder hin... :-(
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 20: search.ini
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hallo Ashura,
ERROR
The requested URL could not be retrievedich glaube, du hast ein Problem?! ;-) Wohl wieder zu viel "rumgespielt"?
Mit freundlichen Grüßen,
André-
puts "Hallo " + gets.chomp + "."
?> Zeromancer
=> Hallo Zeromancer.
ERROR
The requested URL could not be retrievedich glaube, du hast ein Problem?! ;-) Wohl wieder zu viel "rumgespielt"?
Naa! I hob' gornix g'mocht... :-(
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 20: search.ini
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
puts "Hallo " + gets.chomp + "."
?>
=> Hallo.ich glaube, du hast ein Problem?! ;-) Wohl wieder zu viel "rumgespielt"?
Naa! I hob' gornix g'mocht... :-(
'S geht widda! :-)
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 20: search.ini
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]
-
-
-
-
Hallo Andre,
vielen Dank für dein posting.Ich hab das ganze mal zusammengebastelt auf meine Bedürfnisse.
Leider ist es aber nicht so wie ich das haben will, bzw. ich kriegs einfach nicht korrekt hin.Ich möchte gerne, dass sich im Untermenü die Hintergrundfarbe ändert, bzw. das es eine andere ist, wie im Hauptmenü. Wie kann ich das machen.
Hier mal der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title><style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body {
background-color:#666666;
}#box {
width:760px;
height:100%;
background-color:#cccccc;
float:left;
border:1px solid black;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin:1px;
padding: 0;}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: 0px;
}ul#Navigation li ul {
margin: 0; padding: 0;
margin-left:2px;
position: absolute;
top: 21px; left: 0px;
display: none; /* Unternavigation ausblenden */
background-color:black;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */}
ul#Navigation li ul li {
float: none;
display: block;
}ul#Navigation a, ul#Navigation span {
display: block;
width: 70px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
background-color:black; text-align: center;
color: #ffffff;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 70px; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
color:black;
background-color:black;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #ffffff;
background-color:black;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: none;
}</style>
<!--[if IE]><script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "blue";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
window.onload=hoverIE;
</script><![endif]--></head>
<body><div id="box">
<ul id="Navigation">
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
</ul>
<div></body>
</html>Gruss
Thomas-
Hallo.
Ich hab das ganze mal zusammengebastelt auf meine Bedürfnisse.
Leider ist es aber nicht so wie ich das haben will, bzw. ich kriegs einfach nicht korrekt hin.Ich möchte gerne, dass sich im Untermenü die Hintergrundfarbe ändert, bzw. das es eine andere ist, wie im Hauptmenü. Wie kann ich das machen.
Kann es sein, dass du einfach nur den Code in deine Seite integriert hast, ohne zu verstehen, was dort geschieht?
MfG, at
-
-
-
Moinsen,
mit etwas JS, was aber auch ohne JS dargestellt wird:
http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm
(verlinkt von Listamatic)und ganz ohne JS, dafür nicht ganz trivial in der Realisierung (ist aber alles beschrieben):
http://www.stunicholls.myby.co.uk/menus/dropdownfun.html (lesen, dann link unten benutzen)--
cu,
Maz -
Ein gutes Tutorial ist suckerfish dropdowns auf alistapart.com. Ist im Moment anscheinend nicht zu erreichen, einfach später versuchen.