ddsmoothmenu problem

**Rima_dhk** · May 23, 2012 23:11

Having a problem with the ddsmoothmenu with IE. Works fine in Firefox and chrome. But the whole page jumps down when you hover over the menu and the actual menu doesn't display in IE. PLEASE HELP!

Here is the link. http://d11781941.u51.c7.ixwebhosting.com/menu.html

This is my html file

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<script type="text/javascript" src="jquery/jquery-1.4.1.min.js"></script>
<script src="jquery/slider.js" type="text/javascript"></script>
<script type="text/javascript" src="ddsmoothmenu.js"></script>
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
</head>

<body>
<div class="container">

<div class="navigation">

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#" title="" id="hoveractive" >
About Us</a>

<ul>

<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>

</ul>
</li>
<li>
<a href="#" title="Solutions">
Solutions</a>

<ul>

<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>

</ul>
</li>
<li>
<a href="#" title="Products">
Products</a>

<ul>

<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>

</ul>
</li>
<li>
<a href="#" title="Payment Services" >
Payment Services</a>

<ul>

<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>

</ul>
</li>

</ul>

</div>

</div>

</div>

</body>
</html>

This is my css

.container{
width:910px;
margin-left:auto;
margin-right:auto;
clear:both;
}
.navigation{
width:576px;
height:76px;
float:left;

}
.ddsmoothmenu{
background:none; /*background of menu bar (default state)*/
width: 100%;
padding:0px;
margin:0px;
}

.ddsmoothmenu ul{
z-index:100;
padding: 0;
list-style-type: none;
color:#000;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
list-style:none;
margin:0px;
padding:0px;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
text-decoration: none;
/*padding:30px 15px 30px 15px;*/
padding:30px 30px 30px 30px;
background:url(siteimages/nav-border.gif) repeat-y top left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: uppercase;
color: #000;
text-decoration: none;
text-shadow:none;
height:16px;

}
.ddsmoothmenu ul li a{
display: block;
text-decoration: none;
padding:30px 30px 30px 30px;
background:url(siteimages/nav-border.gif) repeat-y top left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: uppercase;
color: #000;
text-decoration: none;
text-shadow:none;
height:16px;

}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
/*color: white;*/
color:#000;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
color:#000;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e8e8e8));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
filter: progid

XImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e8e8e8',GradientType=0 );
-moz-box-shadow: 0px 0px 6px 0px #737373;
-webkit-box-shadow: 0px 0px 6px 0px #737373;
box-shadow: 0px 0px 6px 0px #737373;
}
.ddsmoothmenu ul li a#hoveractive{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
color:#000;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e8e8e8));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
filter: progid

XImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e8e8e8',GradientType=0 );
-moz-box-shadow: 0px 0px 6px 0px #737373;
-webkit-box-shadow: 0px 0px 6px 0px #737373;
box-shadow: 0px 0px 6px 0px #737373;
}
.ddsmoothmenu ul li a:hover{
color:#000;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e8e8e8));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
background: linear-gradient(top, #f4f4f4 0%,#e8e8e8 100%);
filter: progid

XImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e8e8e8',GradientType=0 );
-moz-box-shadow: 0px 0px 6px 0px #737373;
-webkit-box-shadow: 0px 0px 6px 0px #737373;
box-shadow: 0px 0px 6px 0px #737373;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
overflow:hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 12px Arial, Helvetica, sans-serif;
width: 166px; /*width of sub menus*/
padding:5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid #c3c3c3;
background:#f4f4f4;
text-transform:none;
height:auto;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

Thanks,
Rima.

**deathshadow60** · May 24, 2012 01:54

Never heard of ddsmoothmenu, but it looks like your normal fat bloated jquery animooted nonsense, taking something simple -- a dropdown menu, and turning it into a convoluted mess. I mean, when a 4 parent item demo menu page is sucking down in excess of 60k before it even has content on the page -- it's a bad way to build a website.

My advice would be to go throw out all that scripting for nothing, and go with a more CSS based approach...

Like say... mine.
http://www.sitepoint.com/forums/show...ay-of-doing-it

Which even with the scripting assist for browsers that don't know all the new fangled CSS ends up barely hitting 3.2k...

Cutesy slider effects that just make the UI harder to use because they take too blasted long, AND that suck down tens or even hundreds of K of bandwidth by the time you let them piss all over project is no way to build a website.

No matter what the "jquery for everything" whackjobs will try to tell you.

User Tag List

Thread: ddsmoothmenu problem

Thread Tools

Display

ddsmoothmenu problem

Bookmarks

Bookmarks

Posting Permissions