SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    UK
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript - Collapsable Menu

    Hi

    I have built the following code that creates a simple collapsable menu, with a link (onmouseOver) but the problem i have is I would like this to be within a table so that when you place your mouse over the top link it displays the extra (hidden) links with new table rows.

    <html>
    <head>
    <title>Navagation Link (onMouseover)</title>
    <style type="text/css">
    #menu {width: 140px;background: white;}
    #menu div {display: none;}
    #menu div a ,img {text-decoration: none;}
    #menu div a:hover {text-transform: uppercase;}
    </style>
    <script type="text/javascript" language="javascript">
    // Navagation with Link
    function show(which) {
    var m, els, el, i = 0;
    if (document.getElementById) {
    m = document.getElementById('menu');
    els = m.getElementsByTagName('div');
    while (el = els.item(i)) {
    if (which == i)
    el.style.display = (el.style.display != 'block') ? 'block' : 'none';
    else el.style.display = "none";
    i++;
    }
    }
    }
    onload = function() {
    var Q = location.search.substring(1);
    if (Q) {
    var menu = Number(Q.split('=')[1]);
    show(menu);
    }
    }
    </script>
    </head>
    <body>
    <div id="menu">
    <a href="http://www.yahoo.com" onmouseover="show(0);">Home</a>
    <div>
    <a href="next_page.htm?which=0">About Us</a><br>
    <a href="next_page.htm?which=0">Vacancies</a><br>
    <a href="next_page.htm?which=0">Contact Us</a>
    </div>
    <BR>
    <a href="http://www.yahoo.com" onmouseover="show(1);">Home</a>
    <div>
    <a href="next_page.htm?which=1">About Us</a><br>
    <a href="next_page.htm?which=1">Vacancies</a><br>
    <a href="next_page.htm?which=1">Contact Us</a>
    </div>
    <BR>
    <a href="http://www.yahoo.com" onmouseover="show(2);">Home</a>
    <div>
    <a href="next_page.htm?which=2">About Us</a><br>
    <a href="next_page.htm?which=2">Vacancies</a><br>
    <a href="next_page.htm?which=2">Contact Us</a>
    </div>
    <BR>
    <a href="http://www.yahoo.com" onmouseover="show(3);">Home</a>
    <div>
    <a href="next_page.htm?which=3">About Us</a><br>
    <a href="next_page.htm?which=3">Vacancies</a><br>
    <a href="next_page.htm?which=3">Contact Us</a>
    </div>
    <BR>
    <a href="http://www.yahoo.com" onmouseover="show(4);">Home</a>
    <div>
    <a href="next_page.htm?which=4">About Us</a><br>
    <a href="next_page.htm?which=4">Vacancies</a><br>
    <a href="next_page.htm?which=4">Contact Us</a>
    </div>
    <BR>
    </div>
    </body>
    </html>

    So to recap. I would like the whole thing in a table (5 rows - 1 col) 140px wide. with the head link in each row. When the mouse is placed over one of the head links the extra rows automatically appear below. Maybe with a different background color to highlight that these are sub menus.

    Thanks for any help in advance!

    Allan

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually, the trend is to go from table layout to DIVs - but you want to go the other way?

    You can set the 'display' of TRs just like you are doing with DIVs.


Bookmarks

Posting Permissions

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