Dropdown Menü Problem
Chris
- javascript
0 Cheatah0 Chris
1 Gunnar Bittersmann
Halli hallo Leute,
Ich hab ein Problem mit meinem Dropdownmenu.
Ich habe mir eines angeschaut, siehe "http://javascript-array.com/scripts/simple_drop_down_menu/".
Eingebaut alles ok.
Doch nun will ich es über ein Bild legen, doch das klappt garnicht. Habe es mit Z-index im CSS versucht aber ohne richtigen Erfolg. Die ausklappenden Felder sind vor dem Bild, aber die Menü Felder selbst nicht :(.
Kann mir Jemand helfen?
Grüße Chris
Hi,
Kann mir Jemand helfen?
nein. Grund: Aufgrund Deiner Beschreibung ist das Problem nicht reproduzierbar. Ein nicht reproduzierbares Problem ist ein nicht lösbares Problem.
Cheatah
ok.. sorry dann versuch ich das mal genau darzustellen.
Also:
Für das Menu benutze ich folgenden Code:
HTML:
<html>
<body>
<div class="Head1">
<img src="Head1.png" height="210px" width="1000px" >
</div>
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
</body>
</html>
CSS:
.Head1{
position:absolute;
left:0px;
top:45px;
z-index:1;
}
#sddm
{ margin: 0;
padding: 0;
z-index: 2}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
Javascript:
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
Soo nun wenn man das alles eingefügt hat hat man ein Menu oben links im Bildschirm. Problem ist jetzt das ich das Menu nicht verschieben kann.
Habs im CSS versucht mit, top:50px; usw. kein Erfolg.
Wenn man es im HTML einfach mit <br> verschiebt, habe ich das Problem das es hinter einem Bild liegt und sich mit dem Z-index nicht vor das Bild verschieben lässt.
Bild ist hier zu finden:
http://img91.imageshack.us/my.php?image=head1vk7.png
Ich hoffe jetzt gehts besser
Grüße Chris
@@Chris:
Ich hab ein Problem mit meinem Dropdownmenu.
Ja. Und zwar ein viel bedeutsameres als das, was du hier ansprichst.
Ich habe mir eines angeschaut, siehe "http://javascript-array.com/scripts/simple_drop_down_menu/".
Eingebaut alles ok.
Nein, nichts OK. Das Menü ist wertlos für Clients, die kein JavaScript ausführen. Und das sind nicht nur Browser etlicher menschlicher Besucher, sondern auch Besucher, denen du bestimmt Zugang zu deinen Inhalten ermöglichen willst. [DIALOG-ROBOT]
Eine Navigation muss ohne JavaScript möglich sein.
Zur Realisierung siehe <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten> [SELFHTML] und CSS only drop-down menu [Stu Nicholls].
Live long and prosper,
Gunnar