Smooth Navigational Menu Problem

**Need-Help** · 11-23-2008, 03:54 PM

1) Script Title: Smooth Navigational Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem:
a) There are gaps between my top level menu and sub menu. (in both IE 7 and Firefox 3)
b) If I only hover at 'Categories' in IE7, it will show the sub menu, but also the shadow of the sub-sub menu as well.
c) The 'sub menu' can only be used in some places, but not all eventhough when I read the page source, the files (javascript and css) are loaded. Example :
If you are at the main page (home), you can see the drop-down when you hover at 'categories'. However, if you are at places other than 'Home', you can't use it.

Thanks for reading and your help is greatly appreciated.

Note : Link to my website (I'm experimenting it) :
http://www.dinoflash.com/tutorialms

**ddadmin** · 11-24-2008, 08:27 AM

There are probably other issues, but the first two things you should change is:

1) Add a valid doctype to the top of your page, ie:

Code:

<!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" lang="en" xml:lang="en">

2) Secondly, the reason for the empty gaps is due to the thick padding you have applied to LI in general:

Code:

li { 
	padding: 5px 5px 5px 5px; 
	color:#2bb9a9;
	font-size:13px; 
}

Undo that by explicitly setting padding to 0 for the menu LIs:

Code:

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

Now, if you wish to actually apply padding to the menu items, do that within the menu's A elements, where the dimensions of the menu items are calculated by the script.

**Need-Help** · 11-24-2008, 08:45 AM

Great thanks for helping me to solve problem #1 and 2. However, problem #3 is still there. I don't know why this menu will only work if it is at my main page, but won't work in other pages. I hope you can identify this problem and tell me any solution.

Thanks for your help and have a nice day

Edit : Another question is, in Firefox, the black bar expands from left to right but in IE, it will only appear if there is a button. What might have caused this problem? (I want it to expand all the way from left to right)

**ddadmin** · 11-25-2008, 09:23 AM

On the sub pages, you need to change the reference to ddsmoothmenu.js at the top so it's correct, so for example:

Code:

<script type="text/javascript" src="http://www.dinoflash.com/tutorialms/ddsmoothmenu.js">

**Need-Help** · 11-26-2008, 01:14 PM

Thanks for your reply. That solution solved my problem #3. However, there are few more problems :
1) The black colour background (area without buttons) won't show / expand from left to right in IE 7. However, it works nicely in Firefox 3.
2) All pages other than the homepage won't have arrows showing correctly. So, do I have to write the full path of the images in .js file or is there any other solutions?

Thanks.

**Snookerman** · 11-26-2008, 01:52 PM

#2 I think you do. It's not very complicated though, change this:

Code:

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},

into this:

Code:

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'http://www.dinoflash.com/tutorialms/down.gif', 23], right:['rightarrowclass', 'http://www.dinoflash.com/tutorialms/right.gif']},

or this:

Code:

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', '../tutorialms/down.gif', 23], right:['rightarrowclass', '../tutorialms/right.gif']},

**Need-Help** · 11-26-2008, 01:59 PM

Thanks

It works nicely now in both IE and Firefox. However, I hope that someone can answer my question #1.

Thanks and have a nice day.

**ddadmin** · 11-26-2008, 08:20 PM

1) The black colour background (area without buttons) won't show / expand from left to right in IE 7. However, it works nicely in Firefox 3.

Hmm not sure I understand. Please elaborate.

**Snookerman** · 11-26-2008, 08:45 PM

Originally Posted by ddadmin

Hmm not sure I understand. Please elaborate.

If you check this page:
http://www.dinoflash.com/tutorialms/
in FF, you will see the space to the right of the menu with a black-ish background, in IE however, the background doesn't show.

**ddadmin** · 11-27-2008, 07:01 AM

Maybe I'm losing my eye sight here, but the menu bar looks exactly the same to me in FF and IE. The black bar extends all the way to the very right edge of the window.

Thread: Smooth Navigational Menu Problem

Thread Tools

Search Thread

Smooth Navigational Menu Problem

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions