nicht angemeldet
DHTML oder JS für mein Menü
Hi Leute,
ich habe meine Idee (siehe unten) weiter ausgebaut. Nun enthält sie schon ein DHTML-Menü. Bin ich damit aber noch nicht zu frieden. Ich will, dass die Anstrache im submenu direkt unter denen im menu stehen.
Ich weiß, dass ich das System dafür total umbauen muss. Dabei dachte ich daran, die einzelnen unterpunkte mit seperaten Ids auszustatten und Sie via css zu platzieren (vererst mit visibility:hidden;). Ein Javascript soll das dann, je nach Gebrauch ändern.
Das ist aber leider mit meinem js Können nicht umsetztbar und ih schätze, das währen viel zu viele Funktionen...
Aber dafür wurde ja diese Forum eingerichtet (um wissen auszutauschen) undich hoffe, dass ihr mir helfen könnt...
Danke
Hendrik
Hier meine Studie (aktuellsster Stand):
<html>
<head>
<title>Studie</title>
<style type="text/css">
body {
color:#004b8c;
background-color:#888;
padding:0px;
margin:0px;
}
.menu {
color:#004b8c;
position:fixed;
background-image:url(http://www.fortunecity.de/parkalleen/parkallee/612/back.jpg);
top:0px;
left:0px;
width:100%;
padding:3px;
height:20px;
border-bottom-color:#004b08c;
border-bottom-style:solid;
border-bottom-width:1px;
}
.menu span {
background-color:transparent;
font-family:verdana;
font-size:18px;
word-spacing:4px;
}
.submenu {
color:#004b8c;
position:fixed;
background-image:url(http://www.fortunecity.de/parkalleen/parkallee/612/back.jpg);
top:27px;
left:0px;
width:100%;
padding:3px;
height:20px;
border-bottom-color:#004b08c;
border-bottom-style:solid;
border-bottom-width:1px;
}
.submenu span {
background-color:transparent;
font-family:verdana;
font-size:18px;
word-spacing:4px;
}
</style>
</head>
<body>
<div class="menu">
<span>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='StartSeite'">start</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='Guestbook'">guestbook</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='Chat'">chat</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='forum'">forum</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='downloads'">downloads</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='games'">games</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='links'">links</a>
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='über mich'">über mich
<a onMouseOver="document.getElementById('submenu').firstChild.nodeValue='email'">email</a>
</span>
</div>
<div class="submenu">
<span id="submenu">start guestbook chat forum downloads games links über mich email</span>
</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
-
Hi,
.menu {
color:#004b8c;
position:fixed;fixed wird von den 'alten' Browsern nicht unterstützt soviel ich weiß. N4.x und IE4 haben da Probleme mit.
Aber du kannst das ganze auch in etwa so aufbauen:
CSS:
.menu {position:absolute; left:100px top:100px visibility:hidden}
Je nachdem wo dein Menü steht, die Werte kannst du mit JS auch an die aktuelle Fenstergröße anpassen falls notwendig.
HTML:
<a href="etwas.html" onMouseover="ShowMenu(1)" onMouseout="HideMenu(1)">Hauptmenüpunkt</a>
<div id="menu1" class="submenu">
Submenüpunkt1
Submenüpunkt2
Submenüpunkt3
</div>JS:
ShowMenu(no)
{
doucment.getElementById("menu"+no).style.visibility = 'visible';
}HideMenu(no)
{
doucment.getElementById("menu"+no).style.visibility = 'hidden';
}Mit HideMenu musst du allerdings aufpassen, da wenn im Submenü keine BIlder stehn, und der Abstand zum Hauptmenü Link größer als 1px ist, das Menü wieder geschlossen wird.
Kannst das aber mit einem Timeout regeln, das der User etwas Zeit hat um übers Menü zu fahren und dann ShowMenu noch mal bei onMouseover über Submenü aufrufen.Gruß
ueps
P.s: auf meiner Seite ist das Menü nach diesem Schema aufgebaut,
aber achtung: noch nicht Mozialla fähig! Da kein DOM verwendet wie hier.-
Super Idee, Danke Dafür.
Aber Sie funzt leider nicht, ich habe auch schon probiert alle schreib fehler zu beseitigen aber ich habe nicht so ein geschultes auge.
Die Idee ist Spitze aber könntest du dir das noch mal anschauen....:menu.html:
<html>
<head>
<title></title>
<link rel="stylesheet" href="menu.css" type="text/css">
<script type="javascript">
function ShowMenu(no)
{
document.getElementById("menu" + no).style.display = 'block';
}function HideMenu(no)
{
document.getElementById('menu' + no).style.display = 'none';
}
</script>
</head>
<body><div class="title">
<span>
<a onMouseOver="ShowMenu(1);">start</a>
<a>guestbook</a>
<a>chat</a>
<a>forum</a>
<a>downloads</a>
<a>games</a>
<a>links</a>
<a>über mich
<a>email</a>
</span>
</div><div class="subtitle">
<span id="menu1">start</span>
<span id="menu2">guestbook</span>
<span id="menu3">chat</span>
<span id="menu4">forum</span>
<span id="menu5">downloads</span>
<span id="menu6">games</span>
<span id="menu7">links</span>
<span id="menu8">über mich</span>
<span id="menu9">email</span>
</div><br><br><br><br><br><br><br><br><br><br>
</body>
</html>menu.css
body {
color:#004b8c;
background-color:#888;
padding:0px;
margin:0px;
}
.title {
color:#004b8c;
position:fixed;
background-image:url(back.jpg);
top:0px;
left:0px;
width:100%;
padding:3px;
height:20px;
border-bottom-color:#004b08c;
border-bottom-style:solid;
border-bottom-width:1px;
}
.title span {
background-color:transparent;
font-family:verdana;
font-size:18px;
word-spacing:4px;
}
.subtitle {
color:#004b8c;
position:fixed;
background-image:url(back.jpg);
top:27px;
left:0px;
width:100%;
padding:3px;
height:20px;
border-bottom-color:#004b08c;
border-bottom-style:solid;
border-bottom-width:1px;
}
.subtitle span{
font-family:verdana;
font-size:18px;
}#menu1{
position:fixed;
top:27px;
left:0px;
display:none;
}
.subtitle #menu2{
position:fixed;
top:27px;
left:50px;
visibility:hidden;
}
.subtitle #menu3{
position:fixed;
top:27px;
left:150px;
visibility:hidden;
}
.subtitle #menu4{
position:fixed;
top:27px;
left:200px;
visibility:hidden;
}
.subtitle #menu5{
position:fixed;
top:27px;
left:260px;
visibility:hidden;
}
.subtitle #menu6{
position:fixed;
top:27px;
left:360px;
visibility:hidden;
}
.subtitle #menu7{
position:fixed;
top:27px;
left:430px;
visibility:hidden;
}
.subtitle #menu8{
position:fixed;
top:27px;
left:500px;
visibility:hidden;
}
.subtitle #menu9{
position:fixed;
top:27px;
left:600px;
visibility:hidden;
}-
Super Idee, Danke Dafür.
Bitte.
Aber Sie funzt leider nicht, ich habe auch schon probiert alle schreib fehler zu beseitigen aber ich habe nicht so ein geschultes auge.
Ganz einfacher Fehler:
<script type="javascript">
das ist Falsch! so gehts
<script type="text/javascript">
Und schon funktionierts.
Gruß
ueps
-
-