SubMenü

mörchen

hi leute,
ich brauche ein submenü. hab mir schon einiges angeguckt, aber nie was gepeilt. könntet ihr bitte so freundlich sein und mir ma ein kleines html-packet geben, so cihd as nachgucken kann, wie man das macht??
wäre echt nett von euch

GreenRover

ROFL

submeneu. das kan ales oder nichts sein. werde da mal ein weniggenuaer.

Code

<select name="bla">
<option value="1">Meneupunk1</option>
<option value="2">Meneupunk2</option>
<option value="3">Meneupunk3</option>
<optgroup label="submen1">
	<option value="1">Submeneupunk1</option>
	<option value="2">Submeneupunk2</option>
	<option value="3">Submeneupunk3</option>
</optgroup>
<option value="2">Meneupunk4</option>
<option value="3">Meneupunk5</option>
</select>

Alles anzeigen

mörchen

ja sorry mensch.
ich habe da so gedacht, ein oberbegriff und wenn man da drauf klickt, dass da ein/mehrere neue/r begriff/e erscheint/erscheinen.
klingt komplizirt is aber so
naja, ich werde ma das ausprobieren, was du mir gegeben hast.
danke nochma
bist echt ein schatz

SonicChriz

Also ich habe hier mal ein beispiel:

HTML

<html>


<head>


</head>


</body>
<SCRIPT>
var ItemEntry = new Array()
// Varibles can be changed freely
MenuWidth = 137 // Width of the pop-up menu
MenuHeight = 250 // Height of the pop-up menu
ItemInMenu = 3 // How many items are in the menu
 


// Setup your menu words
ItemEntry[0] = new MenuEntry("Button1","http://")
ItemEntry[1] = new MenuEntry("Button2","http://")
ItemEntry[2] = new MenuEntry("Button3","http://")
 


