...

View Full Version : submenu problems - newbie help.



vivaissy
05-05-2006, 04:19 PM
hi,
i have a left menu panel on my website here...
www.geocities.com/vivaissy11999/homepage.html

and i just want to be able to add a sub menu on some of the menu options.

i have started a new messing around code here...
www.geocities.com/vivaissy11999/submenu.html

to see what i can come up with, so far i have...

<html>
<head>

<style>

.lk3{
border-right: 0px; padding-right: 0px; border-top: 3px; display: block; padding-left: 7px; font-size: 11px; padding-bottom: 2px; margin: 1px; border-left: 2px; width: 113%; color: #000; padding-top: 5px; border-bottom: #ff904f 1px solid; font-family: Arial, Helvetica, sans-serif; background-color: #bbb096; text-align: left; text-decoration: none
}

</style>

<style>
.container{
width:120px;
margin: 1;

}

.menulist{
border-width:1px;
padding-left:5px;
padding-bottom:3px;

height:15px;
width:150px;

position: relative;
float:left;

}

.sublist{
width:120px;
position : absolute;
border: solid;
border: white;
border-width:2px;
left:157px;
top:-1px;
border-left:3px

display:none;
}

.sublistitem{
background-color:#bbb096;
border-width:1px;
padding:3px
border-left:3px

}

</style>

<script language="Javascript">

function changeMenu(menu){
//set menu being passed to a variable
var m_enu = menu;

document.getElementById(m_enu).style.display='block';

}

function hideMenu(menu){
//set menu being passed to a variable
var m_enu = menu;

var x = document.getElementsByTagName('div');
for (var i=0;i<x.length;i++)
{
var temp = x[i].id;
temp2 = temp.substring(0,3);

if (temp2 == 'sub')
x[i].style.display='none';
}

}

</script>

</head>

<body>

<a id="lnk3a" class="lk3" href="home.html" target="bodyframe" onmouseover="m_over(this.id,2)" onmouseout="m_out(this.id,2)" onclick="m_click(this.id,2)" ><div class="menulist" onMouseover="changeMenu('sub1');" onMouseout="hideMenu('sub1');">
Music Section

<div class="sublist" id="sub1">
<div class="sublistitem">this is a submenu!</div>
<div class="sublistitem">click me click me!</div>

</div>

</div></a>

</body>

</html>


for some reason it is coming up as the page loads? but it wasn't doing this previously? :confused:

and when my mouse goes to click on the submenu it disappears!

any ideas where to go next with the code?

cheers for your help! :D

issy

vwphillips
05-05-2006, 06:05 PM
MenuTopic and DubMenu must overlap


<html>
<head>

<style>

.lk3{
border-right: 0px; padding-right: 0px; border-top: 3px; display: block; padding-left: 7px; font-size: 11px; padding-bottom: 2px; margin: 1px; border-left: 2px; width: 113%; color: #000; padding-top: 5px; border-bottom: #ff904f 1px solid; font-family: Arial, Helvetica, sans-serif; background-color: #bbb096; text-align: left; text-decoration: none
}

</style>

<style>
.container{
width:120px;
margin: 1;

}

.menulist{
border-width:1px;
padding-left:5px;
padding-bottom:3px;

height:15px;
width:150px;

position: relative;
float:left;

}

.sublist{
width:120px;
position : absolute;
border: solid;
border: white;
border-width:2px;
background-color:#bbb096;
left:147px;
top:-1px;
border-left:3px

display:none;
}

.sublistitem{
background-color:#bbb096;
border-width:1px;
padding:3px
border-left:3px

}

</style>

<script language="Javascript">

function changeMenu(obj,menu){
//set menu being passed to a variable
obj.oop=true;
var m_enu = document.getElementById(menu);
m_enu.oop=true;
m_enu.style.display='block';

}

function hideMenu(menu){
//set menu being passed to a variable
var m_enu = menu;

var x = document.getElementsByTagName('div');
for (var i=0;i<x.length;i++)
{
var temp = x[i].id;
temp2 = temp.substring(0,3);

if (temp2 == 'sub')
x[i].style.display='none';
}

}

</script>

