Hjelp til slide-out meny

[Garreth]

Jeg har og postet denne på Web-design, HTML og CSS delen, men siden koden min er både css og javascript håper jeg noen her kanskje kan hjelpe meg.

 

Jeg er ganske dårlig når det kommer til veldig avansert scripting, så jeg håper noen kan hjelpe meg litt.

 

Jeg har funnet et eksempel på en meny jeg vil ha, den er styrt av div og css. Selv om jeg aldri har prøvd meg på css og div's før har jeg ihvertfall klart å få menyen dit jeg vil ha den. Det jeg ikke får til, er å lage en til Sub meny under Sub menyen. Altså: "Hovedknapp > Submeny > Submeny2". Jeg får til å lage den, men det ser ut som den oppfører seg litt anderledes enn de andre knappene. Det jeg håper noen klarer er å hjelpe meg slik at alle knappene blir like.

 

 

Tatt fra: http://www.squidfingers.com/code/dhtml/?id=slideoutmenu

<style type="text/css">

body {
background-color: #faf7ec;
margin: 0;
}
a {
font-family: verdana, sans-serif;
font-size: 12px;
color: #3c2819;
text-decoration: none;
}
a:hover {
color: #3278a0;
}

/* main menu */

#menu {
position: absolute;
left: 50px;
top: 50px;
width: 130px;
height: auto;
margin: 0;
padding: 0;
background-color: #cde9f2;
}
#menu a {
display: block;
height: 20px;
padding: 5px 0 0 10px;
}

/* highlight menu menu */

body.section1 #menu1, 
body.section2 #menu2, 
body.section3 #menu3 {
background-color: #b6e2f5;
}

/* sub menu masks */

#menu1Mask, 
#menu2Mask,
#menu3Mask {
position: absolute;
left: 180px;
width: 130px;
height: 100px;
clip: rect(0 130px 100px 0);
overflow: hidden;
visibility: hidden;
}
#menu1Mask {
top: 50px;
}
#menu2Mask {
top: 75px;
}
#menu3Mask {
top: 100px;
}

/* sub menus */

.submenu {
position: absolute;
left: -130px;
top: 0;
width: 130px;
height: auto;
background-color: #a0dcf8;
}
.submenu a {
display: block;
height: 20px;
padding: 5px 0 0 10px;
} 
.submenu a:hover {
background-color: #96d2f0;
}

</style>

<script type="text/javascript">

// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// 
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- version date: 06/13/04 ---------------------------------------------------------

// --------------------------------------------------
// MakeTween Class

MakeTween = function (el, getter, setter) {
this.el = el;
this.getter = getter;
this.setter = setter;
this.callback = null;
this.interval = null;
this.obj = "MakeTweenInstance_" + (++ MakeTween.instance);
eval (this.obj + "=this");
}
MakeTween.instance = 0;

MakeTween.prototype.tween = function (endpos, callback) {
this.callback = callback;
this.clearTween ();
this.doTween (endpos);
this.interval = setInterval (this.obj + ".doTween(" + endpos + ")", 100);
}
MakeTween.prototype.doTween = function (endpos) {
var pos = this.getter ();
if (Math.abs (pos - endpos) <= 1) {
 this.setter (endpos);
 this.clearTween ();
 if (this.callback) this.callback ();
} else {
 this.setter (pos + (endpos - pos) / 2);
}
}
MakeTween.prototype.clearTween = function () {
clearInterval (this.interval);
this.interval = null;
}

// --------------------------------------------------
// MakeElement Class

// Required:
// - MakeTween Class

