I have created a jquery version of nicemenus.js. For free you'll also get an iframe shime to cover IE select boxes and other psuedo-window elements.

Unfortunately various values are hard coded. These will need to be adapted to suit or re-written. I've also made it so *all* browsers use the suckerfish trick. Not just IE. This makes my CSS a lot simpler at the expense of IMO no performance hit.

Tested in IE6, IE5, Firefox.

CommentFileSizeAuthor
nice_menus.js1.01 KBcooperaj

Comments

gordon’s picture

gordon commented

I have taken a look at this, and once I got jQuery loaded onto the system and made sure it was still working.

But alas I was unable to get the code to work.

Any hints on getting it working?

cooperaj’s picture

cooperaj commented

You'll need all the relevant css classes as well. I used 'lihover'. Which I think is not compatible with the css provided by nice-menus

Attached is the relevant section from my css. It'll need tweaking for your circumstances. + I have altered nice-menus.module to not include it's own css as it is not necessary.

Normal CSS

/** Navigation Bar stuff **/
.block-nice_menus h2 {
  display: none;
}
.block-nice_menus {
  border: 0; margin: 0; padding: 0;
}
.nice-menu {
  z-index: 10;
  position: relative;
}
.nice-menu iframe {
  position: absolute;
  left: 0;
  top: 0;
}
.nice-menu {
  list-style: none;
	margin: 0; padding: 0;
}
.nice-menu a {
  text-decoration: none;
	padding: 0.2em 0.5em 0.2em 0;
}
.nice-menu ul {
  list-style: none;
  margin: 0; padding: 0;
  width: 150px;
  position: absolute;
  top: -999em;
  left: -1px;
	background: #eee;
	border-bottom: 4px solid #aaa;
}
.nice-menu li {
  float: left;
	position: relative;
	padding: 0.1em 0.7em 0.2em 0;
	list-style: none;
}
.nice-menu ul li {
  float: none;
  white-space: nowrap;
	font-size: 0.85em;
	line-height: 1.8em;
	padding: 0 0 0 0.3em;
	background: #ccc;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #aaa;
}
.nice-menu ul li a {
	width: 140px;
	display: block;
}
.nice-menu ul li.lihover {
  background: #eee;
	border-bottom: 1px solid #eee;
}
.nice-menu ul ul li {
	font-size: 1em;
}
.nice-menu-down ul ul {
  width: 150px;
  margin: -1.4em 0 0 151px;
}
.nice-menu ul, 
.nice-menu li.lihover ul ul,
.nice-menu li.lihover li.lihover ul ul { 
  top: -999em;
} 
.nice-menu li.lihover ul,
.nice-menu li.lihover li.lihover ul,
.nice-menu li.lihover li.lihover li.lihover ul { 
  top: 1.3em;
}
.nice-menu-down li.menuparent { 
  background:  url(images/arrow-down.png) right top no-repeat; 
}
.nice-menu-down li li.menuparent { 
  background: #ccc url(images/arrow-right.png) right center no-repeat; 
}
.nice-menu-down li li.lihover {
  background-color: #eee;
}

< IE7 CSS (Use a conditional)

ul.nice-menu-down ul ul {
  margin: -1.3em 0 0 147px;
}
gordon’s picture

gordon commented

I managed to get it working, but it did not cover up div's and images

Any ideas on what this didn't work.

cooperaj’s picture

cooperaj commented

It's difficult to guess at what is wrong. Can you post a link? an image?

Thanks
Adam

jakeg’s picture

jakeg commented

This is an interesting development here. If you guys get it working then there's no reason I can see to stop me putting it into Nice Menus for the 5.0 release.

mfer’s picture

mfer commented

Any updates on this? Is it ready to go with drupal 5?

jasonwhat’s picture

jasonwhat commented

Just tracking this and wondering what the 5.0 status is for this.

add1sun’s picture

add1sun commented
Version: 4.7.x-1.x-dev » 6.x-2.x-dev
Status: Needs review » Fixed

This has been added to HEAD. Won't be added to 4.7 since that doesn't use jQuery by default.

killes@www.drop.org’s picture

killes@www.drop.org commented
Status: Fixed » Closed (fixed)