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 :
So nun erstellen wir mal eine Liste, wodurch das Menü erstellt wird :
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 :
So dass,wäre das Style... Nun funktioniert es aber noch nicht... Damit es funktioniert müssen wir erstmal das über unsere Liste schreiben :
Und dashier dadrunter :
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
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>
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 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 {
background: #bbb;
}
#nav li a {
display: block;
padding: 5px 25px;
line-height: 20px;
color: #444;
text-decoration: none;
}
#nav li ul {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 130px;
padding: 0 0 5px;
background: #bbb;
border: solid #bbb;
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
float: none;
}
#nav li ul li a {
padding: 8px 10px;
display: inline-block;
}
#nav li ul li a {display: block;}
#nav li ul li a:hover {
background: #444;
color: #bbb;
}
/* ]]> */
</style>
HTML Code:
<ul id="nav">
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
