SitePoint Sponsor

User Tag List

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

    Question What if I want to do THIS?

    I would like to have links in a submenu display beneath a moused-over link which, in turn, link to different sections of the next page. I have 3 such main links, with between 6-8 sublinks each.

    I have been trying to figure out different java scripts (to preload each submenu link as a gif, etc.), but I get only so far in making it work.

    Any links to lessons/other forum questions/other sites that can explain this are appreciated.

    Thanks.

  2. #2
    SitePoint Addict rabbitdog's Avatar
    Join Date
    Jul 2001
    Location
    So. Tenn.
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you looked at the ones on http://www.dynamicdrive.com ?
    Mr Vector
    High quality, royalty free, vector graphics
    for t-shirt artists and graphic/web designers.

  3. #3
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can take a look here...might be helpful

    http://www.computerarts.co.uk/web/dhtml/dropdowns1.asp

  4. #4
    SitePoint Addict
    Join Date
    Feb 2001
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres one thats pretty easy to get going

    http://www.youngpup.net/_ui_webapp/g...deOutMenus.xml

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

    Thanks! I love young pup!

    And dynamic drive, too.

    You guys are the best.

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

    Unhappy Wait. I changed my mind. I don't love youngpup.

    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>&nbsp;
    <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>&nbsp;
    <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
  •