<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity Part 2 (27-April-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Required MouseOver/Out actuation if the Element has Child Nodes


// **** Functional Code - NO NEED to Change

function zxcOpacityEvent(zxce,zxcid,zxcsrt,zxcfin,zxcd,zxcstp){
if (zxcCkEventObj(zxce)){
hideMenu(zxcid);
}
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcEventFrom(zxce){
var zxcfrom;
if (!zxce) var zxce=window.event;
if (zxce.relatedTarget) zxcfrom=zxce.relatedTarget;
else if (zxce.fromElement) zxcfrom=zxce.fromElement;
return zxcfrom
}

function zxcEventTo(zxce){
var zxcto;
if (!zxce) var zxce = window.event;
if (zxce.relatedTarget) zxcto=zxce.relatedTarget;
else if (zxce.toElement) zxcto=zxce.toElement;
return zxcto
}


//-->
</script>
</head>

<body>
<a id="lnk3a" class="lk3" href="home.html" target="bodyframe" >

<div class="menulist"onMouseover="changeMenu(this,'sub1');" onMouseout="zxcOpacityEvent(event,'sub1');" >
Music Section
<div class="sublist" id="sub1">
<div class="sublistitem">this is a submenu!</div>
<div class="sublistitem">click me click me!</div>

</div>

</div>
</a>

</body>

</html>

vivaissy
05-05-2006, 06:28 PM
thanks vwphillips! :D
thats much better! :thumbsup:

i still can't see where to correct the fact that as the page loads the submenu is already visible. i want it so it is only visible when my mouse moves over the parent menu option (which it does do, but also when the page loads?).

any ideas?

thanks
issy

here is the code so far...


<html>
<head>

<style>

.lk3{
border-right: 0px; padding-right: 0px; border-top: 3px; display: block; padding-left: 7px; font-size: 11px; padding-bottom: 2px; margin: 1px; border-left: 2px; width: 113%; color: #000; padding-top: 5px; border-bottom: #ff904f 1px solid; font-family: Arial, Helvetica, sans-serif; background-color: #bbb096; text-align: left; text-decoration: none
}

</style>

<style>
.container{
width:120px;
margin: 1;

}

.menulist{
border-width:1px;
padding-left:5px;
padding-bottom:3px;

height:15px;
width:150px;

position: relative;
float:left;

}

.sublist{
width:120px;
position : absolute;
border: solid;
border-color: white;
border-width:1px;
background-color:#bbb096;
left:147px;
top:-1px;
border-left: 1px

display:none;
}

.sublistitem{
background-color:#bbb096;
border-width:1px;
padding:3px
border-left:3px

}

</style>

<script language="Javascript">

function changeMenu(obj,menu){
//set menu being passed to a variable
obj.oop=true;
var m_enu = document.getElementById(menu);
m_enu.oop=true;
m_enu.style.display='block';

}

function hideMenu(menu){
//set menu being passed to a variable
var m_enu = menu;

var x = document.getElementsByTagName('div');
for (var i=0;i<x.length;i++)
{
var temp = x[i].id;
temp2 = temp.substring(0,3);

if (temp2 == 'sub')
x[i].style.display='none';
}

}

</script>

<script language="JavaScript" type="text/javascript">

function zxcOpacityEvent(zxce,zxcid,zxcsrt,zxcfin,zxcd,zxcstp){
if (zxcCkEventObj(zxce)){
hideMenu(zxcid);
}
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcEventFrom(zxce){
var zxcfrom;
if (!zxce) var zxce=window.event;
if (zxce.relatedTarget) zxcfrom=zxce.relatedTarget;
else if (zxce.fromElement) zxcfrom=zxce.fromElement;
return zxcfrom
}

function zxcEventTo(zxce){
var zxcto;
if (!zxce) var zxce = window.event;
if (zxce.relatedTarget) zxcto=zxce.relatedTarget;
else if (zxce.toElement) zxcto=zxce.toElement;
return zxcto
}


//-->
</script>
</head>

<body>
<div id="lnk3a" class="lk3">

<div class="menulist"onMouseover="changeMenu(this,'sub1');" onMouseout="zxcOpacityEvent(event,'sub1');" >
Music Section
<div class="sublist" id="sub1">
<div class="sublistitem"><a id="lnk3a" class="lk3" href="homepage.html">this is a submenu!</a></div>
<div class="sublistitem"><a id="lnk3a" class="lk3" href="homepage.html">click me click me!</a></div>

</div>
</div>
</div>
</a>

</body>

</html>

vwphillips
05-06-2006, 12:59 AM
just give it an initial style of visibility:hidden;

vivaissy
05-06-2006, 06:13 PM
yeah, that worked brilliantly, thanks! :)

only prob now is because i want to use the submenu in my left panel on my website, that it comes up in that left frame and not on top of the main frame. and thus, i can't see it! :o

is it possible??

cheers
issy

vwphillips
05-06-2006, 07:10 PM
this is a frameset yes?

if the menu is in the left frame thats where it is.

The left frame is a window and it can only exist in that window.

vivaissy
05-07-2006, 09:52 AM
yeah, its a frameset - so there's no way...okay.

erm, is there a way that a navigation bar can be used without frames but so when the user moves down the page, the navigation bar does not move (ie so it is always visible to the user)? and therefore the submenus would also be visible.

issy

ps. i really appreciate your help on this, i know its time consuming to deal with all the fiddlely bits but this all helps! :)

vwphillips
05-07-2006, 10:19 AM
I will do somthing anyway but if you are using frameset then it could remain in a frame at the top of the frame being scrolled.

also the menu you are using has only two levels, there are many available that have any number of levels

vivaissy
05-07-2006, 10:37 AM
hi vic,

if you are using frameset then it could remain in a frame at the top of the frame being scrolled.

how is this possible?? do you mean that it would be at the top of the page but if the user scrolls down to the bottom of the page (say the page is very long) then the menu would not be visible, so the user would have to scroll back up to access it?

or that it is permenantly visible regardless of scrolling? if the latter, (which as i re-re-read your post i think you mean), how is that possible? especially given that is that not what my code is trying to do?? ie if it remains in a frame then surely the submenu will never be visible over the main frame? er...now i'm just repeating stuff...okay...

can you get me started on how this is possible please? or suggest which way to go...

my menu only has two levels because it is only sample code for now, i will add more when i get it working fully. i don't want to confuse myself with too much code at this point!

thanks again
issy

vwphillips
05-07-2006, 11:33 AM
<html>
<head>

<style>

.lk3{
position:relative;border-right: 0px; padding-right: 0px; border-top: 3px; display: block; padding-left: 7px; font-size: 11px; padding-bottom: 2px; margin: 1px; border-left: 2px; width: 113%; color: #000; padding-top: 5px; border-bottom: #ff904f 1px solid; font-family: Arial, Helvetica, sans-serif; background-color: #bbb096; text-align: left; text-decoration: none
}

</style>

<style>
.container{
width:120px;
margin: 1;

}

.menulist{
border-width:1px;
padding-left:5px;
padding-bottom:3px;

height:15px;
width:150px;

position: relative;
float:left;

}

.sublist{
width:120px;
position : absolute;
border: solid;
border-color: white;
border-width:1px;
background-color:#bbb096;
left:147px;
top:-1px;
border-left: 1px

display:none;
}

.sublistitem{
background-color:#bbb096;
border-width:1px;
padding:3px
border-left:3px

}

</style>

<script language="Javascript">

function changeMenu(obj,menu){
//set menu being passed to a variable
obj.oop=true;
var m_enu = document.getElementById(menu);
m_enu.oop=true;
m_enu.style.display='block';

}

function hideMenu(menu){
//set menu being passed to a variable
var m_enu = menu;

var x = document.getElementsByTagName('div');
for (var i=0;i<x.length;i++)
{
var temp = x[i].id;
temp2 = temp.substring(0,3);

if (temp2 == 'sub')
x[i].style.display='none';
}

}

</script>

<script language="JavaScript" type="text/javascript">

function zxcOpacityEvent(zxce,zxcid,zxcsrt,zxcfin,zxcd,zxcstp){
if (zxcCkEventObj(zxce)){
hideMenu(zxcid);
}
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcEventFrom(zxce){
var zxcfrom;
if (!zxce) var zxce=window.event;
if (zxce.relatedTarget) zxcfrom=zxce.relatedTarget;
else if (zxce.fromElement) zxcfrom=zxce.fromElement;
return zxcfrom
}

function zxcEventTo(zxce){
var zxcto;
if (!zxce) var zxce = window.event;
if (zxce.relatedTarget) zxcto=zxce.relatedTarget;
else if (zxce.toElement) zxcto=zxce.toElement;
return zxcto
}

var zxcScrollAry=[];
function zxcFix(zxcid){
var zxcobj=zxcCkObject(zxcid)
if ( zxcobj.addEventListener ){ zxcobj.style.position='fixed'; }
else {
var zxclft=zxcobj.offsetLeft;
var zxctop=zxcobj.offsetTop;
zxcScrollAry.push([zxcobj,zxclft||0,zxctop||0]);
zxcAddEvent(window,'zxcScroll','scroll')
}
}

function zxcScroll(){
for (var zxc0=0;zxc0<zxcScrollAry.length;zxc0++){
zxcScrollAry[zxc0][0].style.left=(zxcScrollAry[zxc0][1]+zxcDocS()[0])+'px';
zxcScrollAry[zxc0][0].style.top=(zxcScrollAry[zxc0][2]+zxcDocS()[1])+'px';
}
}

function zxcCkObject(zxcid){
var zxcp=zxcid;
if (typeof(zxcp)=='string'){ zxcp=document.getElementById(zxcp); }
return zxcp;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}


function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

function zxcDocS(){
var zxcsx,zxcsy;
if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
return [zxcsx,zxcsy]
}


//-->
</script>
</head>

<body onload="zxcFix('lnk3a')">
<div id="lnk3a" class="lk3">
<div class="menulist"onMouseover="changeMenu(this,'sub1');" onMouseout="zxcOpacityEvent(event,'sub1');" >
Music Section
<div class="sublist" id="sub1">
<div class="sublistitem"><a id="lnk3a" class="lk3" href="homepage.html">this is a submenu!</a></div>
<div class="sublistitem"><a id="lnk3a" class="lk3" href="homepage.html">click me click me!</a></div>
</div>
</div>
</div>

</a>
<div style="height:2000px;" ></div>
</body>

</html>

vivaissy
05-07-2006, 11:47 AM
thanks vic.
i'm gonna go and have a play with that!
i'll let you know how i get on.
:D

thanks for all your help!

cheers
issy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum