-
Smooth Navigational Menu CSS Holly Hack
http://www.dynamicdrive.com/dynamici...smoothmenu.htm
Hi Guys
First of all, great scripts guys! I noticed that in IE7 and below the SNM (Smooth Navigational Menu) the top level menu barely had a height where there were no link elements (so no padding could be applied, i saw that the menu got its height from the padding of the links, since there is no height specified). I gave the menu a height (knowing well that the ie box model bug would come in to play, but it still didn't change the height in IE7 and below.
I then noticed that you guys used the the Holly hack to make the nav bar 1% for IE7 and below, and thats what caused the nav to have such a small height in IE7. I removed it and now the menu has a perfect height in IE7. But what is the reason you guys used it in the CSS? On your demo page it does not break in ie7 and below, but I used it as is, without any changes, but mine break in IE& and below.
Thanks! Lenner
PS. you should start charging for support!
-
-
The Holly hack was mainly added for IE6 if I recall correctly, where the sub menus may appear "disjointed" without it during my testing. Are you saying it's causing issues in IE7- only when you remove a link inside a LI element? If so I've only tested the menu with the assumption all LI elements contain a child link.
DD Admin
-
-
Please have a look at the link http://www.personal.co.za/acs/index.php in IE7
No it's not when I remove a link inside a LI element? Its when there is no top level li element eg. there is only 5 links on the nav bar, but to the right of that, the rest of the nav bar has a very small height? You will see in the link.
Without the Holly hack, the script seems fine in IE6 and IE7, I cannot replicate the "disjointed" sub menus in IE6 without the hack.Thanks!
Update
I realized that you are refering to * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
} and that does effect IE6 sub menus if removed.
I'm refering to <!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
The latter effects the menu height in IE7 (gives it a really small height)
Last edited by bokkeguitar; 11-24-2008 at 11:14 AM.
-
-
Hi I know this is an older thread but i am having a problem with this hack,
you can view the test page here, www.fallenangeldesign.net/BPCC/index.html
the HTML code is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bonus Pastor Catholic College</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<!--[if lte IE 7]>
<style type="text/css">html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<style type="text/css">
<!--
.style1 {color: #FFCC00}
body {
background-image: url();
background-repeat: no-repeat;
}
-->
</style>
<style type="text/css">
/*Example CSS for demo ticker*/
#ajaxticker1{
width: 100%;
height: 100px;
border: 1px ridge black;
padding: 5px;
color:#BBBBBB
}
#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<script src="ajaxticker.js" type="text/javascript">
/***********************************************
* Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
</head>
<body>
<div id="logo-wrap">
<div id="logo">
<img src="images/shield.jpg" alt="BPCC Logo" width="93" height="100" vspace="4" align="left" /><br />
<br /><h1>Bonus Pastor Catholic College </h1>
<br /></div>
</div>
<!-- start header -->
<div id="header">
<div id="menu">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="#">headteachers Message</a></li>
<li><a href="#">school policies</a></li>
<li><a href="#">staff vacancies</a></li>
<li><a href="#">ICT in the Community</a></li>
</ul></li>
<li><a href="#">Results</a></li>
<li><a href="#">Departments</a>
<ul>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Staff Links</a></li>
</ul>
</li>
<li><a href="#">school update</a></li>
<li><a href="#">Contacts us</a></li>
</ul>
<br style="clear: left" />
</div></div>
</div>
<!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start content -->
<div id="content">
<div id="banner">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="830" height="240" title="Introduction Banner">
<param name="movie" value="banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="banner.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="830" height="240"></embed>
</object>
</div>
<div class="post">
<h1 class="title">Welcome to our website </h1>
<div class="left">
<h2>College Ethos</h2>
<p>Students should wear footwear appropriate for the forecasted weather when travelling
to and from the College.<br>Please bring usual footwear to change into once in the buildings.
Thank you.</p>
</div>
<div class="middle">
<h2>The College is OPEN as usual</h2>
<h3>Important</h3>
<p>Students should wear footwear appropriate for the forecasted weather when travelling
to and from the College.<br>Please bring usual footwear to change into once in the buildings.
Thank you.</p>
</div>
<div class="right">
<h2>Message Board</h2>
<script type="text/javascript">
var xmlfile="tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 3500, "fade")
</script>
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer">
<div id="footer-wrap">
<p id="legal"><a href="#">Staff area</a> <a href="#">Site map</a><br />
(c) 2009 Bonus Pastor Catholic College. Website Design by <a href="http://www.fallenangeldesign.net/">Fallen Angel Design</a>.</p>
</div>
</div>
<!-- end footer -->
</body>
</html>
CSS for the Menu is as follows:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #000000; /*background of menu bar (default state)*/
width: 830px;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #000000; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* 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;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: #000000; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: 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 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
my problem is that i cannot get the menu in IE6 to display inline, is there something im doing wrong?
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Reply With Quote
Bookmarks