SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

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

    Question Menu hover timer - return to page default


    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

    Here is the HTML for my menu:
        <div id="ddtabs" class="basictab">
                <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>
        <div id="tabcontentcontainer">
            <div id="sc1" class="tabcontent">
                <!--Sub Links #1 -->
                    <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>
            <div id="sc2" class="tabcontent">
                <!--Sub Links #2 -->
                    <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>
            <div id="sc3" class="tabcontent">
                <!--Sub Links #3 -->
                    <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>
            <div id="sc4" class="tabcontent">
                <!--Sub Links #4 -->
                    <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>
            <div id="sc5" class="tabcontent">
                <!--Sub Links #5 -->
                    <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>
    Here is the CSS:
    .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:
    * DD Tab Menu script- &#169; Dynamic Drive DHTML code library (
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at 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){
    if (previoustab!="")
    if (cid!=""){
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    for (i=0; i<tabobjlinks.length; i++)
    function collectddtabs(){
    var tabobj=document.getElementById("ddtabs")
    function do_onload(){
    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)
    Any help is TREMENDOUSLY appreciated. Thank you!
    Last edited by DynaWerx; Jan 9, 2007 at 17:10. Reason: Include additional information


Posting Permissions

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