CODEWITHSUNDEEP
htmlcssmenu
user1360809
user1360809

Reputation: 745

CSS Only Sliding Menu

Please see link below:

http://cssmenumaker.com/builder/111528

I am trying to figure it out. What I don't understand is how it works - I cannot fathom how the sub-menus remain hidden and don't interfere with the rest of the page.

Allow me to explain further - when I tried to make my own I had it in my mind that I would have to hide and show the submenus (I was using DIV tags thinking I was clever) but that when made visible they would then take their place in the DOM and move everything else out of the way (something I obviously wanted to avoid but don't understand entirely how to accomplish). When I tried to make mine using JS it didn't work as I wanted. I changed the 'display' and 'visibility' properties of the nested DIV tags (sub-menus) to 'none' and 'hidden' respectively until an onmouseover event and it just doesn't work correctly and I have no idea how to make something work like the example.

I am looking at the hover commands and cannot see how this makes the sub-menus invisible until hovered over. I can also only see the display:block command as the only reference to how they are displayed but do not understand how they don't move everything else out of the way when displayed.

Does this make any sense? Can anyone explain how the example works, what the DOM model looks like and how all the parts of the DOM are interacting with each other? W3C is not much help here.

My impression was that the DOM model is static and will display things in box fashion unless you add some complex z-index or some other method so what am I missing here? I would also prefer a pure CSS solution which is why I posted the example above, I want to understand all this much more than I currently do.

Much obliged to any help!

Upvotes: 0

Views: 1173

Answers (1)

daan_tallguys
daan_tallguys

Reputation: 305

The answer is: position absolute.

Position absolute removes the elements from the static flow, thus not pushing away the other elements. To control the absolutely positioned elements, you can wrap them in a relative positioned element: the offset parent. This way, you can create blocks/menus/etc. with absolutely positioned elements within, in a normal flow.

For a brief explanation: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

The display none/block part is just hiding/showing the submenu's. If a parent got :hover, you can show the submenu with display: block.

Upvotes: 1

Related Questions