var menuEle = new Array(ItemInMenu)
// DO NOT MODIFY THE CODE BELOW
function MenuEntry(cap,adrs) {
this.cap = cap
this.adrs = adrs
}
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
// initialize objects
menu = new dynLayer("menuDiv",null)
for (var k = 0; k < menuEle.length; k++) {
menuEle[k] = new dynLayer("input" + k + "Div","menuDiv")
}
menu.hide()
// initialize events
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
// Temperary Varibles
showing = false
// drag variables
dragActive = 0
dragObject = null
dragArray = new Array()
dragLayerX = 0
dragLayerY = 0
dragLayerZ = 0
function mouseDown(e) {
if (n) {
if (showing == true) {showing = false; setTimeout('menu.hide()',50)}
else if (((n && e.which == 1) || ie) && showing == false) {
if (n) {var xNow=e.pageX; var yNow=e.pageY}
if (ie) {var xNow=event.x; var yNow=event.y}
menu.moveTo(xNow, yNow)
menu.show()
showing = true
}
}
else if (ie) {
if (showing == true) {showing = false; menu.hide()}
else if (((n && e.which == 1) || ie) && showing == false) {
if (n) {var xNow=e.pageX; var yNow=e.pageY}
if (ie) {var xNow=event.x; var yNow=event.y}
menu.moveTo(xNow, yNow)
menu.show()
showing = true
}
}
}
function mouseMove(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
}
function mouseUp(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
dragActive = 0
// put more code here to do something else when finished a drag
}
function dynLayer(id,nestref,des) {
if (n) {
if (nestref) {
this.css = eval("document." + nestref + ".document." + id)
this.ref = eval("document." + nestref + ".document." + id + ".document")
}
else {
this.css = document.layers[id]
this.ref = document.layers[id].document
}
this.x = this.css.left
this.y = this.css.top
this.w = this.css.clip.width
this.h = this.css.clip.height
}
else if (ie) {
this.css = document.all[id].style
this.ref = document
this.x = this.css.pixelLeft
this.y = this.css.pixelTop
this.w = this.css.pixelWidth
this.h = this.css.pixelHeight
}
this.obj = id + "Object"
eval(this.obj + "=this")
this.moveBy = dynLayerMoveBy
this.moveTo = dynLayerMoveTo
this.show = dynLayerShow
this.hide = dynLayerHide
}
function dynLayerMoveBy(x,y) {
this.x += x
this.css.left = this.x
this.y += y
this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
this.x = x
this.css.left = this.x
this.y = y
this.css.top = this.y
}
function dynLayerShow() {
if (n) this.css.visibility = "show"
else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
if (n) this.css.visibility = "hide"
else if (ie) this.css.visibility = "hidden"
}
document.writeln('<STYLE TYPE=\"text\/css\">')
document.writeln('#menuDiv {position:absolute; left:0; top:0; width:' + MenuWidth + '; height:' + MenuHeight + '; clip:rect(0,' + MenuWidth + ',' + MenuHeight + ',0); background-color:000000; layer-background-color:000000; visibility:hidden;}')
document.writeln('#menuLayer1Div {position:absolute; left:0; top:0; width:' + (MenuWidth -1) + '; height:' + (MenuHeight -1) + '; clip:rect(0,' + (MenuWidth -1) + ',' + (MenuHeight -1) + ',0); background-color:888888; layer-background-color:888888;}')
document.writeln('#menuLayer2Div {position:absolute; left:1; top:1; width:' + (MenuWidth -3) + '; height:' + (MenuHeight-3) + '; clip:rect(0,' + (MenuWidth-3) + ',' + (MenuHeight -3) + ',0); background-color:D0D0D0; layer-background-color:D0D0D0;}')
document.writeln('#menuLayer3Div {position:absolute; left:0; top:0; width:' + (MenuWidth -2) + '; height:' + (MenuHeight-2) + '; clip:rect(0,' + (MenuWidth-2) + ',' + (MenuHeight -2) + ',0); background-color:C0C0C0; layer-background-color:C0C0C0;}')
document.writeln('#menuLayer4Div {position:absolute; left:1; top:1; width:1; height:' + (MenuHeight -3) + '; clip:rect(0,1,' + (MenuHeight -3) + ',0); background-color:E0E0E0; layer-background-color:E0E0E0;}')
document.writeln('#menuLayer5Div {position:absolute; left:1; top:1; width:' + (MenuWidth -3) + '; height:1; clip:rect(0,' + (MenuWidth -3) + ',1,0); background-color:E0E0E0; layer-background-color:E0E0E0;}')
document.writeln('#menuLayer6Div {position:absolute; left:3; top:3; width:' + (MenuWidth -6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:8888FF; layer-background-color:8888FF;}')
document.writeln('A.JSmenu {color:black;}')
for (var k = 0; k < menuEle.length; k++) {
document.writeln('#input' + k + 'Div {position:absolute; left:3; top:' + (20 * (k+1) + 3) + '; width:' + (MenuWidth-6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:C0C0C0; layer-background-color:C0C0C0;}')
}
document.writeln('<\/STYLE>')
document.writeln('<DIV ID="menuDiv">')
document.writeln('<DIV ID="menuLayer1Div"></DIV>')
document.writeln('<DIV ID="menuLayer2Div"></DIV>')
document.writeln('<DIV ID="menuLayer3Div"></DIV>')
document.writeln('<DIV ID="menuLayer4Div"></DIV>')
document.writeln('<DIV ID="menuLayer5Div"></DIV>')
document.writeln('<DIV ID="menuLayer6Div"><FONT Size=2>[url='h ttp://']<CENTER>Pop up Menü</CENTER>[/url]</FONT></DIV>')
for (var k = 0; k < menuEle.length; k++) {
document.writeln('<DIV ID="input' + k + 'Div"><FONT FACE="Helvetica" SIZE="1">[url='' + ItemEntry[k].adrs + '']' + ItemEntry[k].cap + '</FONT>[/url]</DIV>')
}
document.writeln('</DIV>')
init()
</SCRIPT>


<body onload="init()">






[url='../../Eigene%20Dateien/Eigene%20Webs/MeinWeb12/index.html']index[/url]</p>


 <style type="text/css"> 
a:link { text-decoration:none; } 
a:visited { text-decoration:none; } 
a:hover { text-decoration:overline & underline; } 
a:active { text-decoration:none; } 
  </style>


</html>

Alles anzeigen

wenn man da auf den link klickt öffnet sich ein kleines pop-up neben dem link was sich einen neben klick wieder schließt
m*f*g sonicchriz

mörchen

bissle kompliziert aber danke
ma schaun, ob ich durchblicke

mörchen

hmm, also, nich ganz das was ich suche.
ich möchte gerne so ein submenü einfügen

button 1
button a
button b
button c

button 2
button 3
button 4

wenn ich dann auf button 2 klcike, dann sollte möglichst die buttons sich so verändern...

button 1

button 2
button d
button e
button f

button 3
button 4

Tags