| |
CSS drop down menus with out java script are always better. But some browsers will not support these css3 / pure css menus due to which the menus will not fetch the required results. In this context, JavaScript enabled menu will be the better option. But most of these scripts will be on premium. For this reason only, I have prepared this simple JS menu and the code is given below. The skeleton of the web page is here under. |
<![CDATA[<html>
<head>
<script type="text/java script">
... the java script code goes here...
</script>
<style type="text/css">
... the CSS code goes here ...
</style>
</head>
<body>
... html code goes here...
</body>
<html>]]>
JAVA SCRIPT CODE (both for Vertical & Horizontal)
<![CDATA[<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#main-menu li').hover(function(){
$('ul', this).slideUp(0).stop(true, true).slideDown(400);
},
function(){
$('ul', this).css("display", "block").stop(true, true).delay(500).slideUp(500);
});
});
</script>]]> CSS CODE (Code is same for both vertical and Horizontal menu except two strings:)
<![CDATA[<style type="text/css">
#main-menu, #main-menu > li > ul {
list-style: none;
font-weight: bold;
}]]>// Change the red color code for Horizontal menu keeping the other blue color code as its is
#main-menu > li {
float: left;
}
#main-menu > li > ul {
position: absolute;
display: none;
padding: 0;
z-index: 10;
}
// Change the black color code for Vertical menu keeping the other blue color code as its is
#main-menu > li { margin: 0 0 1px 0;}
#main-menu > li > ul {
position: absolute;
display: none;
margin-left: 106px;
margin-top: -29px;
z-index: 10;
}<![CDATA[#main-menu li > a {
display: block;
background: #444;
color: #4bf;
width: 125px;
padding: 4px 10px 5px;
text-decoration: none;
border-right: 1px #ffffff solid;
}
#main-menu li:hover > a {
background: #4bf;
color: #fff;
}
#main-menu > li:hover > ul {
display: block;
z-index: 100;
}
</style>]]>HTML CODE (both for Vertical & Horizontal)
<![CDATA[ <ul id="main-menu">
<li><a href="#">MENU-1</a>
<ul>
<li><a href="#">SUB MENU 1-1</a></li>
<li><a href="#">SUB MENU 1-2</a></li>
<li><a href="#">SUB MENU 1-3</a></li>
<li><a href="#">SUB MENU 1-4</a></li>
</ul>
</li>
<li><a href="#">MENU-2</a>
<ul>
<li><a href="#">SUB MENU 2-1</a></li>
<li><a href="#">SUB MENU 2-2</a></li>
<li><a href="#">SUB MENU 2-3</a></li>
<li><a href="#">SUB MENU 2-4</a></li>
</ul>
</li>
<li><a href="#">MENU-3</a>
<ul>
<li><a href="#">SUB MENU 3-1</a></li>
<li><a href="#">SUB MENU 3-2</a></li>
<li><a href="#">SUB MENU 3-3</a></li>
<li><a href="#">SUB MENU 3-4</a></li>
</ul>
</li>
<li><a href="#">MENU-4</a>
<ul>
<li><a href="#">SUB MENU 4-1</a></li>
<li><a href="#">SUB MENU 4-2</a></li>
<li><a href="#">SUB MENU 4-3</a></li>
<li><a href="#">SUB MENU 4-4</a></li>
</ul>
</li>
</ul>]]>
For more menu codes and banner codes with demo: CHECK HERE
No comments:
Click Here To add Comment
Post a comment