Lair360 Blog

Version: 32.1
Revision: 48 Build 12

Blue Chrome ~ Vertical Menu v2

Introduction: this vertical menu – project was designed in my studio.
However, it was a struggle cleaning up the “CSS script”, so that it could synchronize with the text – menu. But, I managed to complete it and it was a big improvement from my previous edition: “Blue Chrome ~ Verticle Menu”.

This vertical menu will shift itself when you hover your mouse over their body.
But, this time, the width will be smaller so that it could fit any website with a smaller table.

Enjoy my new project and don’t forget to linkback!

1.] Download notepad++ from the original author or from another source.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy this ‘CSS Stylesheet’ source code and save it as “bluecr_sidebar.css” [without the quotes].

Warning: please don’t alter the stylesheet!
You might break the script and cause it to trigger errors or syntax errors!!

File Name: bluecr_sidebar.css
—Copy Source Code—

/* Copyrighted By Lair360*/
/* Version: 11.2d
   Revision: 43 Build 16*/

#globalnews {
}
#globalnews ul {
 width: 145px;
 letter-spacing: 1px;
 font-weight: bold;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-right: 3px solid #000000;
 border-bottom: 3px solid #000000;
 border-left: 1px solid #000000;
 margin:0;
 padding:0;
 list-style:none;
}
#globalnews li a {
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 padding-left: 6px;
 padding-bottom: 3px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-right: 12px;
 text-align: left;
 background: #0000FF url(image/Blue_Chrome.gif);
 border-top: 1px #000000;
 border-right: 1px #000000;
 border-bottom: 1px solid #000000;
 border-left: 2px solid #000000;
 display:block;
 width:100%;
}
#globalnews li a:hover {
 color: #FFFFFF;
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 background: #FFFFFF url(image/Blue_Crystal.gif);
 border-bottom: 1px solid #000000;
 border-left: 6px solid #000000;
}
#globalnews li.menucurrent a {
 text-align: right;
 background: #000000 url(image/Red_Chrome.gif);
}
#globalnews li.menucaption {
 color: #FFFFFF;
 font-style: normal;
 padding-left: 6px;
 font-size: 15px;
 padding-bottom: 4px;
 padding-top: 4px;
 font-family: Times New Roman, Times, serif;
 letter-spacing: 1px;
 text-align: left;
 background: #333333 url(image/Blue_Crystal.gif);
 display:block;
}
html>body #globalnews li a {
 width: auto;
}

—End Source Code—
Copyright 2001-2009 Lair360

3.] Add this code into the “body” tags and save it as a HTML extension.

File Name: Template.html
—Copy Source Code—

<div id="globalnews"><ul>
<li class="menucaption">Index-HTML</li>
<li><a href="Menu-001" title="Home">Home</a></li>
<li><a href="Menu-002" title="Tools">Tools</a></li>
<li><a href="Menu-003" title="Contact">Contact</a></li>
<li><a href="Menu-004" title="AboutUS">AboutUS</a></li>
<li class="menucaption">Submenu</li>
<li><a href="Menu-001" title="DeviantArt">DeviantArt</a></li>
<li><a href="Menu-002" title="Downloads">Downloads</a></li>
<li><a href="Menu-003" title="Wordpress">Wordpress</a></li>
<li><a href="Menu-004" title="Screenshots">Screenshots</a></li>
<li><a href="Menu-005" title="Examples">Examples</a></li>
</ul></div>

—End Source Code—
Copyright 2001-2009 Lair360

4.] Insert this little link into the “head” tags.
So that the “div” tags could synchronize with the “CSS Stylesheet”.

File Name: Template.html
—Copy Source Code—

<link rel="stylesheet" type="text/css" href="bluecr_sidebar.css" /></link>

—End Source Code—
Copyright 2001-2009 Lair360

5.] Now, you’ll need to download this file which has the images for the vertical menu.
But, you must create a sub-folder called: image (without capital).

http://dinom6.deviantart.com/art/Special-Colour-Stripes-125220598

Notes: create a sub-directory under your html menu and name it as: image (without capital).

6.] Save your progress and anything else.
After that, just execute your html webpage and give it a little test drive!

Advice: if you want it in a single file, you’ll need to copy this script and save it as a HTML format.

—Copy Source Code—

<head>
<style type="text/css">
<!--
/* Copyrighted By Lair360*/
/* Version: 11.2d
   Revision: 43 Build 16*/

