SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Member DynaWerx's Avatar
    Join Date
    Jan 2007
    Location
    Dallas, Oregon
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Menu hover timer - return to page default

    Hello,

    Pardon my ignorance, but I am hoping you nice folks can help me out.

    Here's the scenario:
    I have a horizontal CSS menu. When hovering over one of the main tabs, another layer of links is listed horizontally below the main tabs. Once the 2nd layer is shown for a hovered main tab, it stays until another main tab is hovered. The menu is set to display the 2nd layer by default for one of the main tabs.

    What I want to do:
    After a 2nd layer is shown for a hovered main tab and the mouse is moved elsewhere, I want the current 2nd layer to show for 1 to 2 seconds and then have the menu go back to the default main tab and 2nd layer.

    It's hard to explain, I hope I have explained it well enough. The current script I am using is the DD Tab Menu script from Dynamic Drive.

    You can see the current setup at http://labs.dynawerx.com/test/.

    Here is the HTML for my menu:
    Code:
        <div id="ddtabs" class="basictab">
            <ul>
                <li><a href="products.html" onMouseover="expandcontent('sc1', this)">Products &amp; Services</a></li>
                <li><a href="preparation.html" onMouseover="expandcontent('sc2', this)">Preparation & Design</a></li>
                <li><a href="order.html" onMouseover="expandcontent('sc3', this)">How To Order</a></li>
                <li><a href="resources.html" onMouseover="expandcontent('sc4', this)">Help &amp; Resources</a></li>
                <li><a href="contact.html" onMouseover="expandcontent('sc5', this)">Contact &amp; Support</a></li>
            </ul>
        </div>
    
        <div id="tabcontentcontainer">
            <div id="sc1" class="tabcontent">
                <!--Sub Links #1 -->
                <ul>
                    <li><a href="item101.html">Item 101</a></li>
                    <li><a href="item102.html">Item 102</a></li>
                    <li><a href="item103.html">Item 103</a></li>
                </ul>
            </div>
    
            <div id="sc2" class="tabcontent">
                <!--Sub Links #2 -->
                <ul>
                    <li><a href="item201.html">Item 201</a></li>
                    <li><a href="item202.html">Item 202</a></li>
                    <li><a href="item203.html">Item 203</a></li>
                </ul>
            </div>
    
            <div id="sc3" class="tabcontent">
                <!--Sub Links #3 -->
                <ul>
                    <li><a href="item301.html">Item 301</a></li>
                    <li><a href="item302.html">Item 302</a></li>
                    <li><a href="item303.html">Item 303</a></li>
                </ul>
            </div>
    
            <div id="sc4" class="tabcontent">
                <!--Sub Links #4 -->
                <ul>
                    <li><a href="item401.html">Item 401</a></li>
                    <li><a href="item402.html">Item 402</a></li>
                    <li><a href="item403.html">Item 403</a></li>
                </ul>
            </div>
    
            <div id="sc5" class="tabcontent">
                <!--Sub Links #5 -->
                <ul>
                    <li><a href="item501.html">Item 501</a></li>
                    <li><a href="item502.html">Item 502</a></li>
                    <li><a href="item503.html">Item 503</a></li>
                </ul>
            </div>
        </div>
    Here is the CSS:
    Code:
    .basictab ul {
        margin: 15px 0 4px 4px;
        padding: 3px 0;
        margin-left: 0;
        font: bold 11px Verdana;
        text-transform: uppercase;
        list-style-type: none;
        text-align: left; /*set to left, center, or right to align the menu as desired*/
    }
    
    .basictab li{
        display: inline;
        margin: 5px 0 0 0;
    }
    
    .basictab li a {
        text-decoration: none;
        padding: 3px 7px;
        margin-right: 3px;
        border: 1px solid #777;
        background-color: #777;
        color: #fff;
    }
    
    .basictab li a:visited {
        color: #fff;
    }
    
    .basictab li a:hover, .basictab li a.current {
        background-color: #fff;
        color: #777;
        text-decoration: none;
    }
    
    .basictab li a:active {
        color: #fff;
    }
    
    #tabcontentcontainer {
        width: 95&#37;; /*width of 2nd level content*/
        height: 1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
        padding: 8px 0 0 10px;
    }
    
    .tabcontent {
        display: none;
    }
    
    .tabcontent ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    
    .tabcontent ul li {
        display: inline;
    }
    
    .tabcontent ul.selected{ /*selected 2nd level content*/
        display: block;
    }
    
    .tabcontent ul li a {
        color: #000080;
        padding: 2px 20px;
        display: block;
        float: left;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    .tabcontent ul li a:hover {
        background-color: #ddd;
        text-decoration: none;
    }
    And here is the Javascript:
    Code:
    /***********************************************
    * DD Tab Menu script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display (or "" if no corresponding tab content)]:
    var initialtab=[1, "sc1"]
    
    //Turn menu into single level image tabs (completely hides 2nd level)?
    var turntosingle=0 //0 for no (default), 1 for yes
    
    //Disable hyperlinks in 1st level tab images?
    var disabletablinks=0 //0 for no (default), 1 for yes
    
    
    ////////Stop editing////////////////
    
    var previoustab=""
    
    if (turntosingle==1)
    document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
    
    function expandcontent(cid, aobject){
    if (disabletablinks==1)
    aobject.onclick=new Function("return false")
    if (document.getElementById && turntosingle==0){
    highlighttab(aobject)
    if (previoustab!="")
    document.getElementById(previoustab).style.display="none"
    if (cid!=""){
    document.getElementById(cid).style.display="block"
    previoustab=cid
    }
    }
    }
    
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    collectddtabs()
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].className=""
    aobject.className="current"
    }
    
    function collectddtabs(){
    var tabobj=document.getElementById("ddtabs")
    tabobjlinks=tabobj.getElementsByTagName("A")
    }
    
    function do_onload(){
    collectddtabs()
    expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    Any help is TREMENDOUSLY appreciated. Thank you!
    Last edited by DynaWerx; Jan 9, 2007 at 17:10. Reason: Include additional information


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
  •