CSS flyout menu on hover.

[king1889]

Hi,

I would like to know how I can get started on a CSS menu like Microsoft’s drop down menu on http://www.microsoft.com/en-us/default.aspx?

I have been looking around the internet on this type of menu and cannot find anything.

Thank you

[Paulie_D]

Looks like a Mega Menu

[king1889]

Thanks, yes its a mega menu. How can I achieve the hover effects and the fixed rectangle when the menu is selected?

[Paulie_D]

That’s a very broad question.

We’re not really a “code-it-for-you” forum or even a “tutorial” forum.

You should really make your own attempt (codepen.io) is a great tool for testing code that can be shared and we can help you over the bits you have trouble with

There are many many places that will show you the code and most of the CSS for building a Mega menu (I linked one before) to be found now that you know what to plug into a Google Search

[king1889]

Thank you Paulie_D, I created a JSFiddle, please view.

https://jsfiddle.net/king2525/7yag3ggn/3/

I am having trouble targeting css on hover function for nested div. In the code example, how I can have the following target a specific div

div id=”nav1″ display div id=”section5″
div id=”nav2″ display div id=”section6″?

Currently, parent div id=”nav” displays div id=”section5″

If there is a better method, please let me know.

Thank you

[Paulie_D]

the sort of interaction you are after requires, generally, Javascript.

Also you seem to me making up custom elements

<a1 href="#">GALAXY S6 Edge</a>

I’d suggest you validate your HTML as well.

[king1889]

Thank you. Is it possible without Javascript?

[Paulie_D]

Not really, your current structure doesn’t allow it AND any CSS solution would be hacky at best.

…but this doesn’t seem to be the Mega Menu you mentioned before?

[king1889]

Thank you. How can I create the JavaScript needed for the function needed? Its similar to the Mega Menu mentioned previously. Left side bar and right content area.

[Paulie_D]

As I said..

We’re not really a “code-it-for-you” forum or even a “tutorial” forum.

This is something you’ll have to do your own research on…try some things and see how you get on.

[king1889]

Thank you

[Author]

Posts