#globalnews {
}
#globalnews ul {
 width: 145px;
 letter-spacing: 1px;
 font-weight: bold;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-right: 3px solid #000000;
 border-bottom: 3px solid #000000;
 border-left: 1px solid #000000;
 margin:0;
 padding:0;
 list-style:none;
}
#globalnews li a {
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 padding-left: 6px;
 padding-bottom: 3px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-right: 12px;
 text-align: left;
 background: #0000FF url(image/Blue_Chrome.gif);
 border-top: 1px #000000;
 border-right: 1px #000000;
 border-bottom: 1px solid #000000;
 border-left: 2px solid #000000;
 display:block;
 width:100%;
}
#globalnews li a:hover {
 color: #FFFFFF;
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 background: #FFFFFF url(image/Blue_Crystal.gif);
 border-bottom: 1px solid #000000;
 border-left: 6px solid #000000;
}
#globalnews li.menucurrent a {
 text-align: right;
 background: #000000 url(image/Red_Chrome.gif);
}
#globalnews li.menucaption {
 color: #FFFFFF;
 font-style: normal;
 padding-left: 6px;
 font-size: 15px;
 padding-bottom: 4px;
 padding-top: 4px;
 font-family: Times New Roman, Times, serif;
 letter-spacing: 1px;
 text-align: left;
 background: #333333 url(image/Blue_Crystal.gif);
 display:block;
}
html>body #globalnews li a {
 width: auto;
}
-->
</style>
</head>
<body>
<div id="globalnews"><ul>
<li class="menucaption">Index-HTML</li>
<li><a href="Menu-001" title="Home">Home</a></li>
<li><a href="Menu-002" title="Tools">Tools</a></li>
<li><a href="Menu-003" title="Contact">Contact</a></li>
<li><a href="Menu-004" title="AboutUS">AboutUS</a></li>
<li class="menucaption">Submenu</li>
<li><a href="Menu-001" title="DeviantArt">DeviantArt</a></li>
<li><a href="Menu-002" title="Downloads">Downloads</a></li>
<li><a href="Menu-003" title="Wordpress">Wordpress</a></li>
<li><a href="Menu-004" title="Screenshots">Screenshots</a></li>
<li><a href="Menu-005" title="Examples">Examples</a></li>
</ul></div></body>

—End Source Code—
Copyright 2001-2009 Lair360

7.] Done!

Copyrighted By Lair360

Version: 43.3
Revision: 54 Build 143

CSS StyleSheet – Horizontal align for JavaScript

Introduction: there are times that your company has given you a piece of code that uses JavaScript language. But, when you added the following codes into your left or right table, it always placed itself right at the edge of your template. So, to work around this problem, you’ll need some knowledge on CSS stylesheet and html format – that is all you need!!

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/

——————————-

Part One: basic stylesheet knowledge…
————————-
a.] all “div” tags and “td” tags are very different.
But, the most important tags which are used for javascript is the “div” tags.
b.] Everytime you insert a javascript link, you’ll need to add these codes in order.
However, if you don’t follow this simple rules, your JavaScript will not be visible by other readers.

JavaScript – table orders: div >> h2 >> script + noscript >> script + noscript – escaped >> h2 – escaped >> div – escaped

c.] To align JavaScript (manually), you’ll need to insert “h2” tags. Without this tags, the browser will ignore your javascript floating point. So, you’ll need to add this after your div tags.

d.] All “td” tags have to be anchored into a “table” tag. Without it, your “td” tags and JavaScript will trigger errors and serious table overflow! But, please think carefully and take a look at your source before you continue.

Part Two: preparing your table and stylesheet
————————-
1.] Create a css stylesheet – file with this name: Java_ads.css

2.] Paste this source code into your css file and save it…

—Copy Source Code—

h2.adsbox, #adclass1 {
float: left;
position:relative;
left: 10px;
right:0px;
}

—End Source Code—
Copyright 2001-2009 Lair360

Extra precaution: if you’re copying the above codes into your css stylesheet, you’ll need to hard – anchor your “h2.adsbox” tags before adding your id tags: “#adclass1”. If you don’t organize this code in their proper orders, there is going to be some misleading call by the server…

h2 = sub-table tags
.adsbox = primary class tags
#adsbox = id verification tags

3.] Now, open your page and add this code into your html page.
But, this code will need to be in your “td” tags and your table tags…

Tips: This technique is similar to an iframe. But, its not!
You can also safely use this source for your ads. It’s also easy to configure!!

—Copy Source Code—

<div>
<h2 id="adclass1" class="adsbox">
		<!-- Begin example code -->
<SCRIPT LANGUAGE="JavaScript1.1" SRC="http://example-code.com/java_example.js" type="text/javascript"></SCRIPT>
<noscript><a href="http://www.example-code.com">example</a></noscript>
			<!-- End example code -->
		<a href='http://www.copygator.com/website/lair360_co_uk/4540887.html'>
<img class="gator2" src='http://i.copygator.com/?ci=4540887' border="0" vspace="1" /></img></a>
</h2>
</div>

—End Source Code—
Copyright 2001-2009 Lair360

Notes: you can also add an image source code. But, you must be very careful and add a backslash before adding an image – escape code. This will stop your “img” tags from colliding with your JavaScript tags.

4.] Save your html file and adjust your css stylesheet.

Tips: if your JavaScript is floating on your right – panel, you’ll need to modify your “float position: right; left:0px; and right;10px;”.

5.] Finally, just add this code into your “head” ~tags. But, don’t put this before your javascript links, or else, there will be some conflict!

—Copy Source Code—

<link rel='stylesheet' type='text/css' href="css_file/Java_ads.css" /></link>

—End Source Code—

6.] Finish!

Copyrighted by Lair360

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!