All geek questions in one place

Layered CSS Sidebar Menu

Can you guys point me in the right direction? I want to add multilevel sidebar functionality to this template. Therefore, when I hover over one of the elements in the main menu, some sub-elements slide to the right ... preferably using only css and preserving the style / color / appearance, etc. I suck css, please help.

+4
source share
3 answers

Eric Meyer a clean CSS menu may be helpful. (If you go to the linked page, hover over "css / edge" to see how the menus appear).

+1
source

You will need to do something like this:

<div class="menu"> <ul> <li class="list_item"> <a href="#">Home</a> <ul class="submenu"> <li class="sub_list_item"><a href="#">Home</a></li> <li class="sub_list_item"><a href="#">Home</a></li> <li class="sub_list_item"><a href="#">Home</a></li> </ul> </li> </ul> </div>

This will be the basic structure for a single menu item that has 3 subscription items. I have not tested this code, but here is a bit of CSS styling to start with.

 ul.submenu { display:none; } ul.submenu:hover{ display:block; } ul.submenu li.sub_list_item { width:100px; background:blue; color:#fff; line-height:30px; height:30px }

This should be enough to start with you. Good luck.

+1
source

This is a good place to start . There are many different options.

0
source

Source: https://habr.com/ru/post/1304534/

More articles:


All Articles