Aufklapp-Menu

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Mr.Clear, 29. März 2006 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. März 2006
    Hi Leutz =)

    Hat jemand für mich schnell ein gutes Aufklapp-Menu wie hier:
    http://www.gigabyte.de/
    parat?
    Wär goil, denn ich find kein gscheits im inet

    Mfg =)
    PS: hab shcon die 10ner hervorgeholt um fleißg zu verteilen ^^
     
  3. 29. März 2006
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    also ich habe da mal was


    Code:
    <html>
<head>
<title>Verschachtelte Auswahllisten (Menüstruktur) definieren</title>
</head>
<body>

<h1>W&auml;hlen Sie Ihren Lieblingsnamen!</h1>

<form action="select_optgroup.htm">
 <p>Zur Auswahl stehen:</p>
 <p>
 <select name="Namen" size="6">
 <optgroup label="Namen mit A">
 <option label="Anna">Anna</option>
 <option label="Achim">Achim</option>
 <option label="August">August</option>
 </optgroup>
 <optgroup label="Namen mit B">
 <option label="Berta">Berta</option>
 <option label="Barbara">Barbara</option>
 <option label="Bernhard">Bernhard</option>
 </optgroup>
 <optgroup label="Namen mit C">
 <option label="Caesar">Caesar</option>
 <option label="Christiane">Christiane</option>
 <option label="Christian">Christian</option>
 </optgroup>
 </select>
 </p>
</form>

</body>
</html>
    Sieht dann so aus

    Bild
    {img-src: http://de.selfhtml.org/html/formulare/anzeige/listenstruktur.png}
     
  4. 29. März 2006
    danke für deine bemühungen (is ein 10er wert ;-) )
    aber des wär ja nun eher ein Formular,
    ich brauch aber was, bei dem man draufklickt, und ein menu aufklappt.

    Is jedoch auch meien schuld, hab nicht richtig verlinkt 8o
     
  5. 29. März 2006
    also suchst du so was wie da gemacht?
     
  6. 29. März 2006
    Wenn ich das jetzt gerade richtig aus dem Quelltext gelesen habe, dann ist das Java. Ich kann dir sowas zwar nicht machen, aber du kannst das mit Templates machen, da gibts eigentlich genug davon free im Netz. Wenn du dich für solche Template Sachen interessierst, dann kann ich dir Mambo / Limbo empfehlen. Musst mal bei Google danach suchen...

    MfG
    Bernie
     
  7. 29. März 2006
    habe da was für dich

    Einfaches-Beispiel

    Code:
    
<form>
 <fieldset>
 <select name="select">
 <optgroup label="Italienische Gerichte">
 <option>Pizza</option>
 <option>Tortelloni</option>
 <option>Bifsteca</option>
 </optgroup>
 <optgroup label="Deutsche Gerichte">
 <option selected="selected">Pfannkuchen</option>
 <option>Tafelspitz</option>
 <option>Fischstäbchen</option>
 </optgroup>
 <optgroup label="Süßes" disabled="disabled">
 <option>Schokoriegel</option>
 <option>Sahneeis</option>
 <option>Kaugummi</option>
 <option>Pfefferminz</option>
 </optgroup>
 </select>
 </fieldset>
< /form>

    Und das was du eigentlich möchtest geht dann so

    Code:
    <style type="text/css">
<!--

#slidemenu { position:absolute; left:-130px; width:140px; top:80px; background-color:#99CCFF; border:none; }

td.menu { font:11px/18px Verdana; }

-->
</style>


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

var ns4 = document.layers?1:0;
var dom = document.getElementById?1:0;

function slideRight() {

 if(dom) {
 menu = document.getElementById("slidemenu").style;
 leftend = -2;
 rightend = -117;
 if(parseInt(menu.left) < leftend) {
 menu.left = parseInt(menu.left)+4;
 getup();
 }
 }
 else if(ns4) {
 menu = document.layers["slidemenu"];
 leftend = 122;
 rightend = 8;
 if(menu.left < leftend) {
 menu.left+=4;
 getup();
 }
 }
}

function getup() {

if(window.back_timer)
clearTimeout(back_timer);
out_timer = setTimeout("slideRight()",10);
}