MakeElement = function (idname) {
this.el = document.getElementById (idname);
this.css = this.el.style;
this.obj = "MakeElementInstance_" + idname;
eval (this.obj + "=this");
}
// event
MakeElement.prototype.addEvent = function (type, callback) {
this.el["on" + type] = callback;
}
MakeElement.prototype.removeEvent = function (type) {
this.addEvent (type, null);
}
// visibility
MakeElement.prototype.show = function () {
this.css.visibility = "visible";
}
MakeElement.prototype.hide = function () {
this.css.visibility = "hidden";
}
// background color
MakeElement.prototype.getBgColor = function () {
return this.getCSSProp ("backgroundColor");
}
MakeElement.prototype.setBgColor = function (color) {
this.css.backgroundColor = color || "";
}
// top
MakeElement.prototype.getTop = function () {
return parseInt (this.getCSSProp ("top")) || this.el.offsetTop;
}
MakeElement.prototype.setTop = function (top) {
this.css.top = top + "px";
}
// left
MakeElement.prototype.getLeft = function () {
return parseInt (this.getCSSProp ("left")) || this.el.offsetLeft;
}
MakeElement.prototype.setLeft = function (left) {
this.css.left = left + "px";
}
// width
MakeElement.prototype.getWidth = function () {
return parseInt (this.getCSSProp ("width")) || this.el.offsetWidth;
}
MakeElement.prototype.setWidth = function (width) {
this.css.width = width + "px";
}
// height
MakeElement.prototype.getHeight = function () {
return parseInt (this.getCSSProp ("height")) || this.el.offsetHeight;
}
MakeElement.prototype.setHeight = function (height) {
this.css.height = height + "px";
}
// z-index
MakeElement.prototype.getZindex = function () {
return this.getCSSProp ("zIndex");
}
MakeElement.prototype.setZindex = function (z) {
this.css.zIndex = z;
}
// tween
MakeElement.prototype.tweenTop = function (top, callback) {
var self = this;
if (!this.topTween) this.topTween = new MakeTween (this, function () {return self.getTop ()}, function (y) {self.setTop (y)});
this.topTween.tween (top, callback);
}
MakeElement.prototype.tweenLeft = function (left, callback) {
var self = this;
if (!this.leftTween) this.leftTween = new MakeTween (this, function () {return self.getLeft ()}, function (x) {self.setLeft (x)});
this.leftTween.tween (left, callback);
}
// css property
MakeElement.prototype.getCSSProp = function (prop) {
if (this.css[prop]) {
 return this.css[prop];
} else if (this.el.currentStyle) {
 return this.el.currentStyle[prop];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
 prop = prop.replace (/([A-Z])/g, function (match) {return "-" + match.toLowerCase ()});
 return document.defaultView.getComputedStyle (this.el, "").getPropertyValue (prop);
} else {
 return null;
}
}

// --------------------------------------------------
// MakeSlideoutMenu Class

// Required:
// - MakeElement Class

MakeSlideoutMenu = function () {
this.menus = new Array ();
this.timeout = null;
this.active = null;
this.activeBgColor = null;
this.depth = 100;
this.obj = "MakeSlideoutMenuInstance_" + (++ MakeSlideoutMenu.instance);
eval (this.obj + "=this");
}
MakeSlideoutMenu.instance = 0;

// --- Public Methods ---

MakeSlideoutMenu.prototype.setActiveBgColor = function (color) {
this.activeBgColor = color;
}
MakeSlideoutMenu.prototype.build = function (parent, mask, child) {
var self = this;
var index = this.menus.length;
var menu = this.menus[index] = new Object ();
// Build Objects
menu.parent = new MakeElement (parent);
menu.mask = mask ? new MakeElement (mask) : null;
menu.child = child ? new MakeElement (child) : null;
// Attach Events
menu.parent.addEvent ("mouseover", function () {self.hide (); self.show (index)});
menu.parent.addEvent ("mouseout", function () {self.out ()});
if (menu.child) {
 //menu.parent.addEvent("click", function () {return false});
 menu.child.addEvent ("mouseover", function () {self.show (index)});
 menu.child.addEvent ("mouseout", function () {self.out ()});
}
}

// --- Runtime Methods ---

MakeSlideoutMenu.prototype.show = function (index) {
if (this.timeout) clearTimeout (this.timeout);
var menu = this.menus[index];
if (this.activeBgColor) menu.parent.setBgColor (this.activeBgColor);
if (menu.child) {
 menu.mask.show ();
 menu.mask.setZindex (++ this.depth);
 menu.child.tweenLeft (0);
}
this.active = index;
}
MakeSlideoutMenu.prototype.hide = function () {
if (this.active != null) {
 var menu = this.menus[this.active];
 if (this.activeBgColor) menu.parent.setBgColor (null);
 if (menu.child) menu.child.tweenLeft (-menu.child.getWidth (), function () {menu.mask.hide ()});
 this.active = null;
}
}
MakeSlideoutMenu.prototype.out = function () {
this.timeout = setTimeout (this.obj + ".hide()", 300);
}

// --------------------------------------------------
// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Build SlideoutMenu

function buildSlideoutMenu () {
if (!document.getElementById) return;
var menu = new MakeSlideoutMenu ();
menu.setActiveBgColor ("#a0dcf8");
menu.build ("menu1", "menu1Mask", "menu1Sub");
menu.build ("menu2", "menu2Mask", "menu2Sub");
menu.build ("menu3", "menu3Mask", "menu3Sub");
}

