HTML DropDown Menu

Bash

Kann mir einer sagen wie es geht folgendes zu coden:
Ich will ein Text wo man mehr lesen drücken kann und sich dann unter diesem noch mehr Text öffnet. Es sollte sich nicht die ganze Seite neu laden.
THX schon ma

driver

also n dropdown findest hier:
http://barrierefrei.e-workers.de/workshops/tricks/menues.php

allerdings halt net mit klick, sondern mouseover.... (find ich auch besser für a menü)

sejuma

Evtl. ein CSS-Popup-Fenster?
Funktionsweise siehe unter der im ersten Beitrag genannten Quelle.

gast

Zitat von driver

also n dropdown findest hier:
http://barrierefrei.e-workers.de/workshops/tricks/menues.php

allerdings halt net mit klick, sondern mouseover.... (find ich auch besser für a menü)

hi,
ich hab grad ma versucht das erste Drop-Down Menü zu benutzen von deinem Link, wenn ich das in ein html-formular einfüge, funktioniert das voll nich...
wenn ich das Formular (mit zb Mozilla FF) öffne steht die helfte des Codes da....
woran liegt das...?

driver

hast auch die css richtig eingebunden ?

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
HTML
Fuer die ungestylte Textversion sollten noch ein paar
(ansonsten unsichtbare) Trennzeichen usw. eingebaut werden.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<div id="menue">
<div class="aussen">
<span class="menutag">Produkte</span>
Systeme
Speicher
Laufwerke
Monitore
Drucker
Zubehör
</div>
<div class="aussen">
<span class="menutag">Leistungen</span>
Netzwerke
Server
Wartung
</div>
<div class="aussen">
<span class="menutag">Service</span>
Reparatur
Konfiguration
Software
Schulung
</div>
<div class="aussen">
<span class="menutag">Links</span>
About Us
Partner
Referenzen
</div>
</div>

</div>

++++++++++++++++++++
CSS Teil I
++++++++++++++++++++

/*
Menue-styles fuer non-IEs
Achtung:
Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/

#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}

++++++++++++++++++++
CSS Teil II
++++++++++++++++++++

/*
Menue-styles fuer IEs
Am besten per Conditional Comment einbinden.
Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
Anpassungen vorgenommen werden (siehe Kommentare).
*/

#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}

a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}

a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}

_______
so, dass is der Code, was muss ich damit noch machen?

driver

den html-teil in ne html-file schreiben.
die css angaben entweder in den head einbinden
oder in ne externe css-datei..

also den html-teil in ein html-file....k, hab ich
wie mach ich das mit der externen css-datei??
(is wahrscheinlich ne blöde Frage, weiß ich aber leider grade echt nich )
und wie muss ich die css datein nennen?
thx

driver

die datei nennste z.b. style.css (is im prinzip egal)

und dann fügst in den head der html noch das ein:

Code

<link rel="stylesheet" href="style.css" type="text/css"/>

jojo87

den code in "dateiname.css" und dann im head-teil

Code

<link rel="stylesheet" type="text/css" href="dateiname.css" />

einfügen.

thx driver, aber das funktioniert leider nich,
wenn mich mit der maus über das menü gehe,
kommen die untermenüs nich...kp warum.
hab beide css teile in style.css kopiert und beim html-file <head>
<link rel="stylesheet" href="style.css" type="text/css"/> </head>
eingegeben.

sejuma

Probier's mal damit: http://www.drweb.de/leseproben/klappmenu.shtml

danke, aber da blickt ja keiner durch....wo sollen denn welche codes rein

wenn du das ma zusammhägend posten könnest wärs tierisch,
was ins style.css gehört und was ins html-file

sejuma

Hab jetzt heute leider keine Zeit, aber ich denke, dort ist ziemlich alles gut erklärt.

driver

keine ahnung was du da anstellst, bei mir klappt das einwandfrei..

html-datei (menu.html):

HTML

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>


<div id="menuebox">


	<div id="menue">
		<div class="aussen">
<span class="menutag">Produkte</span>
[url='#']Systeme[/url]
[url='#']Speicher[/url]
[url='#']Laufwerke[/url]
[url='#']Monitore[/url]
[url='#']Drucker[/url]
[url='#']Zubehör[/url]
		</div>
		<div class="aussen">
<span class="menutag">Leistungen</span>
[url='#']Netzwerke[/url]
[url='#']Server[/url]
[url='#']Wartung[/url]
		</div>
		<div class="aussen">
<span class="menutag">Service</span>
[url='#']Reparatur[/url]
[url='#']Konfiguration[/url]
[url='#']Software[/url]
[url='#']Schulung[/url]
		</div>
		<div class="aussen">
<span class="menutag">Links</span>
[url='#']About Us[/url]
[url='#']Partner[/url]
[url='#']Referenzen[/url]
		</div>
	</div>


<!-- Der folgende Block bedient nur IEs! 
	 Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->


<!--[if IE]>
	<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
[url='#']Systeme[/url]
[url='#']Speicher[/url]
[url='#']Laufwerke[/url]
[url='#']Monitore[/url]
[url='#']Drucker[/url]
[url='#']Zubehör[/url]
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
[url='#']Netzwerke[/url]
[url='#']Server[/url]
[url='#']Wartung[/url]
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
[url='#']Reparatur[/url]
[url='#']Konfiguration[/url]
[url='#']Software[/url]
[url='#']Schulung[/url]
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
[url='#']About Us[/url]
[url='#']Partner[/url]
[url='#']Referenzen[/url]
</td></tr></table>
</a>
	</div>
<![endif]-->


</div>
</body>
</html>

Alles anzeigen

css-datei (style.css):

Code

++++++++++++++++++++
   CSS Teil I
++++++++++++++++++++


/*
	Menue-styles fuer non-IEs
	Achtung:
	Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
	Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/


#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}


#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}


a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}


span.menutag {
display: block;
cursor: default;
}




++++++++++++++++++++
   CSS Teil II
++++++++++++++++++++


/*
	Menue-styles fuer IEs
	Am besten per Conditional Comment einbinden.
	Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
	Anpassungen vorgenommen werden (siehe Kommentare).
*/


#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}


a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913; 
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}


a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}

Alles anzeigen

Rosslauer.de

für jemanden der weiß wovon du sprichst stimmt´s
Aber: Jeder hat mal angefangen und solange gefragt wird ist eben nicht alles klar.

Gruß, der Rosslauer von Rosslauer.de

Tags