Coffeecup website Menu - reveals...

User 2695940 Photo


Registered User
99 posts

Hi everyone,
I am hoping that someone smarter than me can help me duplicate the hover effect used on the coffeecup website menu?

Thanks in advance,
John
John Ferguson
Website Design and Development
www.jf1.co
User 2885740 Photo


Registered User
33 posts

Hi John,

here's is a quick answer from me. Later this week I will improve it a bit and add it to the other things you find under the link in my signature.
Ciao, René
Attachments:
User 2699991 Photo


Registered User
3,124 posts
Online Now

Hello John
First of all, which framework are you usibg for your project./
second
how many menu items do you require on the top bar?
third
how many items do you require in the dropdown mega menus

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2695940 Photo


Registered User
99 posts

René wrote:
Hi John,

here's is a quick answer from me. Later this week I will improve it a bit and add it to the other things you find under the link in my signature.
Ciao, René


Thanks René, That is exactly what I was looking for. I haven't played with Materialize framework before but I think I'll have to give it a try. I also think I should be able to do something very similar in Foundation, which I usually use.

Thanks again for your help!
John
John Ferguson
Website Design and Development
www.jf1.co
User 2695940 Photo


Registered User
99 posts

Wayan Jaya Space Cadet wrote:
Hello John
First of all, which framework are you usibg for your project./
second
how many menu items do you require on the top bar?
third
how many items do you require in the dropdown mega menus


I'm thinking 6 to 7 main menu items Wayan, with about 12 items in the revealed menu.
I'm using Foundation for my websites.

Thanks for your help!
John
John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
3,124 posts
Online Now

So only the one with the mega items ? The rest just normal?

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,124 posts
Online Now

So only the one with the mega items ? The rest just normal?

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2695940 Photo


Registered User
99 posts

Hi Wayan,

No, 3 of the menu items will have the Mega menu, only one has 12 items and the other 2 have 7 items.

It will be very similar to what René has provided.

John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
3,124 posts
Online Now

John Ferguson wrote:
Hi Wayan,

No, 3 of the menu items will have the Mega menu, only one has 12 items and the other 2 have 7 items.

It will be very similar to what René has provided.


Ha Ha it won't be similar to what Rene' has done which is really good actually but "materialize !!"

here is an example of something I put together using "foundation', I use something similar on my own site, but not so many links inside the reveal container.
It may need a biot more polishing, especially for IE11, but it is mobile friendly, fully responsive
take a looksee & let me know if it's anywhere near

http://rsd-tutorialscom.coffeecup.com/index.html

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,124 posts
Online Now

Actually I forgot to mention that they do not work on hover because mobile devices don't have that luxury yet so they are on click.but easily changed if you really want on hover

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.