Mega Top Menu

I think I’m going to make history, at least today thanks to you and your magic, it’s a special day in my life and that’s why I want to make you a great gift: Mega menu.

I have created a magical structure, which thanks to our colleague @Jakerlund , I have improved, overcoming my own personal limits. I have assigned a system that can be used as a personalized Mega Menu, or as an accordion, to suit your restless minds.

On the one hand I have assigned an automatic opening and closing property, but with a final detail on request and that when the user is thoughtful in the menu, it will remain open and when it leaves, the closing will be activated. Does anyone give more? :sweat_smile:

Excuse my personal emotion, but I have not dared to create something like that, although it may seem very basic, for me I do not know programming has been a genius.

Thanks to @Norm, for creating this beautiful program that I enjoy so much, thanks to @MDS, @Jakerlund, @Eldar or your help and source of inspiration, and thanks to each and every one of the members of this community, well even if you do not realize, this is true added value of this great company.

Enjoy it, challenge yourself and surprise us with your imagination. :rocket:

You are all a cracks! :sunglasses:

Dreamsur :surfing_man:

Mega Menu.bloc (731.8 KB)

5 Likes

Hi Jesus @Dreamsur

This is the magic of Blocs, you do not need to be a programmer to achieve such things.

Just need to want to succeed, a little work and a little help.

Bravo. It’s nice to to see that you are enjoying this and sharing.

MDS

2 Likes

@MDS Un millón de gracias por tus palabras.

Agradezco mucho, cada vez que necesito ayuda y alguno de vosotros se implica en ayudarme. Es por ello que pensé que compartir algún descubrimiento, ayudaría a todo el equipo a brillar con más fuerza.

Ahora solo queda aplicar vuestra creatividad.

Gracias por brindarme tu apoyo.

Un fuerte abrazo desde Madrid.

2 Likes

Good job @Dreamsur

That is a great start to build a visually different menu from. :+1:

1 Like

It’s always a pleasure to read you @Jakerlund!

The truth is that I have to thank you for your contributions, because you made me surpass myself professionally.

The truth is that yes, it will be easier to include forms, images, effects … come on, you can make some incredible menus!

I personally designed it for my wife’s project, and in what I have gained, it is in the functionality for the user, because visually it is very simple. (It is a project in which the graphic minimalist, the good content and the multi-device user experience prevail.)

But yesterday you helped me to remember that there are no limits in each one of us, and neglect, someday if I have time, I will squeeze it for some personal project, that is up to the task!

We keep moving forward, take care! :muscle:

3 Likes

That is awesome. Thanks man!!

Wow you did a great job! I have a question for you, is there a way to make it work on hover and not click?? That would be awesome, but I cannot figure out how to do it by myself!
Thanks

Good guys! I thank you very much for your positive evaluations, the truth is that your feedback is always appreciated @Mattheus.

@gianni I’m pretty busy right now, that’s why I’ve been a bit slow to answer you. Let’s see if I stay a little more free and take a look.

I hope you enjoy it and squeeze the block.

A team hug! :muscle:

2 Likes

Thanks a lot for the effort anyway, I really appreciate! I’m trying to figure it out as well and I will share it here if I will find the solution, but my coding skills are quite limited so I have a lot to learn!

Thanks! Nice touch with the Javascript. I added one small thing to the code because I didn’t want my menu to push the content below it down, but instead “lay” on top of it.

So to do that, you have to tell the container to be absolute positioned, and then use “top” = number of pixels below the very top of the page. In this example I set it to 50.

#bloque01 { z-index: 9999; position: absolute; top: 50px; }

So I’ve been working on a mega menu. Getting close to finishing things up:
https://vmedia.de/schroeder/index.html

There is only 1 mega menu, which can be seen when clicking on “PROGRAMME”. I still have to add your cool code. having a little trouble figuring out how to adapt it for only 1 mega menu instead of 2.