Learn VBA & Macros in 1 Week!

JavaScript - Javascript Menu Help

Full Excel VBA Course - Beginner to Expert

Javascript Menu Help	View Content

Hi,

I am working on modifying a menu, and trying to add a sub-sub menu under Mfg & Dist, where Operations would expand to show Reports and Content. However, I can't get it to work. I think some javascript modification is needed, but I don't know much javascript. Can anyone help me find what I would need to change?

Below is the code I have thus far. Thank you!

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=UTF-8" />
<title>Untitled Document</title>
<body>
<style>
.tab{line-height: 36px; text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 12px; color: #ffffff; cursor:pointer;}
.asd{text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 11px; color: #ffffff; cursor:pointer;}
.box {border-top: 1px solid #274f40; border-left: 1px solid #274f40; border-right: 1px solid #274f40; width: 148px; margin: 0; padding: 7px 8px 6px 10px; background-color:#4F7F6D;}
td.menuborder {background: #33735B url(http://dl.dropbox.com/u/16052106/58545.PNG);background-repeat: repeat-x; border-top:1px solid #1E3C31; border-bottom:1px solid #ABB8BB;}
td.menudiv {background: url(http://dl.dropbox.com/u/16052106/58546.PNG) no-repeat scroll 50% -2px transparent; padding-right: 20px;}
</style>
</head>



<script language=javascript>
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var menuActive = 0;
var menuOn = 0;
var onLayer;
var timeOn = null;

function showLayer(layerName,aa){
var x =document.getElementById(aa);
var tt =findPosX(x) - 11; 
var ww =findPosY(x) + 41; 

<!-- x.style.backgroundColor = '#6B8F81'; -->

if (timeOn != null) {
clearTimeout(timeOn);
hideLayer(onLayer);
}
if (IE4) {
var layers = eval('document.all["'+layerName+'"].style');
layers.left = tt;
layers.top = ww;
eval('document.all["'+layerName+'"].style.visibility="visible"');
}
else {
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'visible';
elementRef.style.left = tt;
elementRef.style.top = ww;
}
}
}
onLayer = layerName
}

function Indicator(n)
{
var box = document.getElementByID(n);
box.style.backgroundcolor='#000000';	
}

function hideLayer(layerName){
if (menuActive == 0)
{
if (IE4){
eval('document.all["'+layerName+'"].style.visibility="hidden"');
} 
else{
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'hidden';
}
}
}
}
}

function btnTimer() {
timeOn = setTimeout("btnOut()",600);

}

function btnOut(layerName){

if (menuActive == 0){
hideLayer(onLayer)
}
}

var item;

function menuOver(itemName){
item=itemName;
itemName.style.backgroundColor = '#33735B'; //background color change on mouse over 
clearTimeout(timeOn);
menuActive = 1
}

function menuOut(itemName){
if(item)
itemName.style.backgroundColor = '#4F7F6D';
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 100)
}

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>

<table valign=top cellpadding=0 cellspacing=0 width=100% border=0>
<tr><td class="menuborder">
<table align=left>
<tr>
<!-- td>&nbsp; &nbsp; </td -->
<td id=mm0 align=left><a class=tab href="/portal/page/portal/ABCEmp"><div><span> <b>&nbsp; &nbsp; Home</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm7 align=left> <a class=tab href="/portal/page/portal/ABCEmp/EngIT"> <div><span><b>Eng/IT</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm6 align=left> <a class=tab href="/portal/page/portal/ABCEmp/Finance"> <div><span><b>Finance</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm2 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu2",'mm2')> <b>Human Resources</b></td>
<td class="menudiv"></td>
<td id=mm3 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu3",'mm3')>  <b>Market Segments</b></td>
<td class="menudiv"></td>
<td id=mm4 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu4",'mm4')> <b>Mfg &amp; Dist</b></td>
<td class="menudiv"></td>
<td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <div><span><b>New Bus Dev</b></span></div></a></td>
<td class="menudiv"></td>
<!-- td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <b>New Bus Dev</b></a></td>
<td class="menudiv"></td -->
<!--			<td id=5 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("Menu2",'2')><a class=tab href="/portal/page/portal/ABCEmp/IT">  <b>IT</b></a></td>
<td> &nbsp; &nbsp; </td>
-->
</tr>
</table>


<!-- <div id=MainMenu1 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">



</div> -->

<div id=MainMenu3 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">

<div>
<a  class=asd href="/portal/page/portal/ABCEmp/MktSeg/BCS"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;BCS &nbsp;&nbsp; &nbsp;</p></a> 
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/AquPlan"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;BLS &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/BusServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Business Services &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/ClntServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Client Services &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Est"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Estimating &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Mark"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Marketing &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Pap"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Paper</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Sal"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Sales &nbsp; &nbsp; &nbsp;</p></a>
</div>
<!-- div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/LTS"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Long Term Sched &nbsp; &nbsp; &nbsp;</p></a>
</div -->

</div>
<div id=MainMenu2 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">

<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>  
&nbsp;HR Home &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Job"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Job Postings &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Saf"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Safety &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/ShrServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Shared Services &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Trans"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Transformation &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>
<div id=MainMenu4 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Man"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Manufacturing &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=showLayer("Reports",'mm8')>
<b>Operations</b></p></a>


</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/SupChn"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Supply Chain &nbsp; &nbsp; &nbsp;</p></a>
</div>

</div>

<div id=Reports style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1001;">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/rep"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Reports &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/con"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Content &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>


</td>
</tr></table>
</body>
</html>

-Krzysztof

Full Excel VBA Course - Beginner to Expert

Javascript Menu Tree Issue With Sub-menu

Similar Tutorials

View Content

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);

