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/dynamici...smoothmenu.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:

Code:

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

Code:

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

Code:

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

Code:

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

Code:

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

Thread: Smooth Navigation Menu (won't stay in one place).

Thread Tools

Search Thread

Smooth Navigation Menu (won't stay in one place).

dd smoothmenu (won't stay in place)

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

Bookmarks

Bookmarks

Posting Permissions