Адаптация меню

111

Василич#

19 февраля 2018, 20:38

881

Здравствуйте ! Пытаюсь сделать своё меню адаптивным.

Есть меню вида:

<div id="menu">
<ul>
<li><a href="#">Ссылка 1</a></li>
<li class="has-sub"><a href="Ссылка на основное меню">Ссылка 2</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
<li><a href="#">Подменю 4</a></li>
</ul>
</li>

<li class="has-sub"><a href="ссылка на основное меню">Ссылка 3</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
</ul>
</li>

</ul>
</div>

По умолчанию, при наведении курсора всплывают подменю. Под @media (query) подогнал меню под моб. устройства. Теперь стараюсь, чтобы при клике на основную ссылку, открывалось подменю, но не могу этого реализовать, ввиду того, что всегда переходит по основной ссылке.

Пните в нужном направлении, перелопатил много решений, но все тщетно.

Заранее спасибо

bmw-power.com.ua (https://bmw-power.com.ua)

S

171

silicoid

19 февраля 2018, 21:34

#1

li.has-sub > a:focus + ul{

display:block;

}

только с a href уберите ссылку, иначе вместо открытия будет переход на др страницу.

как вариант - глушить при помощи Js onClick="return false;"

апд

если вы хотите, чтободин клик открывал меню, а второй - переход, то это без сурового джи эса не обойтись.

апд2
la belle с точки зрения итальянского языка является ошибкой
la - это неопределенный артикль для женского рода в единственном числе
belle -означает красивые (множественное число женского рода -- оканчивается на е )
то-есть налицо несогласование артикля и прилагательного
правильно было бы le belle

извините, только с лекции по итальянскому приехал

1

Google и AJAX подгрузка Новый белый каталог, с Стоимость продвижения в англ.

153

danforth

19 февраля 2018, 22:02

#2

silicoid:
то это без сурового джи эса не обойтись.

Там не очень то и сурово.

silicoid:
апд2
la belle с точки зрения итальянского языка является ошибкой
la - это неопределенный артикль для женского рода в единственном числе
belle -означает красивые (множественное число женского рода -- оканчивается на е )
то-есть налицо несогласование артикля и прилагательного
правильно было бы le belle

извините, только с лекции по итальянскому приехал

Нужно ещё на лекции по французскому сходить :)

1

Junior Web Developer

111

Василич#

19 февраля 2018, 22:12

#3

silicoid:
li.has-sub > a:focus + ul{
display:block;
}
только с a href уберите ссылку, иначе вместо открытия будет переход на др страницу.
как вариант - глушить при помощи Js onClick="return false;"

Большое спасибо за ответ !

Ссылку не представляется возможным убрать, т.к. это главное меню и работает как должно на норм разрешении. Но проблема в том, что "глушить будет и на версии для ПК", что не нужно, а обязательно только для моб. В этом то и вся лобуда :(

silicoid:
апд2
la belle с точки зрения итальянского языка является ошибкой
la - это неопределенный артикль для женского рода в единственном числе
belle -означает красивые (множественное число женского рода -- оканчивается на е )
то-есть налицо несогласование артикля и прилагательного
правильно было бы le belle

хэх :D

Не отображается стиль в Резкое падение CTR с Google AdSense - Вопросы

R

49

rche

19 февраля 2018, 22:40

#4

Вариант, на JS проверять ширину экрана, попробуйте решение

onClick="if(document.documentElement.clientWidth < 768) return false;"

1

S

171

silicoid

20 февраля 2018, 08:53

#5

danforth, Ну суровый, в смысле больше, чем в одну строчку )

Василич#, тогда можно поступить следующим образом

1. подключить deviceJS - это такой миниатюрный скрипт, написаный на чистом JS, который в зависимости от того, какое у вас устройство добавляет соответствующие классы на body

2. добавляем примерно такой код [ jQuery ]

$(document).ready(function(){
	$('body.mobile #menu .has-sub > a, body.tablet #menu .has-sub > a').click(function(){
		return false;
	})	
})

1

В Google Earth добавлено Google: почему rel=canonical может Google AdWords представляет новое

168

dma84

20 февраля 2018, 14:33

#6


@media screen and (max-width:768px)
{
	#menu li.has-sub > a{pointer-events:none}
}

2

S

171

silicoid

20 февраля 2018, 16:49

#7

dma84, Очень интересный вариант!

1

487

Geers

20 февраля 2018, 17:06

#8

silicoid:
dma84, Очень интересный вариант!

И самый правильный.. :)

1

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта