Css code IE 6 compatible Drop down menu

From a very long time i face the problems in creating drop down menu compatible with ie6. This is older version and its default browser that installed with the windows. So always user use this browser. So designer and developer need to application should be compatible with ie6 browser. But there is lot of problem because the ie6 not support css3 or newer feature. So there is need to use javascript some extent. The code i ready which made in both css3 and the javascript. When the browser ie6 then javascript work otherwise the css3 work.

My code below:
————–

Nicer Navigation with CSS Transitions Demo

a#trans { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }
a#trans:hover { background: #220077; color: #fff; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078 url(nav-bg.png) repeat-x 0 0; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #a3f1d7; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #63867f; }
#trans-nav li ul li a:hover { background: #5a8078; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

#trans-nav li ul { display: none; }
#trans-nav li:hover ul, #trans-nav li.over ul {display: block; }
#trans-nav li ul li { height: 30px; line-height: 30px; }

startList = function() {
if (document.all && document.getElementById) {
var navRoot = document.getElementById(“trans-nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
var node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>
<title>Nicer Navigation with CSS Transitions Demo</title>
<style>
a#trans { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }
a#trans:hover { background: #220077; color: #fff; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078 url(nav-bg.png) repeat-x 0 0; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #a3f1d7; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #63867f; }
#trans-nav li ul li a:hover { background: #5a8078; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
<!–[if IE]>
<style>
#trans-nav li ul { display: none; }
#trans-nav li:hover ul, #trans-nav li.over ul {display: block; }
#trans-nav li ul li { height: 30px; line-height: 30px; }
</style>
<![endif]–>
<!–[if lte IE 6]>
<script type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
var navRoot = document.getElementById("trans-nav");
for (i=0; i<navRoot.childNodes.length; i++) {
var node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<![endif]–>
</head>
<body>
<h1>Demo Page</h1>

<ul id="trans-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Thingamabobs</a></li>
<li><a href="#">Doohickies</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-499901-76’]);
_gaq.push([‘_trackPageview’]);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl&#8217; : ‘http://www&#8217;) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</body>
</html>

—————

Code & Demo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s