PDA

View Full Version : Smooth Navigation Menu (won't stay in one place).



braddain47
03-27-2012, 04:53 AM
1) Script Title: Smooth Navigational Menu (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem: Smooth Navigation Menu (won't stay in one place).

I used the dynamic drive smooth menu:
http://www.dynamicdrive.com/dynamici...smoothmenu.htm
This is the problem I am having.

http://sakurasigns.com/nav_problem.htm

The navigation menu moves (goes down the page).
I would really appreciate any help I could get I know that the solution is simple I just havn't been able to figure it out.
Thanks
Brad

ddadmin
03-27-2012, 07:36 AM
A couple of things you'll want to fix:

1) Firstly, you should remove the code in red in your source code, as it doesn't belong there:


<div id="smoothmenu1" class="ddsmoothmenu">




<div id="smoothmenu1" class="ddsmoothmenu-v" position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#3fffff; overflow:auto;">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>


</div>

2) Make sure your page contains a valid doctype at the very top, such as:


<!doctype html>

braddain47
03-29-2012, 03:22 AM
Thanks
But that didn't work....
I think what the real problem is the java scrip. The menu behaves the same weather the Java Script is uploaded or not. So I believe that the java script is not being used. I have the html and the css and the js files all sitting in the same place at sakurasigns.com at the root level my other java script works and it is in the same place.......So I am not sure why the js is not functioning.
Any help will be greatly appreciated.
Thank You
Brad

ddadmin
03-30-2012, 05:59 PM
Hmm the URL you posted (http://sakurasigns.com/nav_problem.htm) no longer works for me. Regardless, from what I recall, the menu does run (so it's not a JS loading/running issue), just that the revealing of the sub menu pushes the page down as you had mentioned. Please first the link and I'll check out the page again.

braddain47
03-31-2012, 06:58 AM
I got the URL fixed right now. http://sakurasigns.com/nav_problem.htm
Thank You for your help! I really appreciate it.

ddadmin
03-31-2012, 08:42 PM
The URL now works for me. Looking at your page's source though, you haven't fixed the issue I mentioned above yet as far as removing the HTML tags in red as described above.

braddain47
04-01-2012, 04:31 AM
OK
My bad....
here is the revised code: http://sakurasigns.com/nav_problem2.htm
Thank you

ddadmin
04-03-2012, 10:14 PM
There are still a couple of issues on the revised page you posted. Firstly, remove this code, which doesn't belong there:


<position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#3fffff; overflow:auto;">


Also, since you're using the vertical version of the menu, the CSS class name for your DIV container should be "ddsmoothmenu-v". Change the part in red below to the aforementioned class name:


<div id="smoothmenu1" class="ddsmoothmenu">

braddain47
04-04-2012, 03:23 AM
Thanks but that didn't work. The menu is still moving around.
Thank You for your efforts I really appreciate it.

ddadmin
04-04-2012, 05:01 AM
Ah ok I found the final piece of the puzzle. The issue occurs because your page is missing a reference to "ddsmoothmenu.css". Add the below code in red to the HEAD section of your page, and also, be sure to download this file from the script page as well:


<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />