X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Как привязать меню к кнопке <nav> ?
pippak
pippak
Topic Starter сообщение 12.10.2017, 19:25; Ответить: pippak
Сообщение #1


Участник
***

Группа: User
Сообщений: 182
Регистрация: 30.10.2008
Из: Россия
Поблагодарили: 5 раз
Репутация:   -7  


Всех приветствую. Подскажите пожалуйста. Есть шаблон на на DLE адаптивный. Хочу прикрепить меню сайта к кнопке <nav>, та что появляется только на минимальных разрешениях. На мобильниках все нормально и правильно отображается, а как сделать, чтобы на десктопах не показывалось это меню? Категорий много и если оставить их, то на ПК меню портит всю сетку. Как сделать, чтобы меню активировалось только когда появляется кнопка <nav> которая с тремя черточками?

Код
<nav>
                  <ul class="top-nav clearfix">
                      <li><a href="#">Премиум</a></li>
                     <li><a href="#">Видео</a></li>
                     <li><a href="#">Фото</a></li>
                     <li><a href="#">Рассказы</a></li>
                  </ul>
               </nav>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
BeerAbsorber
BeerAbsorber
сообщение 13.10.2017, 17:01; Ответить: BeerAbsorber
Сообщение #2


Участник
***

Группа: User
Сообщений: 109
Регистрация: 16.11.2010
Поблагодарили: 35 раз
Репутация:   5  


Если используется bootstrap, то в список добавить класс hidden-lg. Если без bootstrap, то классу top-nav назначайте свою видимость для разных @media.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nell
Nell
сообщение 11.12.2017, 15:57; Ответить: Nell
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 270
Регистрация: 9.10.2011
Из: Саратов
Поблагодарили: 42 раза
Репутация:   8  


Задайте блоку, который должен показываться только на мобильных устройствах, какой-то класс .someclass.
Затем в CSS-файле (вместо 992px подставьте ширину экрана, ниже которой блок показываться не должен):
Цитата
@media only screen and (min-width: 992px){
.someclass {
display: none;
}
}


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКак быстро похудеть мужчине в домашних условиях?
бесплатно, без регистрации, без смс
247 Silverspam 16487 Сегодня, 9:18
автор: LerraL
Открытая тема (нет новых ответов) Как правильно продвигать сайт с онлайн услугой в интернете с нуля.
6 magxxx 716 19.2.2018, 23:14
автор: rokot
Открытая тема (нет новых ответов) Как быстрее заработать на сайтах?
Самому делать сайт с 0 или проще купить готовый?
9 Dross 1128 19.2.2018, 21:39
автор: Кузьмич
Горячая тема (нет новых ответов) Как заработать новичку?
123 Emeralda 21321 19.2.2018, 15:57
автор: IrinaShugay
Открытая тема (нет новых ответов) Как вычистить ноутбук от вирусов?
17 metvekot 931 19.2.2018, 15:55
автор: Denny


 



RSS Текстовая версия Сейчас: 21.2.2018, 9:19
Дизайн