Hjelp til slide-out meny

[Garreth]

Hei. 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.2 så går sub menyen inn igjen, og når du tar musen av så er det ikke alltid den går inn automatisk.

 

Håper dette ikke ble for mye for dere.

 

Setter stor pris på hjelp

 

 

Edit: så at jeg hadde 2 stykker av

 

#menu4Mask {

top: 380px;

}

 

 

men tviler på at det var det som er galt, fordi den fungerer like dårlig fremdeles.

Endret 14. desember 2004 av Garreth

[funkweb]

Hmm syns menyen fungerer jeg.. hva er galt nå da?

 

EDIT:

Ja nå ser jeg hva som er galt.. hmm skal ta en titt senere..!!

Endret 14. desember 2004 av funkweb

[Garreth]

Det som ikke fungerer er at Submenyen til Sub 2.0 ikke går inn av seg selv hvis du holder musen over Sub 2.0. Sub 2.0.1 får ikke "beskjed" om å gå inn igjen hvis du ikke har tatt musen over den

 

(oi, mange submenyer)

 

Prøv å hold musen over Sub 2.0 slik at submenyen (Sub 2.0.1) glir ut. Nå mens submenyen står ute, ikke ta musen bort på den, men heller ta musen opp/ned (vekk fra sub 2.0)

 

Ser du nå hva som skjer? Submenyen til Sub 2.0 "henger" igjen fordi den ikke har fått beskjed å gli inn igjen når brukeren tar vekk musen fra Sub 2.0.

 

Jeg er ganske dårlig å forklare, men jeg skjønner problemstillingen inne i hodet mitt ihvertfall. Håper noen andre klarer det også.

 

Jeg håper ikke jeg må inn i javascriptet å forandre på noe, for det har jeg absolutt ikke peiling på.

 

Edit: Forandret Submeny2 til Sub 2.0 og til 2.0.1 slik som det står på skissen

Endret 14. desember 2004 av Garreth

[Garreth]

Prøvde i går å gi samme id til både Sub 2.0 og til 2.0.1 med å bruke:

 

"Orginal"
<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>

 

"samme id"

<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=5" id="menu2">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>

 

Men det fungerer like dårlig fremdelese. Er det noen som ser hva jeg må gjøre for å få det til å fungere helt fint?