Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 29.06.2016
Сообщений: 3
1

Раскрывающееся меню

22.07.2016, 20:37. Показов 2241. Ответов 1
Метки нет (Все метки)

Всем привет, уже несколько дней пытаюсь сделать раскрывающееся меню, как на http://fano.gov.ru/ru/
Подскажите, пожалуйста, примерный код

Заранее спасибо за подсказки и помощь!
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.07.2016, 20:37
Ответы с готовыми решениями:

Раскрывающееся меню
Всем привет. Не знаю где это выложить тут или в jQuery разделе. Как сделать такое меню? при...

Раскрывающееся меню с авторизацией
Не могу нормально дописать нормальный стиль для раскрытие авторизации. У меня надпись становиться...

Слайдер закрывает раскрывающееся меню
На этом сайте. Когда наводиш курсор на пункт меню, то раскрывающееся спиок оказывается под...

Плавно раскрывающееся меню на CSS
Хочу сделать, чтобы при наведении курсора мыши на элемент меню, оно плавно бы раскрывалось и при...

1
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
22.07.2016, 21:03 2
Лучший ответ Сообщение было отмечено Pogrebnyakpasha как решение

Решение

песочница
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nav input, nav .sub-nav{
  display:none;
}
nav input:checked ~ .sub-nav{
  display:block;
}
 
nav{  
  padding: 5px 10px;
  box-sizing: border-box;
  width:90%;
  margin:0 auto;
  background:#B0BEC5;
}
nav ul{  
  list-style:none;
  display:inline-block;      
}
nav ul li{
  display: inline-block;  
  padding:0 10px;
  
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav>
  <input id="menu-button" type="checkbox" />
  <label for="menu-button">Menu</label>
  <ul>
    <li>lorem</li>
    <li>lorem</li>
    <li>lorem</li>
    <li>lorem</li>
    <li>lorem</li>
  </ul>
  <div class="sub-nav">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe provident minima quam quis dicta, molestias incidunt odit eos quaerat, impedit perferendis? Voluptatem, tenetur. Eum voluptatum, voluptas fugiat debitis sint quas? Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Saepe provident minima quam quis dicta, molestias incidunt odit eos quaerat, impedit perferendis? Voluptatem, tenetur. Eum voluptatum, voluptas fugiat debitis sint quas?
  </div>
</nav>
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.07.2016, 21:03

Раскрывающееся меню при наведении
Здравствуйте, у нас такая проблема, поставили в блок header.php виджет меню, которое должно...

Создать раскрывающееся по клику меню
Помогите сделать так, что бы возле символа В стояла маленькое изображение &quot;+&quot;, и по клику на нее...

Раскрывающееся меню с одновременным открытием страницы
Здравствуйте! Задача такого плана: при нажатии на меню (Click me) появляются пункты меню ниже...

Как добавить выплывающее меню к уже готовому горизонтальному меню (не меняя дизайн горизонтального меню)?
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;...

Раскрывающееся меню - при открытии/закрытии вложенного меню закрывается все меню
Проблема во вложенном меню. При открытии/закрытии вложенного меню закрывается все меню. Надо, чтобы...

Раскрывающееся меню
Всем привет! Подскажите, как реализовать выпадающее меню как на скрине, что бы при нажатии айтем...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru