Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    78
    Thanks
    18
    Thanked 1 Time in 1 Post

    how to add delays to menu

    I recently created my first theme shortly after leaning css, but i am having trouble with my navbar. The main bar is a list with images, then when a user hovers over one a list drops horizontally on the bar below. Problem is when trying to click far off links it is very easy to slip and the menu disappears. What i need is some sort of delay to prevent this, or some way to make the menu show after clicking instead of hovering.

    Here is my code, i have two questions;

    1) I have never written a theme before, is this the proper way to code a navbar? (i hear making an actual list is important)
    2) How can i add a hover delay or change the submenu to be click activated?

    Here is a link to my test site so you can see it in action.

    Code:
    div#navi {
    	width: 960px;
    	height: 39px;
    }
    ul.navi {
    	margin:-2px 0px -2px -40px;
    }
    ul.navi, ul.navi li {
    	float: left;
    	list-style:none;
    }
    ul.navi li ul {
    	display: none;
    }
    ul.navi li:hover ul {
    	display:block;
    	list-style: none;
    	position:absolute;
    }
    ul.navi li:hover ul li {
    	padding-right:50px;
    }
    ul.navi li:hover ul li a{
    	color:#FFF;
    }
    ul.navi li:hover ul li a:hover{
    	color:#FFF;
    }
    
    div#navi2 {
    	width: 960px;
    	height: 29px;
    	background-image:url(images/nav_bottom.gif);
    	margin-top:-5px;

    Code:
    <div id="navi">
        <ul class="navi">
          <li><a href="/index.php"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_01.gif" /></a>
            <ul>
              <li><a href="/index.php?site=news">News</a></li>
              <li><a href="/index.php?site=news&action=archive">Archives</a></li>
              <li><a href="/index.php?site=articles">Articles</a></li>
              <li><a href="/index.php?site=calendar">Calendar</a></li>
              <li><a href="/index.php?site=faq">FAQ</a></li>
              <li><a href="/index.php?site=search">Search</a></li>
            </ul>
          </li>
          <li><a href="/index.php?site=forum"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_02.gif" /></a></li>
          <li><a href="/index.php?site=squads"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_03.gif" /></a>
            <ul style="margin-left:-255px;">
              <li><a href="/index.php?site=about">About Us</a></li>
              <li><a href="/index.php?site=squads">Squads</a></li>
              <li><a href="/index.php?site=members">Members</a></li>
              <li><a href="/index.php?site=clanwars">Matches</a></li>
              <li><a href="/index.php?site=history">History</a></li>
              <li><a href="/index.php?site=awards">Awards</a></li>
            </ul>
          </li>
          <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_04.gif" />
            <ul style="margin-left:-320px;">
              <li><a href="/index.php?site=forum">Forums</a></li>
              <li><a href="/index.php?site=guestbook">Guestbook</a></li>
              <li><a href="/index.php?site=registered_users">Registered Users</a></li>
              <li><a href="/index.php?site=whoisonline">Online Users</a></li>
              <li><a href="/index.php?site=polls">Polls</a></li>
              <li><a href="/index.php?site=server">Servers</a></li>
            </ul>
          </li>
          <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_05.gif" />
            <ul style="margin-left:-330px;">
              <li><a href="/index.php?site=files">Downloads</a></li>
              <li><a href="/index.php?site=tutorials">Tutorials</a></li>
              <li><a href="/index.php?site=movies">Movies</a></li>
              <li><a href="/index.php?site=gallery">Photos</a></li>
              <li><a href="/index.php?site=links">Weblinks</a></li>
              <li><a href="/index.php?site=demos">Demos</a></li>
            </ul>
          </li>
          <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_06.gif" />
            <ul style="margin-left:-710px;">
              <li><a href="/index.php?site=sponsors">Sponsors</a></li>
              <li><a href="/index.php?site=partners">Partners</a></li>
              <li><a href="/index.php?site=newsletter">Newsletter</a></li>
              <li><a href="/index.php?site=contact">Contact Us</a></li>
              <li><a href="/index.php?site=challenge">Fight Us</a></li>
              <li><a href="/index.php?site=joinus">Join Us</a></li>
              <li><a href="/index.php?site=linkus">Link Us</a></li>
              <li><a href="/index.php?site=imprint">Imprint</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="navi2"></div>

    Here are the two js scripts i tried, honestly I am not sure how to use them and couldn't get either to work. I think i installed them in the proper places, but i dont think i edited them to work properly;


    Code:
    var delay = 500; /* milli seconds */
    function attachHooks() {
        var menu = document.getElementById("navi");
        var menuItems = menu.getElementsByTagName("ul.navi li ul");
    	currentHover = menuItems[0];
        for (var i = 0; i < menuItems.length; i++) {
            menuItems[i].onmouseover = function () {activateMenuWithDelay(this);};
            menuItems[i].onmouseout = function () {deactivateMenuWithDelay(this);};
        }
    }
    
    function activateMenuWithDelay(ele) {
    	if(ele.timer) {
            clearTimeout(ele.timer);
    	}
    	ele.timer = setTimeout(function(){activateShowMenu(ele)}, delay);
    }
    
    
    
    function activateShowMenu(ele) {
    	var parent = ele;
        parent.className = "showMenu";
    }
    
    function deactivateMenu(ele) {
        var parent = ele;
        parent.className = " ";
    }
    
    function deactivateMenuWithDelay(ele) {
    	if(ele.timer) {
            clearTimeout(ele.timer);
    	}
        ele.timer = setTimeout(function(){deactivateMenu(ele)}, delay);
    }
    
    function initMenuDelay() {
    	attachHooks();
    	deactivateMenu();
    }
    
    function addLoadEvent(func) {
    	var oldonload = window.onload;
    	if (typeof window.onload != 'function') {
    	 	window.onload = func;
    	} else {
    	 	window.onload = function() {
    	 	oldonload();
    	 	func();
    	 	}
    	}
    }
    
    addLoadEvent(attachHooks);



    Code:
    <script type="text/javascript">
    
    sfHover = function() {
          var sfEls = document.getElementById("navi").getElementsByTagName("li");
          for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                      this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
          }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    Any help is appreciated!

  • #2
    New Coder
    Join Date
    Mar 2010
    Posts
    78
    Thanks
    18
    Thanked 1 Time in 1 Post
    Little help please?


  •  

    Posting Permissions

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