window.onload = function () {
buildSlideoutMenu ();
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// --------------------------------------------------

</script>

</head>
<body class="section0">

<div id="menu">
<a href="?section=1" id="menu1">Menu 1</a>
<a href="?section=2" id="menu2">Menu 2</a>
<a href="?section=3" id="menu3">Menu 3</a>
</div>

<div id="menu1Mask">
<div id="menu1Sub" class="submenu">
 <a href="?section=1">SubMenu 1.1</a>
 <a href="?section=1">SubMenu 1.2</a>
 <a href="?section=1">SubMenu 1.3</a>
</div>
</div>

<div id="menu2Mask">
<div id="menu2Sub" class="submenu">
 <a href="?section=2">SubMenu 2.1</a>
 <a href="?section=2">SubMenu 2.2</a>
 <a href="?section=2">SubMenu 2.3</a>
</div>
</div>

<div id="menu3Mask">
<div id="menu3Sub" class="submenu">
 <a href="?section=3">SubMenu 3.1</a>
 <a href="?section=3">SubMenu 3.2</a>
 <a href="?section=3">SubMenu 3.3</a>
</div>
</div>

 

 

Min versjon

 

body {
background-color: #BCB192;
margin: 0;
}
a {
font-family: verdana, sans-serif;
font-size: 12px;
color: #3c2819;
text-decoration: none;
}
a:hover {
color: #3278a0;
}

/* main menu */

#menu {
position: absolute;
left: 0px;
top: 300px;
width: 150px;
height: auto;
margin: 0;
padding: 0;
background-color: #cde9f2;
}
#menu a {
display: block;
height: 20px;
padding: 5px 0 0 0px;
}

/* highlight menu menu */

body.section1 #menu1, 
body.section2 #menu2, 
body.section3 #menu3,
body.section4 #menu4,
body.section5 #menu5, {
background-color: #b6e2f5;
}

/* sub menu masks */

#menu1Mask, 
#menu2Mask,
#menu3Mask,
#menu4Mask {
position: absolute;
left: 150px;
width: 140px;
height: 100px;
clip: rect(0 130px 100px 0);
overflow: hidden;
visibility: hidden;
}
/* sub-sub menu masks */

#menu5Mask {
position: absolute;
left: 275px;
width: 140px;
height: 100px;
clip: rect(0 130px 100px 0);
overflow: hidden;
visibility: hidden;
}
#menu1Mask {
top: 300px;
}
#menu2Mask {
top: 325px;
}
#menu3Mask {
top: 350px;
}
#menu4Mask {
top: 375px;
}
#menu5Mask {
top: 325px;
}

/* sub menus */

.submenu {
position: absolute;
left: -90px;
top: 0;
width: 130px;
height: auto;
background-color: #a0dcf8;
}
.submenu a {
display: block;
height: 20px;
padding: 3px 0 0 10px;
} 
.submenu a:hover {
background-color: #96d2f0;
}

</style>



................(har ikke gjort noe med scriptet i mellom)

</head>
<body class="section0">

<div id="menu">
<a href="?section=1" id="menu1">meny1</a>
<a href="?section=2" id="menu2">meny2</a>
<a href="?section=3" id="menu3">meny3</a>
<a href="?section=4" id="menu4">meny4</a>
</div>

<div id="menu1Mask">
<div id="menu1Sub" class="submenu">
 <a href="?section=1">sub1.0</a>
</div>
</div>

<div id="menu2Mask">
<div id="menu2Sub" class="submenu">
 <a href="?section=5" id="menu5">Sub 2.0</a>
</div>
</div>
<div id="menu5Mask">
<div id="menu5Sub" class="submenu">
 <a href="?section=6">Sub 2.0.1</a>
 <a href="?section=6">Sub 2.0.2</a>
 <a href="?section=6">Sub 2.0.2</a>
</div>
</div>

<div id="menu3Mask">
<div id="menu3Sub" class="submenu">
 <a href="?section=3">Sub 3.0</a>
 <a href="?section=3">Sub 3.1</a>
 <a href="?section=3">Sub 3.2</a>
 <a href="?section=3">Sub 3.3</a>
</div>
</div>

<div id="menu4Mask">
<div id="menu4Sub" class="submenu">
 <a href="?section=4">Sub 4.0</a>
</div>
</div>

 

 

MENU5 er Sub-sub menyen min.

 

Se mitt eksempel her (ikke bry dere om designet, jeg vil bare prøve å få menyen til å fungere skikkelig først) Skisse

 

Hvis du tar musen over Sub 2.0. så går sub menyen ut, men hvis du ikke tar musen ut på denne sub menyen så står den igjen etter at Sub 2.0 har glidd inn igjen.

 

Håper dette ikke ble for mye for dere.

 

Setter stor pris på hjelp

[Dahl]

Mulig jeg er sær, men jeg orker ikke å gå gjennom 317 linjer med kode for å kanskje ha et svar til deg...

Jeg regner egentlig med at de fleste andre her har bedre ting å gjøre, de også.

[Garreth]

Javel. jeg håpte bare på at det var noen som kunne dette godt, som kunne svart meg kjapt hva jeg skulle gjøre.

Endret 16. desember 2004 av Garreth

[Manfred]

tror jeg er like sær som @kd

[Dahl]

tror jeg er like sær som @kd

[Dahl]

Javel. jeg håpte bare på at det var noen som kunne dette godt, som kunne svart meg kjapt hva jeg skulle gjøre.

"Kjapt"??

Tar jo en og en halv time bare å sette seg inn i koden...