#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0

    CSS Menu (DIV and LINK conflict)


    Here is an example of what I did...


    Here is the source code for all the functions I used (JS):

    function closeMenu(menu)
    {
    if (menu == menu1)
    {
    document.getElementById("menu1").style.visibility="hidden";
    }
    }
    function showMenu(menu)
    {
    if (menu == menu1)
    {
    document.getElementById("menu1").style.visibility="visible";
    }
    }


    Now I will create my menu (invisible):

    <div style="visibility: hidden;" id="menu1" onMouseOut="closeMenu(menu1)">

    <a href="#">menuItem</a><br>
    <a href="#">menuItem</a><br>

    </div>


    That menu will be invisible until someone puts their mouse over this following link which will make it visible:

    <a onMouseOver="showMenu(menu1)">menuItem</a>


    And as you can see the hidden menu will show when the user's cursor goes over the link; the div will disapear when the mouse leave's the area. This code works very well with one exception: When a user puts their mouse over the LINKs in a menu div, for some reason it closes (becomes invisible).

    Can anyone take a guess at why this is happening? All attempts appreciated.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    12
    Is this what you want to do:
    Code:
    function OpenClose(obj) {
    var oMenu=document.getElementById("s"+obj.id);
    oMenu.style.visibility=(oMenu.style.visibility=="hidden")? "visible" : "hidden";
    }
    
    <div id="menu1" onmouseover="OpenClose(this)" onmouseout="OpenClose(this)">menu
        <div id="smenu1" style="visibility:hidden;">
        <a href="#">menuItem1</a><br>
        <a href="#">menuItem2</a><br>
        </div>
    </div>
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0
    Worked like a charm, kudos to you flatlander!

IMN logo majestic logo threadwatch logo seochat tools logo