PDA

View Full Version : 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/dynamicindex1/ddsmoothmenu.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:


<!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:


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

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


/*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:


<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:

//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:

//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:

//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
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.

Need-Help
11-27-2008, 07:41 AM
Now I've checked that in IE6. Yes, it shows nicely in IE 6 (showing the same thing in FF3) but in IE7, it is not the same thing. Here is an image showing what I'm talking.

Thanks for your help.

ddadmin
11-27-2008, 08:38 AM
Hmm try removing the code:


<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


Not sure if this fixes it, but worth a shot.

Need-Help
11-27-2008, 09:07 AM
Thanks :) It worked nicely now.

Here's another question. How can I make 'Category' (and all the buttons) showing exactly above the 'Top 3 Tutorials' bar (which means showing at the center) and yet the background (black bar) shows from left to right.

Thanks for your help.

Here's another problem :
If I disable Javascript in both IE 7 and FF 3, it won't show the 'site map' button. Instead, it shows as normal but just cannot function.