[HTML+CSS]How to Dropdown Menü erstellen

|R.o.x| · 10/04/2010, 19:03

Hallo E*PVP,
ich möchte euch zeigen wie ihr ein eigenes Dropdown Menü erstellen könnt!

Ihr erstellt eine HTML Datei und bearbeitet die mit einem Editor eurer Wahl. NotePad++ wäre ein guter Editor. Dann erstellen wir erstmal das Grundgerüst beim HTML, welches aus diesen Bereichen aufgebaut ist :

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
</head>

<body>

</body>
</html>

So nun erstellen wir mal eine Liste, wodurch das Menü erstellt wird :

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
</head>

<body>
<li>Essen
<ul>
<li>Pizza</li>
</ul>
<li>Trinken
<ul>
<li>Wasser</li>
</ul>
</body>
</html>

Das wäre eine Liste wo die überbegriffe Essen,Trinken sind und die unterordnenten Begriffe Pizza bzw. Wasser sind.

Das müssen wir nun noch stylen, sodass es zu einem richtigen Menü wird.
Dazu fügen wir einfach diesen Code in den HEAD Teil unter den MetaTags :

PHP Code:


			
                <style type="text/css">
/* <![CDATA[ */
#nav {
 margin: 15px 0;
 padding: 0 20px;
 height: 30px;
 background: #ccc;
 list-style-type: none;
}
#nav li {
 float: left;
 position: relative;
 list-style-type: none;
}
#nav li.open, #nav li:hover {
&nbsp; background: #bbb;
&nbsp; }
#nav li a {
 display: block;
 padding: 5px 25px;
 line-height: 20px;
 color: #444;
 text-decoration: none;
}
#nav li ul {
&nbsp; display: none;
&nbsp; position: absolute;
&nbsp; top: 30px;
&nbsp; left: 0;
&nbsp; width: 130px;
&nbsp; padding: 0 0 5px;
&nbsp; background: #bbb;
&nbsp; border: solid #bbb;
&nbsp; }
#nav li:hover ul {
&nbsp; display: block;
&nbsp; }
#nav li ul li {
&nbsp; float: none;
&nbsp; }
#nav li ul li a {
&nbsp; padding: 8px 10px;
&nbsp; display: inline-block;
&nbsp; }
#nav li ul li a {display: block;}
#nav li ul li a:hover {
&nbsp; background: #444;
&nbsp; color: #bbb;
&nbsp; }
&nbsp; /* ]]> */
</style>

So dass,wäre das Style... Nun funktioniert es aber noch nicht... Damit es funktioniert müssen wir erstmal das über unsere Liste schreiben :

HTML Code:

<ul id="nav">

Und dashier dadrunter :

HTML Code:

</ul>

Und dass wars schon! Wenn ihr noch was bearbeiten wollt einfach in den CSS Code (style) die Sachen bearbeiten und dann geht alles.

Credits : R.o.x

Avarius210 · 10/05/2010, 15:25

Dir ist klar, dass du deinen Code nicht erklärst und es deswegen kein richtiges Tutorial ist?

Der Code is schön und gut, aber für Anfänger leider nich verständlich.

|R.o.x| · 10/05/2010, 16:39

Dann ist es ein Code Snippet, aber der Code müsste sich von selbst erklären.

Avarius210 · 10/06/2010, 21:08

Der HTML-Code schon, aber dein CSS-Snippet eben nicht

|R.o.x| · 10/08/2010, 21:56

Stimmt eigentlich :S .
Naja wenn ich Zeit habe überarbeite ich es

fabili · 11/21/2011, 21:25

Quote:

Originally Posted by Avarius210

Dir ist klar, dass du deinen Code nicht erklärst und es deswegen kein richtiges Tutorial ist?

Der Code is schön und gut, aber für Anfänger leider nich verständlich.

Also wenn man aus diesem Code nichts lesen kann, dan sollte man sich zuerst mit etwas einfacherem befassen..

Gibt es mehr viele gut und mehr als genug nicht so gute seiten.

Versuche es mal bei:
HTML / CSS / PHP

'** / ** / ** / Java und mehr

ODer geh mal in Yotube und such ist auch gut..

NotEnoughForYou · 11/23/2011, 21:01

naja der Code ist jetzt nicht der beste, aber hilft vlt. paar.