kostenloser Webspace werbefrei: lima-city

Menüstruktur wie bei Windows

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

background base bereich dom einstiegsseite explorer fram grafik gucken herzenslust klicken konsortium margin men none struktur surfen textformatierung transitional unterteilung
  1. Autor dieses Themas

    d**e

    16:46, 12.7.2005
    Hallo

    Ich w?rde in meine HP gerne eine verschachtelte Untermen?struktur einbauen, aber finde einfach keine L?sung! Es soll so sein, wie bei Windows, wenn man rauff?hrt(oder draufklickt), dann erscheint eine neue Unterteilung!

    Button1 -->klick--> Button2
    Button3

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. m**l

    5:48, 13.7.2005
    ja das geht mit dhtml:

    index.htm

    <!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">-->
<!--DOCTYPE auskommentiert wegen nicht standardkonformer Angaben zu frameset-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Explorer-Men?</title>
</head>
<frameset cols="300,*" border="0" frameborder="0" framespacing="0">
 <frame src="menue.htm" name="Menue" frameborder="0">
 <frame src="titel.htm" name="Daten" frameborder="0">
 <noframes>Keine Frames: <a href="altnavigation.htm">Alternativnavigation</a></noframes>
</frameset>
</html>


    formate.css

    body { background-color:#FFFFFF; }
h1,h2,h3,p,ul,ol,li,td,th { font-family:Verdana,sans-serif; }
h1 { font-size:24px; color:#D00000; margin-top:0px; }
h2 { font-size:22px; color:#D00000; }
h3 { font-size:18px; color:#D00000; }
p,ul,ol,li,td,th { font-size:13px; color:#000000; 
                   line-height:19px; }
a:link, a:visited { color:#D00000; text-decoration:none; }
a:hover, a:active { color:#D00000; 
                    text-decoration:underline; }
a.nav { font-family:Verdana,sans-serif; 
        font-size:11px; font-weight:bold; }
a.nav:link, a.nav:visited { color:#000000; 
                            text-decoration:none; }
a.nav:hover, a.nav:active { color:#D00000; 
                            text-decoration:none; }


    titel.htm

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="formate.css" type="text/css">
<style type="text/css">
#Seite { position:absolute; top:10px; left:10px; }
</style>
<title>Titel</title>
</head>
<body>
<div id="Seite">
<h1>Willkommen!</h1>
<p>W?hlen Sie links einen Eintrag aus und surfen Sie nach Herzenslust!</p>
</div>
</body>
</html>


    menue.htm

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="formate.css" type="text/css">
<style type="text/css">
#Navigation { position:absolute; top:10px; left:10px; }
</style>
<script type="text/javascript">
<!--
var Menue = new Array(
 "dok.gif",0,"Homepage","titel.htm","block",
 "[Ordner]",0,"SELFHTML","#","block",
 "[Ordner]",1,"HTML","#","none",
 "[Ordner]",2,"Kopfdaten","#","none",
 "dok.gif",3,"Meta-Tag","http://selfhtml.teamone.de/html/kopfdaten/meta.htm","none",
 "dok.gif",3,"Base-Tag","http://selfhtml.teamone.de/html/kopfdaten/basis.htm","none",
 "[Ordner]",2,"Textformatierung","#","none",
"dok.gif",3,"Listen","http://selfhtml.teamone.de/html/text/listen.htm","none",
 "dok.gif",3,"div-Bereiche","http://selfhtml.teamone.de/html/text/bereiche.htm","none",
"dok.gif",3,"Zeilenumbr?che","http://selfhtml.teamone.de/html/text/zeilenumbruch.htm","none",
 "[Ordner]",1,"JavaScript","#","none",
 "dok.gif",2,"Einf?hrung in JavaScript","http://selfhtml.teamone.de/javascript/intro.htm","none",
 "dok.gif",2,"JavaScript-Objektreferenz","http://selfhtml.teamone.de/javascript/objekte/","none",
 "[Ordner]",0,"Diverses","#","block",
 "dok.gif",1,"Google","http://www.google.de/","none",
 "dok.gif",1,"Yahoo","http://www.yahoo.de/","none",
 "dok.gif",1,"Heise-Ticker","http://www.heise.de/newsticker/","none",
 "dok.gif",1,"W3-Konsortium","http://www.w3.org/","none",
 "dok.gif",1,"DOM-Einstiegsseite","http://www.w3.org/DOM/","none",
 "dok.gif",1,"Digital Diary","http://claudia-klinger.de/digidiary/","none",
 "[Ordner]",0,"?ber den Autor","#","block",
 "dok.gif",1,"Stefan M?nz","http://selfaktuell.teamone.de/people/stefan.htm","none"
);
var MenueDivs = new Array();

var IconBasis = "./"
var IconOrdnerzu = "oz.gif";
var IconOrdnerauf = "oa.gif";
var IconBreite = 15;
var IconHoehe = 13;
var EintragBreite = 170;
var EintragHoehe = 18;


function Init() {
 if(document.getElementById)
  Menue_anzeigen();
 else
  self.location.href = "altnavigation.htm";
}

function Menue_anzeigen() {
 document.getElementById("Navigation").innerHTML = "";
 var j = 0;
 var Rechtsversatz = 0;
 var Untenversatz = 0;
 for(var i = 0; i < Menue.length; i += 5) {
  MenueDivs[j] = document.createElement("div");
  MenueDivs[j].style.position = "absolute";
  MenueDivs[j].style.whiteSpace = "nowrap";
  MenueDivs[j].style.cursor = "pointer";
  MenueDivs[j].style.display = Menue[i+4];
  if(Menue[i] == "[Ordner]" || Menue[i] == IconOrdnerzu)
   MenueDivs[j].innerHTML = " <a class=\"nav\" href=\"#\" onClick=\"Aufklappen(" + i + ")\"><img src=\"" + IconBasis + IconOrdnerzu + "\" width=\"" + IconBreite + "\" height=\"" + IconHoehe + "\" alt=\"Ordner\" align=\"bottom\" border=\"0\">&nbsp;" + Menue[i+2] + "</a>";
  else if(Menue[i] == IconOrdnerauf)
   MenueDivs[j].innerHTML = " <a class=\"nav\" href=\"#\" onClick=\"Zuklappen(" + i + ")\"><img src=\"" + IconBasis + IconOrdnerauf + "\" width=\"" + IconBreite + "\" height=\"" + IconHoehe + "\" alt=\"Ordner\" align=\"bottom\" border=\"0\">&nbsp;" + Menue[i+2] + "</a>";
  else
   MenueDivs[j].innerHTML = "<a class=\"nav\" href=\"" + Menue[i+3] + "\"><img src=\"" + IconBasis + Menue[i] + "\" width=\"" + IconBreite + "\" height=\"" + IconHoehe + "\" alt=\"Link\" align=\"bottom\"  border=\"0\">&nbsp;" + Menue[i+2] + "</a>";
  if(Menue[i+4] == "block") {
   MenueDivs[j].style.top = Untenversatz + "px";
   Untenversatz += EintragHoehe;
   MenueDivs[j].style.left = (Menue[i+1] * IconBreite) + "px";
   MenueDivs[j].style.width = EintragBreite + "px";
   MenueDivs[j].style.height = EintragHoehe + "px";
   document.getElementById("Navigation").appendChild(MenueDivs[j]);
  }
  j += 1;
 }
}

function Aufklappen(n) {
 var Level = Menue[n+1];
 var i = n + 5;
 if(Menue[n] == "[Ordner]" || Menue[n] == IconOrdnerzu)
  Menue[n] = IconOrdnerauf;
 while(Menue[i+1] > Level) {
  if(Menue[i+1] == Level + 1)
   Menue[i+4] = "block";
  i += 5;
 }
 Menue_anzeigen();
}

function Zuklappen(n) {
 var Level = Menue[n+1];
 var i = n + 5;
 if(Menue[n] == IconOrdnerauf)
  Menue[n] = IconOrdnerzu;
 while(Menue[i+1] > Level) {
  Menue[i+4] = "none";
  i += 5;
 }
 Menue_anzeigen();
}
-->
</script>
<base target="Daten">
<title>Explorer-Men?</title>
</head>
<body onLoad="Init()">
<div id="Navigation">
<noscript>Kein JavaScript: <a href="altnavigation.htm">Alternative Navigation</a></noscript>
</div>
</body>
</html>


    altnavigation.htm

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="formate.css" type="text/css">
<style type="text/css">
#Navigation { position:absolute; top:10px; left:10px; }
.Ebene0 { margin-left:0px; white-space:nowrap; }
.Ebene1 { margin-left:15px; white-space:nowrap; }
.Ebene2 { margin-left:30px; white-space:nowrap; }
.Ebene3 { margin-left:45px; white-space:nowrap; }
.Ebene4 { margin-left:60px; white-space:nowrap; }
.Ebene5 { margin-left:75px; white-space:nowrap; }
</style>
<base target="Daten">
<title>Explorer-Men?</title>
</head>
<body>
<div id="Navigation">
<div class="Ebene0"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="titel.htm">Homepage</a></div>
<div class="Ebene0"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a1">SELFHTML</a></div>
<div class="Ebene1"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a2">HTML</a></div>
<div class="Ebene2"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a3">Kopfdaten</a></div>
<div class="Ebene3"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/html/kopfdaten/meta.htm">Meta-Tag</a></div>
<div class="Ebene3"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/html/kopfdaten/basis.htm">Base-Tag</a></div>
<div class="Ebene2"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a4">Textformatierung</a></div>
<div class="Ebene3"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/html/text/listen.htm">Listen</a></div>
<div class="Ebene3"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/html/text/bereiche.htm">div-Bereiche</a></div>
<div class="Ebene3"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/html/text/zeilenumbruch.htm">Zeilenumbr?che</a></div>
<div class="Ebene1"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a5">JavaScript</a></div>
<div class="Ebene2"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/javascript/intro.htm">Einf?hrung in JavaScript</a></div>
<div class="Ebene2"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfhtml.teamone.de/javascript/objekte/">JavaScript-Objektreferenz</a></div>
<div class="Ebene0"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a6">Diverses</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://www.google.de/">Google</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://www.yahoo.de/">Yahoo</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://www.heise.de/newsticker/">Heise-Ticker</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://www.w3.org/">W3-Konsortium</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://www.w3.org/DOM">DOM-Einstiegsseite</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://claudia-klinger.de/digidiary/">Digital Diary</a></div>
<div class="Ebene0"><img src="oa.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" name="a7">?ber den Autor</a></div>
<div class="Ebene1"><img src="dok.gif" width="15" height="13" border="0" alt="">&nbsp;<a class="nav" href="http://selfaktuell.teamone.de/people/stefan.htm">Stefan M?nz</a></div>
</div>
</body>
</html>


    Wenn du die Grafiken daf?r auch noch haben willst musst du dich melden:biggrin:

  4. s********r

    7:58, 13.7.2005
    Guck dir doch mal das an:
    http://sebigisler.xardas.lima-city.de/menubar.html

    der code ist jetzt ein bisschen zu lange f?r dieses forum =) aber du kannst ja dne quelltext angucken, dann weisst du wie dus machen musst!

    PS. Dieser Code habe ihc von http://www.jswelt.de

    sebigisler
  5. Autor dieses Themas

    d**e

    10:15, 13.7.2005
    Danke euch! Ihr habt mir sehr geholfen!
    Falls ich mich revanchieren kann, dann sagt es!
  6. Autor dieses Themas

    d**e

    10:15, 13.7.2005
    Danke euch! Ihr habt mir sehr geholfen!
    Falls ich mich revanchieren kann, dann sagt es!

  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!