Blue Chrome ~ Verticle Menu
Version: 65.2 (Final Build)
Revision: 132 Build 65
Blue Chrome ~ Verticle Menu
Introduction: this is one of my “vertical menu” for my website’s project.
You can copy the source code and use it for your own website, blog and forums.
However, you must not distribute these source code without my permission!
Have fun and enjoy!
1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-
http://sourceforge.net/projects/notepad-plus/
http://filehippo.com/download_notepad/
——————————-
2.] Copy these code into your notepad and save them into the same folder.
But, please don’t change the name of the files! If you do this, the codes will be broken!
a.] Copy this ‘JavaScript’ source code and save it as “Js_engine.js” [without the quotes].
File Name: Js_engine.js
—Copy Source Code—
//Version: 36.3 [Final]
//Revision: 56 Build 132
//Author: Lair360
//-----------------------------------------
var menuids=["globalnews"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
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", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
—End Source Code—
Copyright 2001-2008 Lair360
b.] Copy this ‘CSS Stylesheet’ source code and save it as “CSS_File.css” [without the quotes].
File Name: CSS_File.css
—Copy Source Code—
.global1 ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 135px; /* Width of Menu Items */
border-bottom: 0px solid red;
border-top: 0px solid red;
border-left: 0px solid red;
border-right: 0px solid red;
}
.global1 ul li{
position: relative;
}
/*Sub level menu items */
.global1 ul li ul{
position: absolute;
width: 145px; /*sub menu width*/
top: 0px;
left: 0px;
visibility: hidden;
}
/* Sub level menu links style */
.global1 ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
font: bold 9px Verdana, Helvetica, sans-serif;
text-decoration: none;
background: black url(Blue_Chrome.gif); /*url can be placed here*/
padding: 4px 0px;
padding-left: 6px;
border: 1px solid black;
border-bottom: 0;
}
.global1 ul li a:visited, .globalnews ul li a:active{
color: white;
}
.global1 ul li a:hover{
background: black url(); /*Url can be placed here*/
}
.global1 .subfolderstyle{
background: black url(Blue_Chrome.gif) no-repeat center right;
}
/* Hack for IE \*/
* html .global1 ul li { float: left; height: 1%; }
* html .global1 ul li a { height: 1%; }
/* End */
#noiemac {display: none}
/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */
/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */
—End Source Code—
Copyright 2001-2008 Lair360
c.] Copy this ‘html’ source code and save it as an internet explorer file: html.
File Name: Template.html
—Copy Source Code—
<head>
<link rel="stylesheet" type="text/css" href="CSS_File.css"></link>
<script type="text/javascript" src="Js_engine.js"></script>
</head>
<body>
<div class="global1">
<ul id="globalnews">
<li><a href="link1a">file_1a</a></li>
<li><a href="link2a" >file_2a</a></li>
<li><a href="link3a">file_3a</a></li>
<li><a href="#">Sub_menu1a</a>
<ul>
<li><a href="link1b">file_1b</a></li>
<li><a href="link2b">file_2b</a></li>
<li><a href="link3b">file_3b</a></li>
</ul>
</li>
<li><a href="link1c" >file_1c</a></li>
<li><a href="link2c">file_2c</a></li>
<li><a href="#" >Sub_menu1b</a>
<ul>
<li><a href="link1d">file_1d</a></li>
<li><a href="link2d">file_2d</a></li>
<li><a href="link3d">file_3d</a></li>
<li><a href="link4d">file_4d</a></li>
<li><a href="link5d">file_5d</a></li>
<li><a href="link6d">file_6d</a></li>
</ul>
<li><a href="#">Sub_menu1c</a>
<ul>
<li><a href="link1e">file_1e</a></li>
<li><a href="link2e">file_2e</a></li>
<li><a href="link3e">file_3e</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
—End Source Code—
Copyright 2001-2008 Lair360
Finally, just download this image and save it into the same folder…
Files: http://dinom6.deviantart.com/art/Special-Colour-Stripes-125220598
Notes: if you want every parts of the source code in one file, you can use this method which is shown below…
Tips: copy everything; paste it into your notepad and save it as a html file.
File Name: Single_Template.html
—Copy Source Code—
<head>
<style type="text/css">
.global1 ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 135px; /* Width of Menu Items */
border-bottom: 0px solid red;
border-top: 0px solid red;
border-left: 0px solid red;
border-right: 0px solid red;
}
.global1 ul li{
position: relative;
}
/*Sub level menu items */
.global1 ul li ul{
position: absolute;
width: 145px; /*sub menu width*/
top: 0px;
left: 0px;
visibility: hidden;
}
/* Sub level menu links style */
.global1 ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
font: bold 9px Verdana, Helvetica, sans-serif;
text-decoration: none;
background: black url(Blue_Chrome.gif); /*url can be placed here*/
padding: 4px 0px;
padding-left: 6px;
border: 1px solid black;
border-bottom: 0;
}
.global1 ul li a:visited, .globalnews ul li a:active{
color: white;
}
.global1 ul li a:hover{
background: black url(); /*Url can be placed here*/
}
.global1 .subfolderstyle{
background: black url(Blue_Chrome.gif) no-repeat center right;
}
/* Hack for IE \*/
* html .global1 ul li { float: left; height: 1%; }
* html .global1 ul li a { height: 1%; }
/* End */
#noiemac {display: none}
/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */
/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */
</style>
<script type="text/javascript">
<!--
//Sources from Globalnews
//Author: Lair360
//-----------------------------------------------------------------
var menuids=["globalnews"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
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", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
//-->
</script>
</head>
<body>
<div class="global1">
<ul id="globalnews">
<li><a href="link1a">file_1a</a></li>
<li><a href="link2a" >file_2a</a></li>
<li><a href="link3a">file_3a</a></li>
<li><a href="#">Sub_menu1a</a>
<ul>
<li><a href="link1b">file_1b</a></li>
<li><a href="link2b">file_2b</a></li>
<li><a href="link3b">file_3b</a></li>
</ul>
</li>
<li><a href="link1c" >file_1c</a></li>
<li><a href="link2c">file_2c</a></li>
<li><a href="#" >Sub_menu1b</a>
<ul>
<li><a href="link1d">file_1d</a></li>
<li><a href="link2d">file_2d</a></li>
<li><a href="link3d">file_3d</a></li>
<li><a href="link4d">file_4d</a></li>
<li><a href="link5d">file_5d</a></li>
<li><a href="link6d">file_6d</a></li>
</ul>
<li><a href="#">Sub_menu1c</a>
<ul>
<li><a href="link1e">file_1e</a></li>
<li><a href="link2e">file_2e</a></li>
<li><a href="link3e">file_3e</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
—End Source Code—
Copyright 2001-2008 Lair360
That is all I could explain. But, if you know what you’re doing with these codes, then please…don’t hesitate to experiment them! But, you must keep these codes to yourself and never distribute them to others without proper permission!
