|
JavaScript - 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! Similar TutorialsHi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
the css is as follows: Code:
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul ul ul ul li a {
margin-left: 60px; /* indent level 3 */
}
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
and finally the javascript: Code: var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";
//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;
//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
var url = location.href;
if (url.lastIndexOf("/") == (url.length-1)) {
url = url+menu_default_page;
}
if (url.lastIndexOf("?") >= 0) {
url = url.substring(0, url.lastIndexOf("?"));
}
if (url.lastIndexOf("#") >= 0) {
url = url.substring(0, url.lastIndexOf("#"));
}
menu_url = url;
var main = document.getElementById(menu_id);
if (!main) alert("No element with id '"+ menu_id +"' found");
menu_traverse(main);
}
/* Walks down the subtree and on the way back
sets properties.
returns bit set
1: set = element is a node, unset = element is a leaf
2: set = element contains the active node
4: set = element is the active A node
*/
function menu_traverse(element) {
var props = 0;
// walk down
for (var i=0; i<element.childNodes.length; i++) {
var child = element.childNodes[i];
props |= menu_traverse(child); // aggregate bits
}
// on the way back now
switch (element.tagName) {
case "UL":
props |= 1;
break;
case "LI":
var c1 = (props & 1) ?
((props & (2|4)) ? menu_open_class : menu_closed_class)
: menu_leaf_class;
element.className = element.className ? element.className+" "+c1 : c1;
if (props & 4) {
if (!(props & 2)) element.className += " "+menu_active_class;
props |= 2;
props &= 1 | 2; // reset bit 4
}
break;
case "A":
if (props & 2) break; // once is enough
var href = element.getAttribute("href");
if (menu_isSameUrl(menu_url, href)) props |= 4;
break;
}
return props;
}
//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
if (b[j] == "..") { j-=2; continue; }
if (a[i] == "..") { i-=2; continue; }
if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
if (! (a[i] == b[j])) return false;
i--;
j--;
}
return true;
}
New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); ? how would i make it for a menu so you could press it and it would go down to click on a link.
Hi there, I am trying to create "sideways" sub menus off of my main vertical menu images. (Something like this example: http://netweblogic.com/demos/ddm/vddm-nomoo.htm but in the place of Menu Item 1, Menu Item 2, Menu Item 3 there would be roll over images.) The main vertical menu items I have are rollover images. I would like the sub menu to appear when you hover over the main menu item. When I attempt this using the above example, all of my other CSS and JS does not work. Any help on how to link my rollover menu images to the sub menu would be greatly appreciated! Thanks in advance! Here is the code for my menu (I have only included 2 menu items here, if you need more info please let me know): Code:
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/buttons/teamandcorpsports.jpg','images/buttons/performancesports.jpg','images/buttons/flagsandbanners.jpg','images/buttons/home.jpg','images/buttons/catalogues.jpg','images/buttons/galleries.jpg','images/buttons/designown.jpg','images/buttons/dealerlogin.jpg','images/buttons/contactus.jpg','images/buttons/dealersignup.jpg')">
<div id="wrapper">
<div id="header">
<h1> </h1>
</div>
<!-- Main content -->
<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>
<script type="text/javascript" src="slideshow.js"></script>
</div>
<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teamandcorpsports1','','images/buttons/teamandcorpsports.jpg',1)"><img src="images/buttons/teamandcorpsports1.jpg" alt="Team and Corporate Sports" name="teamandcorpsports1" width="224" height="37" border="0" id="teamandcorpsports1" /></a></li>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('performancesports1','','images/buttons/performancesports.jpg',1)"><img src="images/buttons/performancesports1.jpg" alt="Performance Sports" name="performancesports1" width="224" height="37" border="0" id="performancesports1" /></a></li>
Here is my CSS code for the menu, not sure if this is where the issue is? Code: /* navigation menu */
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none; /* removes bullets */
background-image:url('background.jpg');
}
#navcontainer li {
margin: 0 0 0 0; /* separates list items */
}
#navcontainer a
{
display: block; /* achieves rollover */
width: 250px; /* list width */
text-decoration: none;
}
Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim Hello, I posted a question on here last week about using two independent yet identical javascript menus, visible he http://rebeccabersohn.com/ They are working perfectly in Firefox, but seem to be having some problems in Safari. Occasionally they work, however after a reload they seem to get "stuck". I have not been able to test the page on any other browsers, but of course it would be ideal if it could work everywhere (even ie6!!) I'm new to javascript and am unable to locate my problem. Thank you! Hi! I'm relatively new to JavaScript, though I've done some PHP and Java programming before. Still, be gentle . I have a menu with some images as the links. These images have onmouseover() and onmouseout() functions where the image is changed (onmouseover makes the image blue, while the onmouseout restores the original white). Now, my problem is that I also want to make the link corresponding to the currently open page to stay blue all the time, but I cannot for the life of me figure out how to do it. I've tried with onClick="document.[IMG].src='blue'" but clearly, as the page reloads to open the chosen link, the image is reset to white. I've also tried some other, unsuccessful solutions that don't need mentioning here... How do I make the image stay blue even when the page is reloaded? I'd be really happy if you could point me towards some examples of this being done. This is parts of my code (it's not much and I know it's a bit of a mess, it's in the developmental stages...): Code: function printHTMLTop()
{
var html = '<div class="main" id="main"> \
<div class="header" id="header">\
<div class="topHeader" name="topHeader"> \
<div class="logo" name="logo"><a href="index.php"><img src="logoBlue02.png" /></a></div> \
\
</div> \
<div class="midHeader" name="midHeader"><img src="midHeadImg.png" /></div> \
<div class="bottomHeader" name="bottomHeader"> \
<div class="menu" name="menu"><a href="index.php"><img name="hem" id="hem" src="menu_HemW.png" onmouseover="document.hem.src=\'menu_HemB.png\'" onmouseout="document.hem.src=\'menu_HemW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Contract.php"><img name="skapa" src="menu_SkapakontraktW.png" onmouseover="document.skapa.src=\'menu_SkapakontraktB.png\'" onmouseout="document.skapa.src=\'menu_SkapakontraktW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="gbookAdd.php"><img name="gbook" src="menu_GbookW.png" onmouseover="document.gbook.src=\'menu_GbookB.png\'" onmouseout="document.gbook.src=\'menu_GbookW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Forskning.html"><img name="forskning" src="menu_ForskningW.png" onmouseover="document.forskning.src=\'menu_ForskningB.png\'" onmouseout="document.forskning.src=\'menu_ForskningW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Intervjuer.html"><img name="intervju" src="menu_IntervjuerW.png" onmouseover="document.intervju.src=\'menu_IntervjuerB.png\'" onmouseout="document.intervju.src=\'menu_IntervjuerW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Ungdom.html"><img name="ungdom" src="menu_UngdomW.png" onmouseover="document.ungdom.src=\'menu_UngdomB.png\'" onmouseout="document.ungdom.src=\'menu_UngdomW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Lankar.html"><img name="lank" src="menu_LankarW.png" onmouseover="this.src=\'menu_LankarB.png\'" onmouseout="this.src=\'menu_LankarW.png\'" /></a></div> \
</div> \
</div> \
<div class="mid" id="mid">';
document.write(html);
}
Thanks for your help! I'm trying to learn to write javascript myself. So please, don't right anything for me, just steer me in the right direction. The way I have my my navigation set up is when the user clicks on a section of the main nav, the subnav displays beneath the header (see the pic more a visual idea). I want the the subnav for "Services" to be displayed on all pages that are listed under Services. Same thing for everything else on the nav bar. They way it's set up right now, the "about" submenu is displayed on every page. If the user clicks on "services" then that submenu displays. Just in case you need it, I'm posting the code for that. Like I said above, please don't write anything for me, just point me in the right direction. Code: /*Javascript to display Sub Menu */
function showAbout() {
if(subnav.style.display=="none") {
subnav.style.display="block";
services.style.display="none";
contact.style.display="none";;
partners.style.display="none";
}
else subnav.style.display="none";
}
function showServices() {
if(services.style.display=="none"){
services.style.display="block";
subnav.style.display="none";
contact.style.display="none";
partners.style.display="none";
}
else services.style.display="none";
}
function showContact() {
if(contact.style.display=="none"){
contact.style.display="block";
subnav.style.display="none";
services.style.display="none";
partners.style.display="none"
}
else contact.style.display="none";
}
function showPartners() {
if(partners.style.display=="none"){
partners.style.display="block";
subnav.style.display="none";
services.style.display="none";
contact.style.display="none";
}
else partners.style.display="none";
}
I have not yet bought the space for the website yet, so I cannot give a live demonstration. Basically, I have a piano side menu, and OnMouseOver, the keys look like they have been pressed by swapping the image, and on two keys sound sort of plays... The note sounds I have been limited to this website, as I cannot find anything better of which I am able to download... When I tested the menu, everything works, but the sounds are very delayed.... HTML Code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="structure/Global.css" />
<script type="text/javascript" src="structure/PianoMenu.js"></script>
</head>
<body>
<div id="PianoMenu" class="Container">
<div id="KeyE1" class="KeyE1" onmouseover="this.className='KeyE1-Over'" onmouseout="this.className='KeyE1'">
<a href="#">
Here
</a>
</div>
<div class="KeyD1" onmouseover="this.className='KeyD1-Over'" onmouseout="this.className='KeyD1'">Here</div>
<div id="KeyC1" class="KeyC1" onmouseover="this.className='KeyC1-Over'; playSound('file:///C:/Users/TIMarshall/Desktop/Websites/AaronSweeney/Sounds/piano_middle_C.mp3');" onmouseout="this.className='KeyC1'">Here</div>
<div id="KeyB1" class="KeyB1" onmouseover="this.className='KeyB1-Over'; playSound('file:///C:/Users/TIMarshall/Desktop/Websites/AaronSweeney/Sounds/piano_B.mp3');" onmouseout="this.className='KeyB1'">Here</div>
<div class="KeyA1" onmouseover="this.className='KeyA1-Over'" onmouseout="this.className='KeyA1'">Here</div>
<div class="KeyG" onmouseover="this.className='KeyG-Over'" onmouseout="this.className='KeyG'">Here</div>
<div class="KeyF" onmouseover="this.className='KeyF-Over'" onmouseout="this.className='KeyF'">Here</div>
<div class="KeyE" onmouseover="this.className='KeyE-Over'" onmouseout="this.className='KeyE'">Here</div>
<div class="KeyD" onmouseover="this.className='KeyD-Over'" onmouseout="this.className='KeyD'">Here</div>
<div class="KeyC" onmouseover="this.className='KeyC-Over'" onmouseout="this.className='KeyC'">Here</div>
</div>
</body>
</html>
CSS Code: Code: /** NOTE E1 **/
#PianoMenu .KeyE1 { text-align: right; padding-right: 5px; padding-top: 9px; width:184px; height: 22px; background:url(../Images/PianoMenu/EB-FirstChild.png) no-repeat }
#PianoMenu .KeyE1-Over { cursor: pointer; text-align: right; font-weight:bold; padding-right: 5px; padding-top: 9px; width:184px; height: 22px; background:url(../Images/PianoMenu/EB-FirstChild-Hover.png) no-repeat; }
#PianoMenu .KeyE1-Over, .KeyE1 a:link { color:#000000; text-decoration:none;}
#PianoMenu .KeyE1-Over, .KeyE1 a:visited { color:#000000; text-decoration:none;}
#PianoMenu .KeyE1, .KeyE1-Over a:hover { color:#000000; text-decoration: none; font-weight:bold;}
/** NOTE D1 **/
#PianoMenu .KeyD1 { text-align: right; padding-right: 5px; padding-top: 2px; width: 184px; height: 22px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyD1-Over { cursor: pointer; text-align: right; font-weight:bold; padding-right: 5px; padding-top: 2px; width: 184px; height: 22px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyC1 { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF.png) no-repeat; }
#PianoMenu .KeyC1-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF-Hover.png) no-repeat; }
#PianoMenu .KeyB1 { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB.png) no-repeat; }
#PianoMenu .KeyB1-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB-Hover.png) no-repeat; }
#PianoMenu .KeyA1 { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyA1-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyG { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyG-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyF { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF.png) no-repeat; }
#PianoMenu .KeyF-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF-Hover.png) no-repeat; }
#PianoMenu .KeyE { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB.png) no-repeat; }
#PianoMenu .KeyE-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB-Hover.png) no-repeat; }
#PianoMenu .KeyD { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyD-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyC { width: 189px; height: 36px; background: url(../Images/PianoMenu/CF-LastChild.png) no-repeat; }
#PianoMenu .KeyC-Over { width: 189px; height: 36px; background: url(../Images/PianoMenu/CF-LastChild-Hover.png) no-repeat; }
JavaScript Code: Code: function playSound(soundfile) {
document.getElementById("KeyC1").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
function playSound(soundfile) {
document.getElementById("KeyB1").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
I am guessing I need something in my code to preload the files, and something to say OnMouseOut stop playing... Whether or not my presumption is right or not, I do not know what to do nore how to do it. Best Regards, Tim I'm trying to get the menu divs' width to grow, extending to the right but am not getting any animation at all... I'm not sure if I even have the right code... Code: <script type="text/javascript">
$(document).ready(function(){
$('#menu').mouseover(function(){
$(this).stop().animate({"right": 20 }, 400);
}).mouseout(function(){
$(this).stop().animate({"right": 0 }, 400);
});;
});
</script>
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#top" class="scroll">Home</a></div>
<br />
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#who" class="scroll">Who We Are</a>
</div>
<br />
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#what" class="scroll">What we do</a>
</div>
<br />
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#contact" class="scroll">Contact Us</a>
</div>
and here is the css Code: #menu {
width:125px;
height:24px;
background:#C00;
font: #C00;
}
#menu a {
color: #C00;
}
#menu a:visited {
color: #C00;
}
#menu a:hover {
color: #FFF;
}
right now I'm just trying to get it to grow but my original idea was to have the bars small with no words then when you mouse over it reveals the words when it grows to the right around 50px. When clicked it stays extended... ANANANAY Help would be greatly appreciated!!! here is the link to the temp site: http://sethwardallison.com/fargo/index.htm Ok, newbie here. Like, REAL new. Anyway, used some script for an animated drop down menu from clarklab.net. I want users to click on menu to expand to sub's, but I can't figure out how to fix it from expanding every single one. I also want users to be able to close back up. Help? I am ready to jump. Thanks Here is the site, vertical navigation on left side: Here's ma' code Code: <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});
$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});
$('ul.menu_body li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>
Code: <div class="container">
<div class="menu_head_nodrop"><p><a href="administrativeservices.html">Administrative Services</a></p>
</div>
<div class="menu_head_nodrop">
<p><a href="birthdeathcertificates.html">Birth & Death Records</a></p>
</div><div class="menu_head">
<p>Construction Programs</p>
</div>
<ul class="menu_body">
<li><a href="manufacturedhomes.html">Manufactured Homes Installation</a></li>
<li><a href="plumbingprogram.html">Plumbing Inspections</a></li>
<li><a href="healthyhomes.html">Healthy Homes</a></li>
</ul><div class="menu_head">
<p>Environmental Health</p>
</div><ul class="menu_body">
<li><a href="environmentalhealth.html">Beach Monitoring</a></li>
<li><a href="rabies.html">Rabies Control</a></li>
<li><a href="foodprotection.html">Food Service</a></li>
<li><a href="householdsewage.html">Sewage Treatment Systems</a></li>
<li><a href="Radon.html">Radon</a></li>
<li><a href="leadsafety.html">Lead Safety</a></li>
<li><a href="manufacturedhome.html">Manufactured Home Parks</a></li>
<li><a href="marinas.html">Marinas</a></li>
<li><a href="http://0052c90.netsolhost.com/nuisance.html">Nuisance Complaints</a></li>
<li><a href="privatewater.html">Private Water Systems</a></li>
<li><a href="poolandspa.html">Public Swimming Pools & Spas</a></li>
<li><a href="realestatesurveys.html">Real Estate Surveys</a></li>
<li><a href="rvparks.html">RV Parks & Campgrounds</a></li>
<li><a href="http://www.odh.ohio.gov/odhPrograms/eh/schooleh/sehmain.aspx" target="_blank">Schools</a></li>
<li><a href="tattooandbody.html">Tattoo & Body Piercing</a></li>
</ul><div class="menu_head">
<p>Health Education & Outreach</p>
</div><ul class="menu_body">
<li><a href="communityhealth.html">Community Health</a></li>
<li><a href="http://www.scrubclub.org/home.aspx" target="_blank">Handwashing</a></li>
<li><a href="healthyhomes.html">Healthy Homes</a></li>
<li><a href="leadsafety.html">Lead Safety</a></li>
<li><a href="lifeskills.html">LifeSkills</a>
<li><a href="schoolwellness.html">School Wellness</a>
<li><a href="smokefreeworkplace.html">Smoke Free Workplace</a></li>
<li><a href="teenpregnancy.html">Teen Pregnancy Prevention</a></li>
</ul><div class="menu_head">
<p>Nursing & Clinic Services</p>
</div><ul class="menu_body">
<li><a href="familypractice.html">Family Practice Services</a></li>
<li><a href="bccpinfo.html">Breast & Cervical Cancer Program</a></li>
<li><a href="childrenshealth.html">Sports & Work Physicals</a></li>
<li><a href="specialneedschildren.html">Children with Special Needs</a></li>
<li><a href="communicabledisease.html">Communicable Disease</a></li>
<li><a href="familyplanningclinic.html">Family Planning</a></li>
<li><a href="helpmegrow.html">Help Me Grow</a></li>
<li><a href="HIVAIDS.html">HIV/AIDS Testing</a></li>
<li><a href="homehealthcare.html">Home Health Care</a></li>
<li><a href="immunizationfaqs.html">Immunization/Shots</a></li>
<li><a href="leadscreeningandtesting.html">Lead Screening & Testing</a></li>
<li><a href="prenatalclinic.html">Pregnancy Testing & Assistance</a></li>
<li><a href="schoolnursing.html">School Nursing</a></li>
<li><a href="seniorclinic.html">Senior Clinic</a></li>
<li><a href="specialtyclinics.html">Outreach Clinics</a></li>
<li><a href="HIVAIDS.html">STD Clinic</a></li>
<li><a href="tbtesting.html">TB Testing</a></li>
</ul><div class="menu_head">
<p>Public Health Preparedness</p>
</div><ul class="menu_body">
<li><a href="publichealth.html">General Information</a></li>
<li><a href="medicalreservecorps.html">Medical Reserve Corps</a></li>
</ul><div class="menu_head">
<p>WIC</p>
</div><ul class="menu_body">
<li><a href="wic.html">WIC Services</a></li>
<li><a href="http://www.odh.ohio.gov/odhPrograms/ns/wicn/wic1.aspx" target="_blank">Learn More About WIC</a></li>
</ul>
</div>
Hi Friends......... I have two frames in page and in top frame i have a menu.... some of the submenus are clipped because they hide below second frame as height of first frame is small...however i dont want to change height of frames.... So is there any way so that i could display rest of submenus which are being clipped over second frame...... Please help..... Hi All, I want an accordion menu and which is as follows 1.it should be a vertical accordion menu 2.every menu should display with image and link 3.if i click on image or link then only menu should display or open to show sub menu otherwise it should not display. Please tell the solution for the above ThanksAhead Venkat i got the float error on the website of http://www.cart-test.com the float button always stay at the same position... <script language="JavaScript" type="text/javascript" src="floating_menu.js"></script> On some websites or templates such as Ministes you must remove this tag at the top of each HTML page for this menu to float: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> how to slove this??? anyone help ??? thanks Hi, I have an animated banner on my homepage. I have a CSS menu. The CSS menu is appearing behind the JS banner. Only in one version of IE8 (8.0.6001.18702). Other version of IE 8, it works fine. I have set all the Z-index values in the CSS. I was wondering if you could add anything in the JS. Like for SWF you can set <param name="wmode" value="transparent">. The site is http://capitalshores.com/ I am using this slideshow: http://www.dynamicdrive.com/dynamici...nslideshow.htm Thanks, Ryan i am using chained combox in a form. in coda-slider. but (not first) in other tab chained combobox is not run (mycodes is in attachment) my codes is in attachment |
|||||||