Help With Javascript Accordian Menu In Ie

Similar Tutorials

View Content

I've building a site for a letting agents using Joomla and JomEstate Pro. I've got everything working great and am quite happy with it. However, there is an accordion 'property filter' menu on the right which works fine in every other browser, but not in IE. Would anyone be able to tell me why it is doing this or at least if there is any way i can find out what is wrong.

Sample site is at www.dspadtest.co.uk/tapton

Thanks.

Help With Expanding Menu Javascript?

Similar Tutorials

View Content

If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet.

I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this:
Menu Item 1 [Click to expand]
-Sub Item 1.1 [Click to expand]
-Sub Item 2.1 [Click to get to page]

Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please?

URL: http://dinotamermeep.blogspot.com/p/blog-archive.html

Thank you,
-Meepski

Hide Javascript Menu From Ie9?

Similar Tutorials

View Content

I do not understand javascript at all. For about eight years I've had a UDM javascript menu on each of about 200 pages. It consists of a bunch of files that live in the top of my website and are called to each page by four lines of script. I have had only to edit appearance and links in one file. Instructions were to leave the others alone.
The present version of the UDM menu is not free, as the old one was, and if I did buy it I'm not at all sure I'd be able to cope with it. Unless the names of the new files matched those of the old ones, I'd have to go in and edit each page individually.
My problem is that IE9 doesn't display the menu, but does display its background, so there's a big beige block on the top left of every page. It looks bad.
Would I be able to add to one of the files something like a conditional comment such as "If IE9 display none"?
I would be truly grateful for any ideas that would help me fix this.
My site is http://fay.iniminimo.com/
Thank you so much for your interest.
Fay

Javascript Rotating Menu.

Similar Tutorials

View Content

I'm pretty new to Javascript and found this menu, which I want for my website.

I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again.

I've tried to do this myself with .this.style.invisibility="hidden"; but... i lack skill to do it the right way i guess :P

Does anyone know the solution?

Here's the code of the menu:

Code:

eye={
p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,
isVertical:0,a1:0,a2:0,a3:0,
color:'#FFFFFF',
colorover:'#FFFFFF',
backgroundcolor:'#000000',
backgroundcolorover:'#000000',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:function(){this.p=this.r/this.s;

this.a1=this.a2=this.isVertical?0:Math.PI/2},

spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";

document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},

muta:function(){a8=document.getElementById("controale");


for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");

a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));

a10=(this.p+xi)/(2*this.p);

a11=this.fontsize*(this.p+xi)/(2*this.p)+2;

a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;

a10=(this.p+yi)/(2*this.p);

a11=this.fontsize*(this.p+yi)/(2*this.p)+2;

a12=parseInt(100*(this.p+yi)/(2*this.p))};

a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;

a9s.top=(yi+this.y-a14/2)+"px";

a9s.left=(xi+this.x-a13/2)+"px";

a9s.width=a13+"px";a9s.fontSize=a11+"px";

a9s.zIndex=a12};

a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;

a8.style.left=this.x-a8.offsetWidth/2;

if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);

if(Math.abs(this.a1-this.a2)<this.pas/this.v)