function slideLeft() {

 if(dom && (parseInt(menu.left) > rightend)) {
 menu.left = parseInt(menu.left)-4;
 shut();
 }
 else if(ns4 && (menu.left > rightend)) {
 menu.left-=4;
 shut();
 }
}

function shut() {

if(window.out_timer)
clearTimeout(out_timer);
back_timer = setTimeout("slideLeft()",10);
}

//-->
</script>

</head>

<body bgcolor="#CCFFFF">


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

if(dom)
document.write('<div id="slidemenu" style="position:absolute; left:-118px; top:80px;" onMouseover="slideRight()" onMouseout="slideLeft()">');

else if(ns4)
document.write('<layer id="slidemenu" onMouseover="slideRight()" onMouseout="slideLeft()">');

var ref = new Array();

ref[0]='<a href="datei1.html">Erster Link</a>';
ref[1]='<a href="datei2.html">Zweiter Link</a>';
ref[2]='<a href="datei3.html">Dritter Link</a>';
ref[3]='<a href="datei4.html">Vierter Link</a>';
ref[4]='<a href="datei5.html">Fünfter Link</a>';
ref[5]='<a href="datei6.html">Sechster Link</a>';

document.writeln('<table border="1" cellpadding="0" cellspacing="0" width="142" height="130"><td class="menu">&nbsp;' + ref[0] + '</td><td rowspan="6" align="center" width="22" bgcolor="#99CCFF"><b>M<br>e<br>n<br>ü</b></td></tr>');

for (i = 1; i < ref.length; i++) {
document.writeln('<tr><td class="menu">&nbsp;' + ref[i] + '</td></tr>');
}
document.write('</table>');


if(dom)
document.write('</div>');
else
document.write('</layer>');

//-->
</script>

<b>Überfahren Sie bitte mit dem Mauskursor das Menü.</b>


</body> </html>
     
  8. 29. März 2006
    habe für dich da auch noch was, hier bitteschön!

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

 function cache(id) {
 if (document.getElementById) {
 document.getElementById(id).style.display="none";
 } else if (document.all) {
 document.all[id].style.display="none";
 } else if (document.layers) {
 document.layers[id].display="none";
 } } 

//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}

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

div.menu {
position: absolute;
width: 600px;
top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 120px;
}

div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

div.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style></head>


<body>

<div class="menu">
<ul><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Menu 1</a> <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
 <li><a href="">Subkategorie 1.1</a></li>
 <li><a href="">Subkategorie 1.2</a></li>
 <li><a href="">Subkategorie 1.3</a></li>
 </ul></li>
 <li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">Menu 2</a><ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
 <li><a href="">Subkategorie 2.1</a></li>
 <li><a href="">Subkategorie 2.2</a></li>
 </ul></li>
 <li><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="">Menu 3</a><ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
 <li><a href="">Subkategorie 3.1</a></li>
 <li><a href="">Subkategorie 3.2</a></li>
 <li><a href="">Subkategorie 3.3</a></li>
 <li><a href="">Subkategorie 3.4</a></li>
 <li><a href="">Subkategorie 3.5</a></li>
 </ul></li>
 <li><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="">Menu 4</a><ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
 <li><a href="">Subkategorie 4.1</a></li>
 <li><a href="">Subkategorie 4.2</a></li>
 <li><a href="">Subkategorie 4.3</a></li>
 </ul></li>
</ul>
</div>

</body></html>
    schaut dann so aus, wie meiner homepage (link gibs unten in meiner sig )
     
  9. 29. März 2006
    Hm, und wie macht man, das wenn man z.B. auf Pizza klickt, das man dann auch auf die Pizza Seite kommt ?
     
  10. 29. März 2006
    Abend!

    hm nice sowas habe ich eh gebraucht =D
    THX

    mfg SpeX
     
  11. 29. März 2006

    must dann halt Pizza.html ein geben au die seite wo du halt willst
     
  12. 30. März 2006
    Danke Leute
    Genau sowas hab ich gesucht!!!
    Ihr seid die größten ;-)
    10er für alle ^^

    Mfg!
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.