Learn VBA & Macros in 1 Week!

JavaScript - Help With Drop-down Menu Please

Full Excel VBA Course - Beginner to Expert

Help With Drop-down Menu Please	View Content

Having trouble with Nested Side Bar menu. I got the coding reference from here and tried to alter it for my profile.

http://www.dynamicdrive.com/style/cs...side_bar_menu/

I know there are easier ways to create menus like this with flash, but Im trying to learn with CSS,HTML, JAVASCRIPT.If there is anyone that can help me find an easier solution in how to do menus i would like to take your advice,

Basically I wanted to change the image on the button that receives the mouse-over. Then, when i place my mouse over the second button just sits idle with no sub-menu employed. Only the first button receives the commands to employ the sub-menu.

This is my Code.

**********************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" href="4thcss.css">
<script src="4thport.js" type="text/javascript">
</script>

<title>Ruddy's Portfolio</title>
</head>
<body>

<div id="container">
<div id="containerbackground">
</div>

<div id="header">
</div>
<div id="headertitles">
<a href="https://www.google.com">CSS</a>
<a href="https://www.google.com">PHP</a>
<a href="https://www.google.com">HTML</a>
<a href="https://www.google.com">JAVASCRIPT</a>
<a href="https://www.google.com">MySQL</a>
</div>

<div id="content">

<p>Hello, this is my website page!<br>
Everything done here is by my <br>creative influence.<br>
I Hope that you enjoy!</p>
</div>

**********************************************************
**********************************************************
<div id="yellowbutton">
<div class="sidebarmenu">
<ul id="sidebarmenu1">

<li><a href="#"></a>
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>

<div id="redbutton">
<div class="sidebarmenu">
<ul id="sidebarmenu1">

<li><a href="#"></a>
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>
**********************************************************
**********************************************************
<div id="footer">
<div id="footernotes">

<p> A Website by Ruddy J. Woel</p>
</div></div>

</div>

</body>
</html>

CSS*******************************************************

body {
background-image:url(Pictures/forest2.jpg);
z-index:-1;
}

#container {
width: 860px;
margin: 0 auto;
height:700px;
}

#containerbackground {
background:#ffff99;
position:absolute;
top:32px;
width:800px;
height:700px;
opacity:0.8;
}

#header {
background:#009900;
position:absolute;
top:2px;
width:800px;
height:29px;
opacity:0.8;

}

#headertitles {
position:absolute;
top:1px;
padding-left:20px;
font-size:28px;
color:#FFFFFF;
font-family:Geneva, Arial, Helvetica, sans-serif;
word-spacing:65px;
opacity:0.9;
}

#content {
position:absolute;
top:70px;
left:280px;
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
opacity:0.8
}

#yellowbutton {
position:absolute;
top:200px;
left:260px;
}

.sidebarmenu ul{
margin: 0px;
padding: 0px;
list-style-type:none;
font: 18px Verdana;
width: 196px; /*main menu width*/
}

.sidebarmenu ul li{
position:relative;
width:197px; /*sub menu item widths*/
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
height:22px;
}

.sidebarmenu ul, .sidebarmenu ul li a:visited, .sidebarmenu{
background-image:url(Pictures/yellowbutton.gif); /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

/*Sub level menu items */
.sidebarmenu ul li ul,.sidebarmenu ul li ul a:visited{
background-image:url(Pictures/menudrop.gif);
position: absolute;
width: 175px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

#redbutton {
position:absolute;
top:235px;
left:260px;
z-index:1;
}

a {
text-decoration:none;
color:#FFFFFF;
word-spacing:40px;
}

#footer {

background-color:#000000;
position:absolute;
top:733px;
height:20px;
width:800px;
z-index:0;
opacity:0.8;
}

#footernotes {
margin-top:-10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
z-index:1;
color:#FFFFFF;
}

JAVASCRIPT*************************************************

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

*******************************************************

Thank you for your time!

Full Excel VBA Course - Beginner to Expert

How To Turn My Drop-down Menu, Into A Double Drop-down Menu?

Similar Tutorials

JavaScript - Help With Drop-down Menu Please

Help With Drop-down Menu Please

Similar Tutorials

How To Turn My Drop-down Menu, Into A Double Drop-down Menu?

How To Make A Drop Down Menu For A Menu

Drop Down Menu

Drop-down Menu

Need Help With Drop Down Menu

Drop Down Menu Help

Help With Drop-down Menu

Drop Down Menu

Need Help With Drop-down Menu

Drop Down Menu

Drop Down Menu

Drop Down Menu Help

Need Help With Drop Down List Menu

Js Drop-down Menu - Trying To Improve

Drop Down Menu Problem

Drop-down Menu From Hotspot?

Drop Down Menu Problem

Drop Down Menu Info

Need Help With Drop Down Menu W/option Box.

Drop Down Menu Issue