Greetings

Tell me how to make a pop-up menu, preferably on css, with this feature: the menu is removed not only by clicking on the link, but also to any place in the space outside this menu. Example: such menus are often found on Yandex and Google.

  • If you do not fool yourself, then you can do only css. But given the GA (Google Analytics) data rate, 12-15% of site visitors still use malicious IE6. If the site has no commercial interest, the answer is below. If the site is engaged in attracting customers, and even investing money on advertising and promotion, then don’t forget about the donkey. The js handler must be present unambiguously. - Palmervan
  • That's right about IE6, a commercial site, and also a provincial one, where these same 12-15% seem to live (although not necessarily). So I will be glad to know the solution for IE6 even using scripts. - Aviko
  • I will advise Jquery, the implementation will be in response. - Palmervan

3 answers 3

I once implemented a similar menu. there the meaning is quite simple: we make the usual navigation menu. Once the menu is drop-down, we do the first and second level (let's say) The first level is always displayed, but the second level is hidden using display: none; . when hovering over a certain menu item of the first level through the pseudo-class :hover display links of the second level it is correct to set the positioning for the second level. and it is also very important (this problem made me suffer for a long time) to ask for the item to hover over which a submenu will appear, padding more. to increase the response area to guidance. For greater clarity, my HTML code (simplified):

 <!DOCTYPE html PUBLIC "-//W3C/DTD//XTHML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm1" xml:lang="en" lang="ru"> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <ul id="main_nav"> <li><a href="#">О компании</a></li> <li><a href="#">Услуги</a> <ul> <li><a href="#">Все виды оценки</a></li> <li><a href="#">Автоэкспертиза</a></li> <li><a href="#">Автострахование</a></li> <li><a href="#">Юридические услуги</a></li> </ul><!--end sub_nav--> </li> <li><a href="#">Тарифы</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> </ul><!--end main_nav--> </body> </html>

And CSS code (also simplified):

 #main_nav { position: relative; top: 15px; margin-top: 14px; margin-left: 280px; } #main_nav li{ display: inline; padding: 0 8px; border-left: 1px dotted #8b6619; position: relative; z-index: 2; } #main_nav li:first-child, #main_nav ul li { border-left: none; } #main_nav ul { display: none; position: absolute; top: 19px; left: 0; z-index: 1; width: 155px; } #main_nav li a, #main_nav li ul li a{ color: #8b6619; font-family: "Times New Roman", serif; font-size: 0.9em; font-weight: bold; text-decoration: none; outline: none; padding-bottom: 17px; } #main_nav li a:hover, #main_nav li ul a:hover { color: black; } /*--------------Подменю--------------*/ #main_nav li:hover ul { display: block; }

That's all. Thanks for the votes!)

  • but what about ie6? - Palmervan
  • one
    @Palmervan But what about Netscape? - smellyshovel
  • one
    @smellyshovel, IE and Netscape are only needed so that you can download a normal browser ... - Sergey Sereda
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { $('ul', this).slideDown(100); }, function () { $('ul', this).slideUp(100); } ); }); </script> <style type="text/css"> #nav { margin:0; padding:0; list-style:none; } #nav li { float:left; display:block; width:100px; background:#ccc; position:relative; z-index:500; margin:0 1px; } #nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center; color:#333; } #nav li a:hover { color:#fff; } #nav a.selected { color:#f00; } #nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } #nav ul li { width:100px; float:left; border-top:1px solid #fff; } #nav ul a { display:block; height:15px; padding: 8px 5px; color:#666; } #nav ul a:hover { text-decoration:underline; } *html #nav ul { margin:0 0 0 -2px; } </style> </head> <body> <ul id="nav"> <li><a href="#">Parent 01</a></li> <li><a href="#" class="selected">Parent 02 > </a> <ul> <li><a href="#">Item 01</a></li> <li><a href="#" class="selected">Item 02</a></li> <li><a href="#">Item 03</a></li> </ul> </li> <li><a href="#">Parent 03 > </a> <ul> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 06</a></li> <li><a href="#">Item 07</a></li> </ul> </li> <li><a href="#">Parent 04</a></li> </ul>
  • Thank. But I would like to open the menu by clicking, and not hover. And close by clicking on the button not only on the button, but also to any place in space ... There is an example right there on this page, in the upper left there is, next to the “edit”, a “still” fad, so it opens and closes as it should. - Aviko

Drop-down menu on click

 HTML код <a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a> <ul class="sub-menu"> <li><a href="#1">подпункт 1</a></li> <li><a href="#2">подпункт 2</a></li> <li><a href="#3">подпункт 3</a></li> </ul> CSS код .sub-menu { display: none; } .main-item:focus ~ .sub-menu, .main-item:active ~ .sub-menu, .sub-menu:hover { display: block; }
  • Bomblerm asks: TomasRedl, and can you add any animation to the menu, for example, the output, like in VKontakte, when you click on your name and avatar? - Vladimir Glinskikh
  • Yes you can, but it's better to do it with JS or with a css generator - TomasRedl