jojom
01-22-2011, 06:06 AM
1) Script Title: Smooth Navigational Menu (v1.5)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
3) Describe problem: I tried the Menu code and it works fine but I wanted to place the menu content in an external file and I followed the intructions given but the sub menus are not functioning and hence unable to navigate.
The script placed in the head section is;
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
orientation: 'h',
classname: 'ddsmoothmenu',
customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.html"] //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
The code placed in the body section is :
<div id="smoothcontainer">
<noscript>
<a href="link to site map for search engines and user with JS disabled">Site map</a>
</noscript>
</div>
The code in the external file named smoothmenu.html is :
<div id="smoothmenu-ajax" class="ddsmoothmenu">
<ul>
<li><a href="http://www.mysite.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.mysite.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
What is wrong with my code? please help
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
3) Describe problem: I tried the Menu code and it works fine but I wanted to place the menu content in an external file and I followed the intructions given but the sub menus are not functioning and hence unable to navigate.
The script placed in the head section is;
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
orientation: 'h',
classname: 'ddsmoothmenu',
customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.html"] //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
The code placed in the body section is :
<div id="smoothcontainer">
<noscript>
<a href="link to site map for search engines and user with JS disabled">Site map</a>
</noscript>
</div>
The code in the external file named smoothmenu.html is :
<div id="smoothmenu-ajax" class="ddsmoothmenu">
<ul>
<li><a href="http://www.mysite.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.mysite.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
What is wrong with my code? please help