Форум web-мастеров phpBB3

Модификации и расширения phpBB




Ответить на тему
Пред. тема | След. тема 
Автор Сообщение
Admin
Аватара пользователя

Карма
29
Стаж: 6 лет 2 месяца
Сообщения: 326
Россия

Ответить с цитатой

#944

Простое выпадающее меню может быть создано без JavaScript и/или jQuery. Для создания используются CSS-свойства display, padding, псевдокласс :hover. Работающее меню можно посмотреть сразу (Нажмите «Fork», если хотите оформить HTML-меню по-своему). Продолжительность видео ~12мин. Заметка рассчитана на начинающих верстальщиков, вебразработчиков, которые делают первые шаги по изучению основ HTML и CSS; для тех кто изучил курс «Основы HTML5 и CSS3».

Создание простого выпадающего меню

Для создания меню на сайте обычно используется структурный блочный HTML-элемент nav и ненумерованный список. В одном из пунктов списка встраивается еще один список, так, чтобы он не входил в гиперссылку. Можно было бы разместить ul и внутри a, но на мой взгляд это не очень хорошая идея, ведь псевдо-класс :hover работает и с элементами li!

В нашем случае мы не рассматриваем вариант, когда у выпадающего списка тоже есть вложенные списки — эта задача не сложна сама по себе, но вызовет трудности у начинающего верстальщика. Также заметим, что построение меню можно выполнить, если найти или написать соответствующий JavaScript.

Для удобства работы с разметкой (вдруг у нас встретится ещё один nav), добавим CSS-класс нашему структурному навигационному элементу; гиперссылки сделаем заглушками, но вы можете вместо # прописать http://htmllab.ru

HTML-разметка для меню с выпадающим подменю
<nav class="menu">
  <ul>
    <li><a href="#">Lorem.</a></li>
    <li><a href="#">Explicabo?</a>
   
      <ul>
        <li><a href="#">Lorem.2</a></li>
        <li><a href="#">Eveniet.2</a></li>
        <li><a href="#">Omnis.2</a></li>
        <li><a href="#">Beatae.2</a></li>
      </ul>
   
    </li>
    <li><a href="#">Doloribus.</a></li>
    <li><a href="#">Sint.</a></li>
  </ul>
</nav>

Главное в CSS: чистка значений по умолчанию у HTML-элементов, входящих в меню; сокрытие будущего выпадающего подсписка (подменю) и его отображение, при наведении на родительский HTML-элемент — использование псевдо-класса :hover
CSS-правила для выпадающего меню
.menu ul li{
  padding: 10px;
}
.menu ul > li:hover{
  background-color: #f96;
}
.menu ul ul > li:hover{
  background-color: #69e;
}
.menu ul li, .menu ul{
  display: inline-block;
}
.menu ul{
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #f63;
}
.menu ul ul{
  display: none;
  position: absolute;
  background-color: #369;
  margin-top: 10px;
  margin-left: -10px;
}
.menu ul a{
  color: #fff;
  text-decoration: none;
}
.menu ul ul a{
  color: #fff;
  text-decoration: none;
}
.menu li:hover ul{
  display: block;
}

.menu li:hover li{
  display: block;
}

Созданное меню не является идеальным и может быть улучшено (подумайте, как именно). Удачной вам разработки и пусть создание подобных меню никогда не вызовет сложности!
Профиль  Отправить личное сообщение
Идеальный заработок для торрент-трекеров
Страница 1 из 1
Показать сообщения за:  Поле сортировки  
Ответить на тему

Сейчас этот форум просматривают: нет пользователей онлайн и гости: 1

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

cron