HTML | The Final Guide

CSS based horizontal menu for HTML

Monday, June 22nd, 2009

Websites with static webpages and with CSS menu look beautiful. Its easy to develop such menu system using JavaScript kit. The menu will be horizontal with main level & sub level. Sub menu items will be displayed upon mouse hover on the related main menu item.

css code for the above styles: Copy the below css code and paste into a file named menu.css

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}

.basictab li a:visited{
color: black;
}

.basictab li a:hover{
background-color: #dbffff;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}

.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #ebffff;
}

JavaScript Code: Copy the below JavaScript Code and paste into a file named menu.js

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}

function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

HTML code: Copy the below html code and paste into a file named TestMenu.html

<html>
<head>
<title>Test Menu</title>
<link rel="stylesheet" type="text/css" href="menu.css" mce_href="menu.css" />
<mce:script type="text/javascript" src="menu.js" mce_src="menu.js"></mce:script>

</head>
<body>
<ul id="maintab" class="basictab">
<li><a href="JavaScript:alert('Clicked Home');" mce_href="JavaScript:alert('Clicked Home');">Home</a></li>
<li class="selected" rel="SubMenu1"><a href="#" mce_href="#">Menu-1 ▼</a></li>
<li rel="SubMenu2"><a href="#" mce_href="#">Menu-2 ▼</a></li>
<li><a href="JavaScript:alert('Clicked Exit');" mce_href="JavaScript:alert('Clicked Exit');">Exit</a></li>
</ul>
<div id="SubMenu1" class="submenustyle">
<a href="JavaScript:alert('Clicked Child Menu-1');" mce_href="JavaScript:alert('Clicked Child Menu-1');">Child Menu-1</a>
<a href="JavaScript:alert('Clicked Child Menu-2');" mce_href="JavaScript:alert('Clicked Child Menu-2');">Child Menu-2</a>
<a href="JavaScript:alert('Clicked Child Menu-3');" mce_href="JavaScript:alert('Clicked Child Menu-3');">Child Menu-3</a>
</div>
<div id="SubMenu2" class="submenustyle">
<a href="JavaScript:alert('Clicked Child Menu-1');" mce_href="JavaScript:alert('Clicked Child Menu-1');">Child Menu-1</a>
<a href="JavaScript:alert('Clicked Child Menu-2');" mce_href="JavaScript:alert('Clicked Child Menu-2');">Child Menu-2</a>
</div>

<mce:script type="text/javascript"><!--
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
// --></mce:script>
</body>

22.06.2009 HTML, Web 1 Comment

Redirect to another webpage

Tuesday, May 12th, 2009

Redirecting to another webpage from the current webpage is one of the useful techniques often developers need. Redirecting to another webpage can be setup in the main domain place where it redirects to other sub folders. This Redirecting can be done in many ways. Among them here are present with two most and widely used techniques.

HTML Meta Redirect:
This is a sample web page that does an immediate redirect to another page. Useful for fixing 404 errors

<!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="refresh" content="0;url=test.htm">
</head>
<body">
<!-- nothing -->
</body>
</html>

JavaScript Redirect:

<!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>
</head>
<body onload="JavaScript:window.navigate('http://www.thefinalguide.com');" ">
<!-- nothing -->
</body>
</html>

12.05.2009 ASP.Net, HTML, Programming, Web 2 Comments

The Final Guide

16 Subscribers

CSS based horizontal menu for HTML

Redirect to another webpage

Follow me on Twitter!

Shre This

Recent Comments

Categories

Tags

Blog Vitals