this.a1=this.a2;

setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;

document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">&lt;&lt;</button> <button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">&gt;&gt;</button></div>');eye.muta()}};

function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}

return totaloffset;
}

Javascript Menu - Slow In Ie

Similar Tutorials

View Content

Hello guys,

The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE.

Take a look here - the menu is called "Produkter"

Thanks in regard

Javascript Menu Flickering In Ff On Mac

Similar Tutorials

View Content

1) Script Title:
Arrow Side Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu-arrow.htm

3.) My Test Pg.
http://macmajor.homeip.net/shadow_test/shadow.html

3) Describe problem:

After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it ‘moves’ and completely highlights the other item in it’s selected state (as if you moved your mouse there).

If you know of a fix, I would certainly appreciate it.

Thanks in advance!
Tracy

Javascript Menu Type

Similar Tutorials

View Content

Okay I am looking for some good free scripts of dynamic javascript menu (I dont know how to call them properly). A type of menu where let say on the left you click on item and on the right it updates content to cliced item. Any ideas where could I find some good or how are those called?

Reply With Quote

01-24-2015, 11:31 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

I think you need to be more specific.

Do you mean you want to do this all in one HTML page? So that the displayed content changes depending on what tab or button the user clicks on? That's not quite the same thing as what is normally called a navigation menu, where more often then not you are using the menu to get to ANOTHER html page.

Help With A Dropdown Menu Using Javascript

Similar Tutorials

View Content

I am using a drop down menu for a website I'm working on to display menu items under categories. I'm using the same code to do this on two different pages with the actual content of the menu's loading from a MySQL database using PHP scripts.

www.browniepointscatering.com/menu.php
www.browniepointscatering.com/seasonal.php

On the menu.php page I left the code below in the mix which drops down the first category listed on the left.

On the seasonal.php page I took the code below out and it no longer drops down any menu by default when the page is loaded.

What I'd like to do is drop down nothing initially when the page is loaded but if someone opens up the "Cupcakes" category and clicks on an item it would keep that category open when it loads the item details in the center column.

If you need to see more code let me know!


