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 5 of 5

Thread: menu problem

  1. #1
    New to the CF scene
    Join Date
    Sep 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    menu problem

    Im trying to put together a small menu using javascript.

    I have a couple of question, if you take a look at the page http://larsandre.mine.nu/menu.htm

    Why is the second menu item using two lines ? There should be enough space using one line ?

    How can I get the <div> tag to fill the whole table cell ? Atm they are only partly filled and it looks rather stupid.

    One annoying little thing, if I select for instance the 'project' menu then a submenu appears, which is excellent but If I then remove the cursor from the menu all together the menu still stays put. I need some help making a hide_menu function of some sort.

    Appreciate any help you guys can give.

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, for a start, use CSS instead of HTML to style your divs.

    I'll post more when I get back, I've got to go for a while.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    New to the CF scene
    Join Date
    Mar 2003
    Location
    In the Mountains
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I am new here, but try this;

    <html>
    <head>
    <STYLE>
    .menu {background-color:003366;width:200; color: white; text-align: center;}
    .submenu {position:absolute;background-color:#77AADD;width:200}
    </STYLE>

    <SCRIPT>
    var cm=null;
    document.onclick = new Function("show(null)")
    function getPos(el,sProp)
    {
    var iPos = 0
    while (el!=null)
    {
    iPos+=el["offset" + sProp]
    el = el.offsetParent
    }
    return iPos
    }

    function show(el,m)
    {
    if (m)
    {
    m.style.display='';
    m.style.pixelLeft = getPos(el,"Left")
    m.style.pixelTop = getPos(el,"Top") + el.offsetHeight
    }

    if ((m!=cm) && (cm)) cm.style.display='none'
    cm=m
    }
    </SCRIPT>

    </head>
    <BODY>
    <center>
    <table width="800" border="1">
    <tr>
    <td hight="15" width="200"><DIV ID="d1" onclick="parent.location.href = 'http://www.cnn.com/'" class="menu">News</DIV></td>
    <td hight="15" width="200"><DIV ID="d2" onmouseover="show(this,ds2);" class="menu">A very long title name</DIV></td>
    <td hight="15" width="200"><DIV ID="d3" onmouseover="show(this,ds3);" class="menu">Project</DIV></td>
    <td hight="15" width="200"><DIV ID="d4" onmouseover="show(this,ds4);" class="menu">Member area</DIV></td>
    </tr>
    </table>
    </center>

    <DIV ID="ds1" CLASS="submenu" STYLE="display:none">
    <A HREF="http:\\www.siteexperts.com">Site Experts</A>
    <BR>
    <A HREF="http:\\www.webtools.com">Web Tools</A>
    <BR>
    <A HREF="http:\\www.webdevelopersjournal.com">Web Developers Journal</A>
    </DIV>
    <DIV ID="ds2" CLASS="submenu" STYLE="display:none">
    <A HREF="">item1</A>
    <BR>
    <A HREF="">item2</A>
    <BR>
    <A HREF="">item3</A>
    <BR>
    <A HREF="">item4</A>
    </DIV>
    <DIV ID="ds3" CLASS="submenu" STYLE="display:none">
    <A HREF="">about ....</A>
    <BR>
    <A HREF="">doc's</A>
    <BR>
    <A HREF="">download</A>
    </DIV>
    <div ID="ds4" class="submenu" style="display:none">
    <A HREF="login.asp">Login</A>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

    Hope it works for you,

    Soter

  • #4
    New to the CF scene
    Join Date
    Sep 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks soterboy that solved two of my problems. Now I only need some sort of function that makes the submenu dissappear once the user takes the cursor off the menu\submenu.

    me' : I will switch to css

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, also, get rid of the table and use float: left on the div styles to give the same effect. Then set the width of your divs to whatever you want them to be. Finally, make sure you spell height with an e
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  

    Posting Permissions

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