0

Можно ли доработать такое выпадающее меню что бы при нажатии на него, область вокруг меню была не активна, пользуюсь этим меню для мобильной версии сайта, когда хочешь закрыть меню, всё время да попадёшь на какую ни будь ссылку, а хотелось бы что бы при нажатии на любое место за пределами меню, закрылось и не перешло если ты нажал в то место где за меню находится ссылка, вообщем как в модальных окнах, и как можно сделать что бы меню так же закрывалась нажатием на кнопку "Меню" так же как и открывается

.sub-menu 
{ 
position:absolute;
   display: none; 
   z-index:3;
   left:3px;
   border-radius: 3px;
   width: 50%;
    background-color: #edeef0;
    color: #000;
	padding: 5px 5px 1px 5px;
	border: 1px solid #e3e4e8;  
} 


.main-item:focus ~ .sub-menu, 
.main-item:active ~ .sub-menu, 
.sub-menu:hover 
{ 
display: block; 
}
.menu_v {
    background-color: #FFF;
    color: #3366b2;
    margin-bottom: 3px;
    border-radius: 3px;
    padding: 5px 5px 5px 15px;

	border: 1px solid #e3e4e8;	
}
<a class="main-item" href="javascript:void(0);" tabindex="1" >Меню</a>
<div class="sub-menu">
<a href="/#">
<div class="menu_v">url1</div></a>
<a href="/#">
<div class="menu_v">url2</div></a>
</div>
<br><br><br><br><br><br><br><br><br>
<a href="/#">ссылка не активна</a>

1 ответ 1

0

Придется либо менять структуру меню (немножко), либо использовать js. Можно добавить фиксированный прозрачный блок по размерам экрана. Только его z-index должен быть между значений самой страницы и самого меню. На Chrom'e мобильном блок хорошо перекрывает ссылки

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.