SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy I'm confused. I would like to

    display a menu of links on mouseover from one link.

    Can someone suggest a reference for me to take a look at that explains in detail the script I need to make this function? The tutorial at webmonkey is too opaque for me (if you can believe it) to understand/modify.

    Thank you.

  2. #2
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are some excellent scripts at http://www.dynamicdrive.com .

    Also at http://www.brainjar.com . Here also has a tutorial explaining how his menu works. Hope that helps and good luck.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Thanks very much.

    I haven't been to dynamicdrive in a while; perhaps it's worth looking at again.

    You're right -- brainjar is an excellent resource, but a little too in depth for what I need at the moment. Thanks for reminding me of them, though.

  4. #4
    long gone but not forgotten AljapaCo's Avatar
    Join Date
    Aug 2001
    Location
    Sweden
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here´s another:

    www.hotscripts.com is an excellent resource!!
    T O B I A S - S T R A N D H | visit my site here
    OPERA7 /MSIE6 /FireFox 1.1/Win2000 /ADSL /17" Screen /1024x768
    god doesn't create genius, he clones me.............

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks for the suggestions. But . . .

    This is the SIXTH script that I have tried to figure out now and my time to do this is waning. I found it at youngpup.net, as suggested (the second menu example; the first wasn't there). If anyone wants to take a look at what I've done, I would really appreciate it. I can't even get it formatted properly. The author at youngpup says that it's no problem to use a table instead of a menubar for this, but I'll be damned if I know how to do that; I really need to use a table for this. These are my goals: to get each of the links in each division to fall down in a menu underneath each of the three main titles/page links (currently, in the box) on mouseover; to have the text of the containers smaller in type than the original title/link. My attempt is pretty close to youngpup's, but even using the simple code at the end of this link, as opposed to trying to clone the source code for his example, it didn't work. Thanks for your help!

    <script language="javascript">
    var menus = [
    new ypSlideOutMenu("menu1", "down", 5, 80, 170, 59),
    new ypSlideOutMenu("menu2", "down", 57, 80, 170, 40),
    new ypSlideOutMenu("menu3", "down", 147, 80, 170, 97),
    ]

    for (var i = 0; i < menus.length; i++) {
    menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
    menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
    }
    </script>

    <style type="text/css">

    body {
    font-size:20px;
    font-family:arial, sans-serif;
    color:#ff9900;
    text-decoration:none;
    }
    #menubar {
    position:absolute;
    width:425px;
    left:5px;
    top:55px;
    background-color:#faede0;
    border: 0px;
    padding:2px;
    }
    #menubar a {
    color:#ff9900;
    border: 0px;
    padding-left:5px;
    padding-right:5px;
    text-decoration:none;
    }
    #menubar a.active {
    border-bottom-color:#9933cc;
    border-right-color:#9933cc;
    border-left-color:#faede0;
    border-top-color:#faede0;
    }
    .menu .options {
    margin-right:1px;
    margin-bottom:1px;
    border:1px solid #9933cc;
    background-color:#faede0;
    }
    .menu a {
    color:#9933cc;
    display:block;
    padding:2px 10px;
    text-decoration:none;
    background-color:transparent;
    }
    .menu a:hover {
    background-color:#faede0;
    color:#ff9900;
    }

    </style>
    </head>
    <body>

    <div id="menubar">
    <a id="act0" href="/myjourney/ onmouseover="ypSlideOutMenu.showMenu('menu1'); onmouseout="ypSlideOutMenu.hideMenu('menu1')" title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')">My Journey<br>Back to<br>Health and Function<br>from CFIDS/ME</a>
    <a id="act1" href="/realtreatment/ onmouseover="ypSlideOutMenu.showMenu('menu2'); onmouseout="ypSlideOutMenu.hideMenu('menu2')" title="onmouseover=ypSlideOutMenu.showMenu('menu2'); onmouseout=ypSlideOutMenu.hideMenu('menu2')">Real Treatment</a>
    <a id="act2" href="/advocacy/ onmouseover="ypSlideOutMenu.showMenu('menu3'); onmouseout="ypSlideOutMenu.hideMenu('menu3')" title="onmouseover=ypSlideOutMenu.showMenu('menu3'); onmouseout=ypSlideOutMenu.hideMenu('menu3')">Advocacy</a>
    </div>


    <div id="menu1Container">
    <div id="menu1Content" class="menu1">
    <div class="options">
    <a href="/myjourney/who/">Who I Am</a>
    <a href="/myjourney/when/">When and How I First Got Sick</a>
    <a href="/myjourney/how/">How I Recovered from CFIDS/ME</a>
    <a href="/myjourney/why/">Why I Continue to Tell People About My Illness</a>
    <a href="/myjourney/sad/">The Saddest Thing</a>
    <a href="/myjourney/fiction/">Fiction</a>
    </div>
    </div>
    </div>

    <div id="menu2Container">
    <div id="menu2Content" class="menu2">
    <div class="options">
    <a href="/realtreatment/treatmentprotocol/">Treatment Protocol</a>
    <a href="/realtreatment/considerations/">Treatment Considerations</a>
    <a href="/realtreatment/pharm/">Pharmaceutical Toll-Free Numbers</a>
    <a href="/realtreatment/testing/">Testing</a>
    <a href="/realtreatment/hhv6/">HHV-6: What the Heck is <i>This</i>?</a>
    <a href="/realtreatment/hallmark/">The Hallmark Studies</a>
    <a href="/realtreatment/yeast/">CFIDS Theory: Is it Yeast?</a>
    <a href="/realtreatment/lyme/">CFIDS Theory: Is it Lyme?</a>
    <a href="/realtreatment/myco/">CFIDS Theory: Is it Mycoplasma?</a>
    <a href="/realtreatment/disclaimer/">Disclaimer</a>
    </div>
    </div>
    </div>

    <div id="menu3Container">
    <div id="menu3Content" class="menu3">
    <div class="options">
    <a href="/advocacy/cfs/">"CFS" and "CFIDS" are not the Same Disease</a>
    <a href="/advocacy/four/">Four Types of Fatigue with CFIDS</a>
    <a href="/advocacy/psych/">The Reprehensible Lie that CFIDS is Psychosomatic or Depressive Illness</a>
    <a href="/advocacy/AIDS/">AIDS and CFIDS</a>
    <a href="/advocacy/HIV/">Why HIV does not Cause AIDS</a>
    <a href="/advocacy/defreitas/">Why DeFreitas's Retrovirus does not Cause CFIDS</a>
    <a href="/advocacy/tropism/">The Tropism of HHV-6 and How it Causes AIDS and CFIDS</a>
    <a href="/advocacy/discrimination/">Discrimination</a>
    <a href="/advocacy/name/">The Change-the-Name Boondoggle</a>
    <a href="/advocacy/medicoresearch/">U.S. Healthcare and the Medicoresearch Industry</a>
    <a href="/advocacy/petition/">My Petition to the United Nations</a>
    <a href="/advocacy/needs/">What Still Needs to be Done</a>
    <a href="/advocacy/vaccines/">Vaccines</a>
    </div>
    </div>
    </div>


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
  •