Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    submenu problems - newbie help.

    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...
    Code:
    <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?

    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!

    issy
    Last edited by vivaissy; 05-05-2006 at 05:44 PM.
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    MenuTopic and DubMenu must overlap

    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks vwphillips!
    thats much better!

    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...

    Code:
    <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>
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    just give it an initial style of visibility:hidden;
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    is it possible??

    cheers
    issy
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    vivaissy

    my music blog

    "...when we planned to go nowhere"

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    New Coder
    Join Date
    May 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks vic.
    i'm gonna go and have a play with that!
    i'll let you know how i get on.


    thanks for all your help!

    cheers
    issy
    vivaissy

    my music blog

    "...when we planned to go nowhere"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •