Mega menu for ecommerce - megamenu

I would like to code a menu like continente.pt or sainsbury.
Can someone recommend me some tutorial for that kind of menu?
I am having a tough time finding one.
Thank you very much

Related

Bootstrap dropdown menu with column

I want to make a vertical dropdown menu that have column just like the one in Microsoft's website without js
if you know the basics of HTML and CSS then you can do it yourself it's easy and fun you know I am providing the link that will help you a lot.
Creating Hower Able Header DropDowns

Basic Header with jQuery Mobile

I have been looking to develop a mobile-device website. I've been looking at the available mobile layout frameworks and am currently looking at jQuery Mobile.
Since there's no room to display the menu all the time, I was thinking I want a button on the left side of the title bar that opens a drop-down menu. Similar to the drop-down menu on the left of the Facebook header.
I was surprised to find no examples of a menu like this. Can anyone point me to some examples of this, or perhaps offer some tips?
That element is commonly called a Side Menu, and there are ample resources online for it
quick google search gave me these results, but there are plenty more, good luck.
http://purecss.io/layouts/side-menu/
http://www.berriart.com/sidr/
http://ionicframework.com/docs/api/directive/ionSideMenus/

how to develop wordpress menu like wwe.com menu?

I would like to design and develop wordpress menu like wwe.com menu where it has multi-column and images and video section in drop down menus.
Is it possible in wordpress?
I can create multi-column menu but not sure how to do display images and videos. I want my client will be able to add/remove videos, images in menu. just like menu in wwe.com site.
Any help will be highly appreciable.
I would take a look at the UberMenu plugin, I think it's exactly what you're looking for.

Animate HTML Menu bar item

I am trying to create an animated menu bar, in which the background block moves from the current selection to the latest one. For an example, have a look at http://www.creative-jar.com/. I would like to accomplish this in the simplest possible manner (perhaps using only HTML and CSS). Any help will be really appreciated.
As I am new to web development, thoughts on whether this sort of animation is a good or bad idea are also welcome.
There's a jQuery plugin that does exactly what you describe: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Navigation Menu - ideas?

I'm currently teaching myself to create websites - this particular site is for a that business I have. I'm using Dreamweaver CS3 to do so.
I need some help with the horizontal navigation menu I am trying to create. I have three main categories within my website, each with their own small image to represent them. I want to have all three images, side by side underneath my company logo, acting as the navigational menu.
So for example, one section is Alcohol. When the user puts their mouse over the 'alcohol' image, a menu drops down underneath to show the subsections eg spirits, beer etc.
After doing some research, I can't quite decide the best way to do this. Whilst learning Dreamweaver, I have come across Spry Menus, which I thought would do the job. But I have also now learned about pop-up menus in Fireworks CS3 (which I also have available to me).
I'm really looking for some other opinions on the matter and would appreciate any recommendations about the best route to take with this.
Thanks.
I would prefer learning CSS menus instead of having it generated using Dreamweaver. You can try the this one.
I would learn pure CSS menus, and then for more advanced functionality, use jQuery plugins like Superfish
The site I first learned CSS menus from was CSSplay. This same guy also has a newer site aimed only at CSS menus.
I would say going though the source code of some of those will teach you a lot, but ultimately I would recommend using Superfish or some other jQuery plugin for more user-friendly menus, especially for delay on mouseout. A lack of mouseout delay can render most CSS menus completely unusable.
Give http://www.alistapart.com/ a try. Wonderful page with a lot of good tutorials. http://www.alistapart.com/articles/horizdropdowns/ for example shows you how to use a list and css to build a horizontal menu. Maybe a good starting point for you project.
Dreamweaver is really a good tool for getting fast results. But if you are interested in learning implementing websites than it is better to get your hands dirty. Take for example the tutorials from http://www.w3schools.com/ and a good editor of your choice and build your website or a fun project from the scratch. On the long run this investment will pay of.
First, don't use snippets built in dreamweaver. They are awful.
Use JavaScript, maybe even JS framework like jQuery. It offers toggle() function for that kind of situations.
In general, you should apply JS function to mouseover of your image. That function shows or hides div (your dropdown). You can achieve that by setting css parameter display: none (hidden) or display: block (visible).
Example for showing div:
My menu 1
<div id="menu-1">
<ul>
<li>Alcohol</li>
<li>Spirit</li>
</ul>
</div>
And some javascript:
function show(myid)
{
document.getElementById(myid).style.display = "block";
}
function hide(myid)
{
document.getElementById(myid).style.display = "none";
}
I made that in a hurry so it's not perfect.