JavaScriptBank
Member
This JavaScript code is a hierarchical, object oriented navigator, open source menu. It can be easily displayed horizontally or vertically, and on several different levels.... detail
How to setup
Step 1: Use CSS code below for styling the script
CSS
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Step 3: Place HTML below in your BODY section
HTML
Step 4: Download files below
Files
menu_arrow.gif
theMenu.js
vb_menu.js
How to setup
Step 1: Use CSS code below for styling the script
CSS
Code:
<style>
/*
Created by: Vladimir Bodurov
Web Site: http://www.bodurov.com/menu/
*/
A.MenuLink{
color:#1D2123;
width:100%;
text-decoration: none;
}
/* Menu Link when the mouse is over */
A.MenuLink:hover{
color:#AA0000;
background-color:#FFFF99;
text-decoration: underline;
}
/* First menu link element */
DIV.FirstMenuElement{
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
padding:3px;
width:130px;
text-align: center;
background-color:#82A6C4;
border: solid #475156 1px;
display:none;
}
/* First menu link element when the mouse is over */
DIV.FirstMenuElementOver{
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
width:130px;
padding:3px;
text-align: center;
background-color:#FFFF99;
border: solid #475156 1px;
}
/* Menu link element */
DIV.MenuElement {
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
padding:3px;
width:150px;
background-color:#EFEFFF;
border: solid #475156 1px;
display:none;
}
/* Menu link element when the mouse is over */
DIV.MenuElementOver {
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
padding:3px;
width:150px;
background-color:#FFFF99;
border: solid #475156 1px;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script language="JavaScript" type="text/javascript" src="vb_menu.js"></script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<div id="MenuLine" style="position:relative;"></div>
<script language="JavaScript" src="theMenu.js"></script>
Step 4: Download files below
Files
menu_arrow.gif
theMenu.js
vb_menu.js