Free HTML drop-down menu works a treat!

  • 1
  • Idea
  • Updated 8 years ago
Hi Everyone

I have been playing around creating drop-down menus for my website and have found a great FREE application that I would like to share. It is called "Coffee cup", it is a DHTML menu generator and you can get it here http://www.coffeecup.com/free-dhtml/
You can place the menu anywhere you want on the page, so I have placed mine directly over Yola's template menu area, so I don't have 2 menus or waste any space. I have also matched the colour with the site's template background, so it blends right in. Check out my work & let me know what you think.... http://petesprinting.yolasite.com/ (It's only "Products & Services that drops down at the moment)
Any questions on how I did it, just ask.

Enjoy Pete

Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
  • happy

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Very cool Pete!

I'm sure our forum users would appreciate learning how you did this. :)
Photo of Elite

Elite

  • 5 Posts
  • 0 Reply Likes
ya, question* howd ya do it? :D I DL everything, and when i go to put it into mysite, the codes come up and say browser doesnt support, and when i try to upload the file, it doesnt show either.. ? im completely new to all of this, totally way over my head right now .. Anyhelp would be much appriciated!! Thank you..
Photo of Elite

Elite

  • 5 Posts
  • 0 Reply Likes
oh and kudos to your site, menu looks great :)
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi Eve, I've had a few questions about this now, so I will put a video together to show how it's done, just keep an eye out on this post.
Photo of A. Beath

A. Beath

  • 3 Posts
  • 0 Reply Likes
I would really like to know how you placed it over the template? Please share :-)
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi, I've had a few questions about this now, so I will put a video together to show how it's done, just keep an eye out on this post.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
I tried this from Coffee Cup and couldn't get it to work. So do tell! :)
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi Diane, I've had a few questions about this now, so I will put a video together to show how it's done, just keep an eye out on this post.
Photo of A. Beath

A. Beath

  • 3 Posts
  • 0 Reply Likes
Hi Pete, this would be much easier if Yola had a blank tmeplate....maybe? Anyway I have been playing around with it and think it's pretty good (except I had little arrows on the buttons that have disappeared). I am nowhere finished with my pages but would like thoughts on making it better.
www.pandorabraceletcreations.com I did the menu using Coffee Cup :-)
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi There -There are a few options if you would like a "blank" style. The following styles are plain white with background color/image options:

1. CleanSlate
2. BareNecessities
3. NoFrills
4. SqueakyClean
Photo of A. Beath

A. Beath

  • 3 Posts
  • 0 Reply Likes
Hi Kershnee, I tried CleanSlate and NoFrills which were good but they still had a menu and that was what I wanted to change. I got there in the end and learned a whole lot in the process :-) All is good :-)
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
Hi all

The coffee cup menu does work if you'd like to put it on page by page.

If you're using the Yola pro you can put this same menu up in Java Script by using the author version at http://www.dynamicdrive.com/dynamicin...

If you have a small site the coffee cup version would be wonderful if you don't have to change, or mind changing page by page.

For larger sites I would use the one from http://www.dynamicdrive.com/dynamicin.... Just put the code on each page once. Then make changes in the proper place and all page in your site will be updated at one time, making it easier to add or delete pages at will. Also include here is a complete line by line break down that explain what each function does. If you'd like to see a sample of explanation go to http://javascriptfun.yolasite.com/pag...

When you study the menu setting for both they keep getting easier to use.

I've been changing over to this type of menu on several of my site @
http://www.andijos.com/, http://www.loydsworld.com/, http://www.shoppealots.com/ and http://www.roadtoserenity.com/ (Pictures Grandchild site born 1-18-10) This is how versatile this type of menu is.

This menu used either threw coffee cup or java script is easy to use just give yourself time to look at both menu option in detail. The down side with java script is that some time you can see the results right away, and other you have to delete history or even restart the computer. Don't know why. Change sometime are right now or other time later, but they do happen.

Papa
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Thanks for this additional info, Papa.
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi Everyone

Sorry it's been so long. I've been very busy with work.
I have created a tutorial video for this, just click on this link.....
http://www.vimeo.com/9266830
You may wish to watch it full-screen.

Pete
Photo of Clint

Clint

  • 4 Posts
  • 0 Reply Likes
I created the code and never shows up on my yola page at all please help. I followed you video tutoral as well. You also dont explain how to get it from top right corner into center like yours menu is.
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hi there Clint,
Could you share your URL with us so that we can take a look at your site and see if there is something wrong with your code.
Photo of Clint

Clint

  • 4 Posts
  • 0 Reply Likes
I can get it to work on main yola site http://DoorwayPortal.yolasite.com but I forward to a domain http://thedoorwayto.com and it will not show up on forward site I also want pages to open in new windows can that be done???
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi Clint
I am glad that you highlighted a problem with the menu not appearing when you use a different domain name. Mine doesn't either.... http://www.petesprinting.co.uk As for making your pages open in a new window or tab, I don't know how that's done.
Donalds menu looks good, maybe you could try that? I need to update my website really and work on ironing out these things, but don't seem to get the time. as for repositioning the menu on the screen the options are all there in coffee cup (left hand side in the options tab). You just have to play around with them until you get it right.
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Only me again.
I've tried again using the http://www.petesprinting.co.uk domain and now it seems fine. So I have no idea why it is not working with your http://thedoorwayto.com domain . Maybe that's one for Yola to answer?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
try cssmenumaker.com - that's what I use, look at my menu http://1stop-martial-arts.zymichost.com
Photo of Clint

Clint

  • 4 Posts
  • 0 Reply Likes
any more thoughts why it doesnt work on forwarded domain for drop down menu. I will try Cssmenumaker thanks
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I don't know much about services I haven't used, therefore I don't have much input, but I gladly recommend cssmenumaker.com , pay attention to the instructions when downloading. The images have to be in the same folders as they are in when given to you. If they have the images at menu/this_image.gif then they have to be in a /menu folder or you have to change the code to reflect the directory.
Photo of Clint

Clint

  • 4 Posts
  • 0 Reply Likes
Sorry maybe im slow but I can add the CCSmenumaker html code its just shows ups text links not drop down menu how to do you add folders to yola there is no ftp option???
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Clint, Yola doesn't offer FTP access. You upload images via the File Manager (top menu of site builder). You can upload on the first screen or, if you want a separate folder, you can add any folders you want and upload images to them.

To use the images use this path, "/resources/foldername/myimage.jpg" to link them.