<script type="text/javascript">/* <![CDATA[ */if(!qmad.sopen){qmad.sopen=new Object();qmad.sopen.log=new Array();if(window.attachEvent)window.attachEvent("onload",qm_sopen_init);else if(window.addEventListener)window.addEventListener("load",qm_sopen_init,1);};function qm_sopen_init(e,go){if(window.qmv)return;if(!go){setTimeout("qm_sopen_init(null,1)",10);return;}var i;var ql=qmad.sopen.log;for(i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var dd=a.getElementsByTagName("DIV");for(var j=0;j<dd.length;j++){if(dd[j].idiv.className.indexOf("qm-startopen")+1){ql.push(dd[j].idiv);var f=dd[j][qp];if(!qm_a(f)){var b=false;for(var k=0;k<ql.length;k++){if(ql[k]==f.idiv)ql[k]=null;}ql.push(f.idiv);f=f[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree.ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i= ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);qm_li=null;}}if(qmad.tree){qmad.tree.etype=se;qmad.tree.ctype=sc;}}/* ]]> */</script>

Css/javascript Drop-down Menu

Similar Tutorials

View Content

Okay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already.

I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu.

But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all.

Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover?

Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh?

Let me know!

Help With Javascript Dropdown Menu

Similar Tutorials

View Content

My Javascript dropdown menu drops down behind my embedded music player on my website (http://www.blackoutplaylists.com). I need help fixing this, I've tried everything and can't seem to get it fixed. Any suggestions?

Menu In Jquery Javascript

Similar Tutorials

View Content

hi how can i make somethin like the menus A,b, bla bla
one this site?

http://www.kanzenanimes.net/animes

Javascript Dropdown Menu Help!

Similar Tutorials

View Content

Hi everyone, I'm needing some help with a code and looking for some guidance. I'm trying to create two drop down menus that work together.

the first dropdown box displays the country with two titles, Can and USA.
the other dropdown box displays the province/state.

when Can is selected, 10 provinces is listed in the second box.
when USA is selected, 50 states is listed in the second box

The second menu is disabled until they select from the first menu

any help is appreciated!

Javascript Menu Problem

Similar Tutorials

View Content

Hi

Only a very simple beginner (thicko) so please don't laugh :-)

I have a very basic allwebco website and in the root I have menu.js which puts a small menu on the top right of every webpage that calls it.

The index.html page in the root calls this menu.js and also another page in a folder from the root calls it (I prefix menu.js in this page with '../' so as to step back to the root). Also on this sub-page I call another page which is in the same folder. This also calls up 'menu.js' and again I prefix it '../' in order to access it from the root, which is the preceding folder.

However, on this second page, it does not display the menu.

I have tried everything by prefixing it with '/', './', '../' and just leaving it as 'menu.js' but it will not find it.

I suppose it is because it is a 'recursive' situation. ie keeps calling itself over and over? Can anyone help please?

Thanks.

Barry

Please Help With Javascript/css/html Menu

Similar Tutorials

View Content

Hi I am a total newbie to javascript and css and have a menu that I am trying to get to work.
Also in the attachments the on.png need's to go in the images folder (Flyout menu.zip/Flyout menu/images/)
To start I downloaded a template that I liked. But I have a problem because if you look at the attached html page (you need to download all of them to get it to work) when you move your mouse over a menu item that has an '>' it expands with a submenu. The problem is that when you move your mouse onto one of the submenu items the main item that it came from doesn't stay lit up which makes it hard to tell which one you came from (I also think that it doesn't look good). If anyone can edit/add to the java/css/html files and make it work I will be very happy (I have been trying for days now).

Another minor problem probably to do with the css is that I would like the arrows (currently they are just text greater than signs '>') to be images and aligned right and the text to stay aligned left.

Thanks for any help

Javascript Expanding Menu

Similar Tutorials

View Content

Code:

function initMenu(){
  var menus, menu, text, a, i, CurrentID;
  menus = getChildrenByElement(document.getElementById("menu"));
  CurrentID = document.getElementById("auto");
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
	
  }

  //CurrentID.showMenu; thought this would work but it doesn.t
}

I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts

Javascript Error In Flyout Menu!

Similar Tutorials

View Content

Hi all

I'm no expert with javascript so would really appriciate your help.
I'm using a mootools flyout menu, but having a few problems.

When I incease the speed of the flyout, the height of the flyout also increases and the opacity doesnt go back to 0. therefore you can still see the flyout once the mouse is away from it.

What I want is to increase the speed (DDSPEED) but keep the height of the flyout to 0 when the mouse isnt over.

my site is : www.thetestinghouse.co.uk
If you go to this site, and copy the below code in to the console of firebug, you will see exactly what I mean.

Can someone please help?

this is the code:

var DDSPEED = 15;
var DDTIMER = 1;
var OFFSET = 0;
var ZINT = 100;

function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
c.style.display = 'block';
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.left = (h.offsetWidth + OFFSET) + 'px';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
ZINT = ZINT + 1;
c.style.zIndex = ZINT;
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = Math.round((c.maxh - currh) / DDSPEED);
}else{
dist = Math.round(currh / DDSPEED);
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if(currh > (c.maxh - 2) && d == 1){
clearInterval(c.timer);
}else if(dist < 1 && d != 1){
clearInterval(c.timer);
c.style.display = 'none';
}
}

Help With Doing Drop Down Menu On Javascript Instead Of Html

Similar Tutorials

View Content

I'm sorry if this question might have already been posted before, but as I do not know how to go about phrasing the questions(due to low calibre in technical terms), I could not do any search about it.

Basically what I intended to do is to add a *drop down list* to the header looking something like this http://www.w3schools.com/DHTML/tryit...rydhtml_menu10 except for the fact that the header(the Tutorials, Scripting, Validation coloured in pink) isn't coded using .html but .js(in this website, its coded in html as shown below).

<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br />
<table class="menu" id="tutorials" width="120">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br />
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br />
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>

So how can I code this in .js instead of .html? I really need a clue on how to get started on coding this as this is totally new to me, hope that anyone would appreciate helping me and I will be grateful about it.

Javascript Chained Drop Down Menu

Similar Tutorials

View Content

I am trying to create 2 different drop down menus which are chained.

First drop down menu: options 1, 2, 3, and 4

Second drop down menu: options 1, 2, 3 and 4

However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value.

Here is the complicated part that I cannot figure out.

I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it.

Thank you!

Javascript Drop Down Menu With Pictures

Similar Tutorials

View Content

Hi guys.

I have been scowering high and low for code to create a Java drop down menu bar for my site.

I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/

but want to insert pictures into it, for each heading, to create a new looking bar if thats possible.

Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code.

Thanks in advance.