Drop Down

Status
Nicht offen für weitere Antworten.
A

anglernicole

Grünschnabel
Also, bin blutiger Anfänger was CSS betrifft und glaube auch dass dieses Thema eher zu JavaScript gehört.
Ich möchte für die Navigation meiner Website ein Drop Down-Menü mit Unterpunkten. Hab ich auch schon und funktioniert auch, aber ich hätte es gern so wie auf
getmobile .
Also bei mir versteckt sich das Menü im Navigationsframe, ist also weder sicht noch klickbar und auch wenn ich die Seite komplett als Tabelle mache verschiebt sich alles nach unten.
Versteht ihr was ich meine? Is mir irgendwie zu helfen?

Vielen Dank schonmal, Nicole
 
Hm, eigendlich bin ich nicht gerade ein Freund von Anglizismen und würde es daher „mehrfach Thema“, „mehrfach Beitrag“ oder ähnliches nennen.
 
hi anglernico
eventuell hilft dir das den Style musst du dir halt anpassen

der HTML Teil

Code: 
<html>
<head>
<title>Navi</title>
<link rel="stylesheet" type="text/css" href="non_js.css" />
<!--
Ist JS deaktiviert wird das ursprüngliche CSS verwendet, das eine andere Formatierung
für die Navi hat.
-->
<script type="text/javascript">
<!--
    //abfrage um Opera 5 - 6 abzufangen
    if (document.createTextNode) {
    document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"js.css\" />");
    }

    function changeStyleById(el,ds) {
               if (document.getElementById) {
                  var nodeObj = document.getElementById(el)
                  nodeObj.style.display = ds;
                  }
           }
//-->
</script>
</head>
<body>
<div id="text">Text</div>


<div id="nav">


<div class="klick" onMouseover="changeStyleById('e1','block')" onMouseOut="changeStyleById('e1','none')">HTML
<div id="e1">
<p><a href="#">Aepfel</a></p>
<p><a href="#">Birnen</a></p>
<p><a href="#">Wuermer</a></p></div>
</div>


<div class="klick" onMouseover="changeStyleById('e2','block')" onMouseOut="changeStyleById('e2','none')">CSS
<div id="e2">
<p><a href="#">1</a></p>
<p><a href="#">2</a></p>
<p><a href="#">3</a></p></div>
</div>
</div>
</body>
</html>



erstes CSS
Code: 
body {
	background : #fff;
	color : #000;
}

body, div, span, a, p, h1, h2, h3 {
	font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

#text {
	width : 80%;
	float : left;
	background : #ccc;
}

#nav {
	width : 20%;
	float : left;
	background : #999;
	height: 350px;
}

/* Für Navi */
.klick {
	padding : 3px 15px 3px 15px;
	border : 1px solid #000;
	margin-bottom: -1px;
	width : 150px;
	background : #efefef;
	font-family : arial;
	cursor : pointer;
	cursor : hand;
}
#e1
{
	display : none;
}

#e2
{
	display : none;
}



zweites CSS

Code: 
body {
	background : #fff;
	color : #000;
}

body, div, span, a, p, h1, h2, h3 {
	font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

#text {
	width : 80%;
	float : left;
	background : #ccc;
}

#nav {
	width : 20%;
	float : left;
	background : #999;
	height: 350px;
}

/* Für Navi */
.klick {
	padding : 3px 15px 3px 15px;
	border : 1px solid #000;
	margin-bottom: -1px;
	width : 150px;
	background : #efefef;
	font-family : arial;
	cursor : pointer;
	cursor : hand;
}
#e1
{
	display : block;
}

#e2
{
	display : block;
}
 
Ich dachte ich werfe das einfach mal ein:

Man kann mit CSS auch solche Menüs machen, is an sich gar nicht sooo schwer.

Das einzige Problem ist... ihr ahnt es bestimmt... der IE macht da nicht mit!
Es funktioniert in allen, nur nicht im IE, ich habe aber gerade keinen Link zu Hand!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück