Drop-Down Menü

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Drop-Down Menü »

fm94

Mitglied

Dabei seit: 18.08.2008

Beiträge: 33

Donnerstag, 9. April 2009, 21:00

Hi @ll,

ich brauche für eine neue Webseite ein Drop-Down Menü.
Die Seite ist wie in der folgenden Zeichnung aufgebaut. Das Dropdown-Menü soll unterhalb des mit der Maus berührten Menüpunktes erscheinen und weitere Punkte enthalten (Links als Grafiken). Was noch interessant ist, das Menü darf sich von dem Bild nicht stören lassen, muss drüber gehn (sh. Zeichnung 2)

Zeichnung 1 (ohne Dropdown):

Zeichnung 2 (mit Dropdown):

Würde mich über Antwort, evtl. Codebeispiel freuen. Bitte nicht schreiben "Google ist dein Freund" oder dergleichen...

Mein System:
AMD Phenom II X4 955 @4* 3,2Ghz
Gigabyte MA770T
MSI HD4890 1024MB
2* 2048MB DDR3 Corsair RAM
Windows 7 Home Premium / Ubuntu 10.04

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »fm94« (9. April 2009, 21:00)

ospx

Kaiser

Dabei seit: 11.11.2006

Beiträge: 1 131

Donnerstag, 9. April 2009, 21:05

schau mal hier: http://www.cssplay.co.uk/menus/

fm94

Mitglied

Dabei seit: 18.08.2008

Beiträge: 33

Donnerstag, 9. April 2009, 22:32

Danke.
Das hier wäre genau das richtige, ich verstehe nur den Code nicht ganz bzw. kann ihn nicht vom Rest der Seite unterscheiden, da es ja nicht so etwas wie einen Downloadcode für das Menü gibt.
Kann mir dieses Menü evtl. jemand genauer erklären?

Mein System:
AMD Phenom II X4 955 @4* 3,2Ghz
Gigabyte MA770T
MSI HD4890 1024MB
2* 2048MB DDR3 Corsair RAM
Windows 7 Home Premium / Ubuntu 10.04

zoryfl

Moderator

Dabei seit: 14.01.2003

Beiträge: 2 766

Donnerstag, 9. April 2009, 22:40

Naja, wenn du dich z.B. für dieses dropdown menu entscheiden würdest (http://www.cssplay.co.uk/menus/dd_valid.html) dann sind unten bei den "Updates" vom Authos 2 Links für die zwei *.css Dateien.

Den Link den dir ospx gegeben hat, führt dich nicht direkt zu einem Menü, sondern zu einer Auswahl der selben. Falls du das Menü von cssplay gemeint hast- das bekommst du sicher (noch) nicht umsonst

http://zoryfl.wmw.cc

Yango ec.

unregistriert

Freitag, 10. April 2009, 09:58

HTML

<style type="text/css" media="screen"> 
<!-- 
body 
{ 
font-family: Verdana, sans-serif; 
font-size: 14px; 
overflow: auto; 
padding: 10px; 
margin: 0px; 
} 

ul, li 
{ 
list-style-type: none; 
padding: 0px; 
margin: 0px; 
} 

li a 
{ 
padding-right: 20px;padding-top: 5px; 
} 

div.menu 
{ 
position: absolute; 
z-index: 3; 
top: 124px; 
left: 50%; 
margin-left:-405px; 
width:905px; 
} 

.menu li 
{ 
width: 160px; 
float: left; 
} 

.menu a 
{ 
border: 0px solid #000000; 
background-color: #000000; 
background-image: url(URL); 
text-decoration: none; 
text-align: center; 
font-weight: bold; 
cursor: pointer; 
margin: 0px; 
display: block; 
height: 23px; 
color: #00CCFF; 
} 

.menu a:hover 
{ 
background-color: #00CCFF; 
background-image: url(URL); 
} 

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 
{ 
font-size: 14px; 
display: none; 
width: 160px; 
float: left; 
} 

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a 
{ 
font-weight: bold; 
padding-top: 5px; 
border-top: 0px; 
cursor: pointer; 
color: #FFFFFF; 
} 
//--> 

</style> 

<script type="text/javascript"> 
<!-- 
function montre(id) 
{ 
with (document) 
{ 
if (getElementById) 
getElementById(id).style.display = 'block'; 
else if (all) 
all[id].style.display = 'block'; 
else 
layers[id].display = 'block'; 
} 
} 

function cache(id) 
{ 
with (document) 
{ 
if (getElementById) 
getElementById(id).style.display = 'none'; 
else if (all) 
all[id].style.display = 'none'; 
else 
layers[id].display = 'none'; 
} 
} 
//--> 
</script> 
<div class="menu"> 
<li><a href="LINK1"> TITEL1</a> </li> 
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> TITEL2</a> 
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2"> 
<li><a href="UNTERLINK2.3">Titel</a></li> 
<li><a href="UNTERLINK2.3">Titel</a></li> 
<li><a href="UNTERLINK2.4">Titel</a></li> 
<li><a href="UNTERLINK2.5">Titel</a></li> 
<li><a href="UNTERLINK2.6">Titel</a></li> 
<li><a href="UNTERLINK2.7">Titel</a></li> 
<li><a href="UNTERLINK2.8">Titel</a></li> 
<li><a href="UNTERLINK2.9">Titel</a></li> 
</ul> 
</li> 
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> TITEL3</a> 
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3"> 
<li><a href="UNTERLINK3.2">Titel</a></li> 
<li><a href="UNTERLINK3.3">Titel</a></li> 
<li><a href="UNTERLINK3.4">Titel</a></li> 
<li> </li> 
</ul> 
</li> 
<li><a href="LINK4"> TITEL4</a></li> 
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a> 
<ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5"> 
<li><a href="LINK5.1">Titel</a></li> 
<li><a href="LINK5.2">Titel</a></li> 
</ul> 
</li> 
</div>

Drop-Down Menü

HTML

Ähnliche Themen