Hello all, first off thanks a ton for the css tutorials, thanks to this site i have created my first ever website template and with css! I am trying to add a delay to my drop down menus, as of now it is rather hard to click links because they disappear so fast. I have found a few random "hover delay" js scripts but i can not get them to work. I am going to link my current code, i am curious how to get a delay working on this nav bar and if i even used css properly to create what i have now. Here is a link to my test site also;
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;
<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 not sure how to use them and couldnt get either to work;
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);
<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>
I was also thinking that instead of the second list showing when they hover over the first, it would be much better if it showed after they clicked the first part, then it doesn't disappear until they click another. Any help is appreciated!