SMOOTH NAVIGATION MENU

  • 1
  • Question
  • Updated 8 years ago
  • Answered
really frustrated...i 've been trying to add smooth navigation menu to my website since last week...can s/body help me.... i use http://www.dynamicdrive.com/dynamicin... as my references.

PLEASE..Please....:(
Photo of ceriaprinting

ceriaprinting

  • 4 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello,

Would you mind sharing your site's URL so we can look at what you have so far? This will allow us to investigate further.

Cheers
Photo of ceriaprinting

ceriaprinting

  • 4 Posts
  • 0 Reply Likes
here is my yola site...i'm new in this..please advise... http://www.ceriakadkahwin.com/kadkahw...

if u can see, i only need the smooth navigation button on the left link (JANUARY COLLECTION ETC)..

thanks,
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Ceriaprinting,

You need to add the code from Step 1 from the dynamic drive page. This references the js and css files you have in your File Manager. Make sure you change the urls to reflect resources and the folder names. They are also case sensitive. So the url should be something like this: resources/folder/filename.js

Please try this and let us know if we need to work on it some more.
Photo of ceriaprinting

ceriaprinting

  • 4 Posts
  • 0 Reply Likes
i'm just follow the step given...

1st--- I just copy step 1 and paste it at HTML widget
2nd--- I save "ddsmoothmenu.js" , "ddsmoothmenu.css" , "ddsmoothmenu-v.css" to my specific file inside the file manager
3---I just copy step 2 and paste it below the HTML code what i did in step 1

Thats it..I really don't se where to put the link in the HTML widget so that i can link to my specific folder inside the file manager..

Thanks you YOLA for your fast response..
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--
Hello! Well I just set this code up for you and it is ready to go! All you need to do is copy this and put this in an HTML widget (delete the other code first and paste this new one in that is below)

Here is the code!

Put this into a HTML widget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/...>
<link href="http://tester3.yolasite.com/resources..." type="text/css" rel="stylesheet">
<link href="http://tester3.yolasite.com/resources..." type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://tester3.yolasite.com/resources...>
<script type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<h2>Example 1</h2>

<div id="smoothmenu1" class="ddsmoothmenu">
<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>

--> « DON'T copy this, it isn't part of the code.

FAQ

1. Do I know this is a long code?
-> YES

2. Will this be hard for you to put into your website?
-> NO

3. Are there people to help you with this?
-> YES


Just copy that whole code above and paste it into an HTML widget (after you deleted the other code out) and it should work!

Note: I hosted these files on my "Test" website so you wont need to host the files your self, because I am already hosting them so all you have to do is copy and paste and change up the menu a little bit (but don't delete out HTML unless you know what you are doing, but change the text)

If there are any problems with this let me know. Thanks!

I hope this helps!

Sincerely,
Nathan
Photo of ceriaprinting

ceriaprinting

  • 4 Posts
  • 0 Reply Likes
Thanks you very2 much... LOVE YOLA DAMN MUCH...

THANKS Nathan...ITS ANSWERED ME....
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I am glad it answered your question! Does it all work or does it have any problems? If it has any problems let me know and I will edit the files and I will fix it for you.

I am glad you love Yola, I do too :)

Thanks!
Nathan