Basic-DHTML Menu erweitern

Status
Nicht offen für weitere Antworten.

Devi19991

Grünschnabel
Hallo ihr!

Ich brauch mal eure Hilfe hab vor paar Tagen mein eigenes sozusagenes Projekt "Homepagebau" begonnen gehabt nun hab ich eben vor kurzem dieses Tutorial hier gefunden was mich mit dem Aufklappen des Navigationsmenüs weitergebracht hat, aber ich hab hier dennoch eine Frage.

Das Untermenü wird ja unter dem Menü aufgeklappt ist es möglich das die Aufklappung anstatt das er es mir hinunter aufklappt, rechts daneben (untereinander) erscheint und die untermenü punkte auflistet? Wenn ja wie funktioniert das bzw. was muss im Code dann geändert werden?

ich bin dankbar für jede mögliche Hilfe
 
Hi,

mit einer Re-Strukturierung des bestehenden HTML-Codes ist dies überhaupt kein Problem, und eine reine Frage der CSS-Formatierung:

Code:
<ul id="nav">
    <li><a href="#" onclick="show('cat1')">Category 1</a>
           <ul id="cat1" style="display:none">
               <li><a href="#">Sub 1.1</a></li>
               <li><a href="#">Sub 1.2</a></li>
               <li><a href="#">Sub 1.3</a></li>
           </ul>
    </li>
    <li><a href="#" onclick="show('cat2')">Category 2</a>
           <ul id="cat2" style="display:none">
               <li><a href="#">Sub 2.1</a></li>
               <li><a href="#">Sub 2.2</a></li>
               <li><a href="#">Sub 2.3</a></li>
           </ul>
    </li>
</ul>
Code:
* {
margin:0;
padding:0;
}
ul#nav, ul#nav ul {
list-style:none;
}
ul#nav li {
position:relative;
}
ul#nav ul {
position:absolute;
top:0;
left:200px;
}
mfg Maik
 
müsst ich dann nicht die komplette hp umbauen? ich hab die hp mit divs gebaut ...

und ich hab das jez mal probiert aber da öffnet sich momentan gar nichts ... :confused:
 
Zumindest das Menü müsstest du wie vorgeschlagen umbauen, den Rest deiner Homepage kannst du so belassen.

Die Submenüs dieses Menüs öffnen sich bei mir genauso, wie die im Tutorial, denn am Script-Code wurde ja nichts verändert.

mfg Maik
 
also ich weiß nich ... vlt bin ich zu dumm dafür ... hab dir den html code mal per pn geschickt ... aber bei mir t es nit xX

Devi19991 | PN hat gesagt.:
ich glaub ich bin zu blöd i-wie dafür ... ich schick dir mal den html code und css per pn rüber ...

also hier mal der html code wie ich jetzt deinen vorschlag eingefügt hab:

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">
<head>
<title>Devils Hells</title>
<link rel="stylesheet" href="stylesheet/styles.css" type="text/css">
<style type="text/css">
<!--
.Stil7 {
	font-size: 12px;
	color: #FF0000;
}
.Stil8 {font-size: 11px}

-->
</style>
</head>

<script type="text/javascript">
<!--

function show(divid) {
d=document;
d.getElementById("Start").style.display="none";
d.getElementById("Music").style.display="none";

d.getElementById(divid).style.display="inline";

}
//-->
</script>
<body bgcolor="#000000">
<div id="logo_left"><img src="images/Devi.gif" align="middle" /></div>
<div id="logo_right"><div id="logo_right_inhalt">
  <p><center>Devi say's hello</center></p>
  <p><center><span class="Stil7">Alpha Status</span></center></p>
</div>
</div>
<div id="left-side">
  <div id="left-side_inhalt">
  <div align="left"> 
	<ul id="nav">
    <li><a href="#" onclick="show('Start')">Die Unterwelt</a>
           <ul id="Start" style="display:none">
               <li><a href="index.html">&middot; Devils Hell</a></li>
               <li><a href="Biografie.html">&middot; Biografie</a></li>
               <li><a href="Kontakt.html">&middot; Kontakt</a></li>
               <li><a href="http://www.grafikgaestebuch.de/ggbook.php?userid=92754045" target="_blank">&middot; Gästebuch</a></li>
           </ul>
    </li>
    <li><a href="#" onclick="show('Music')">Music</a>
          <ul id="Music" style="display:none">
               <li><a href="#">Sub 2.1</a></li>
               <li><a href="#">Sub 2.2</a></li>
               <li><a href="#">Sub 2.3</a></li>
          </ul>
    </li>
	</ul>
</div></div></div>
<div id="body">
<div id="body_inhalt" class="bodyText">
<div id="body_inhalt_überschrift" class="pageName"><p>Herzlich Willkommen auf Meiner Website!</p></div>
<img src="images/smoker.gif" align="middle" />
<p class="Stil8">Eine Einzige</p>
<p><img src="images/baustelle.gif" align="middle" /></p>
<p><span class="Stil7">Es wird vorr&uuml;bergehend der Alpha Status aufgerufen. </span><br />
</p>
</div></div>
<div id="right-side"><div id="right-side_inhalt" class="subHeader"></div></div>
<div id="footer"></div>
</body>
</html>

den css code liefer ich nach wenn man ihn braucht, wills nur nicht direkt ins forum stellen ...
 
Abgesehen davon, dass der JS-Code im Dokumentheader (<head> ... </head>) aufgerufen wird, kann ich keine Probleme beim Öffnen der Submenüs feststellen.

mfg Maik
 
oh ich hab nen code teil im css file vergessen einzufügen ... darum ging es dann auch nicht und danke für de aufmerksamkeit ^^ (bzgl header) habs sofort geändert :)
 
Dann dürfte es beim Öffnen der Submenüs lediglich an ihrer gewünschten Positionierung gescheitert sein, denn mein vorgestelltes Stylesheet ist nur hierfür zuständig, und hat keinen Einfluß auf die Funktionalität des Javascripts zum Öffnen und Schließen der Untermenüpunkte ;)

Und achte doch bitte in deinen zukünftigen Beiträgen auf die Netiquette (Nr.15) bzgl. der Groß- und Kleinschreibung, wie du es in deinem ersten Beitrag unter Beweis gestellt hast - vielen Dank! :)

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück