Выпадающее CSS меню

Обсуждение вопросов, проблем связанных с обучением CSS

Выпадающее CSS меню

Сообщение WebCyber » 16 апр 2015, 17:04

Всем доброго времени суток. Кто нибудь может помочь, как сделать выпадающее меню на чистом CSS(без скриптов)? Я конечно видел много примеров в интернете, но нет конкрентых объяснений действиям создания такого меню, а на этом сайте обучение все так разжевано и разложено по полочкам. Может автор сайта или кто то "бывай" сможет так же все разжевать и объяснить используя наглядный пример (код), объясняя алгоритм действий?)) Я уже весь мозг взорвал, спать не могу спокойно, никак не въеду в логику выпадающего меню)) :( :crazy:
WebCyber
 
Сообщения: 13
Зарегистрирован: 16 апр 2015, 16:56

Re: Выпадающее CSS меню

Сообщение mtedi » 17 апр 2015, 14:19

у меня есть такое меню. ток коментарии напишу и кину сюда код
Аватара пользователя
mtedi
 
Сообщения: 30
Зарегистрирован: 03 апр 2015, 22:12

Re: Выпадающее CSS меню

Сообщение WebCyber » 17 апр 2015, 16:06

Буду ждать) главное разъясните написание атрибутов перед {...}, а то что в фигурных скобках можно особо не разжевывать) :umnik:
WebCyber
 
Сообщения: 13
Зарегистрирован: 16 апр 2015, 16:56

Re: Выпадающее CSS меню

Сообщение mtedi » 17 апр 2015, 17:40

ЭТУ часть вставте в html код:
Код: Выделить всё
<ul class="dropdown">
   <ul class="nav">
  <ul class="dropdown-menu">      
   <li>
      <a href="#">Главная</a>
   </li>   
   <li>
      <a href="#">Закуски</a>
      <ul>
         <li><a href="#">Мясные</a></li>
         <li><a href="#">Рыбные</a></li>
         <li><a href="#">Овощные</a></li>
         <li><a href="#">Канапе</a></li>
      </ul>
   </li>   
   <li>
      <a href="#">Салаты</a>
      <ul>
         <li><a href="#">Мясные</a></li>
         <li><a href="#">Рыбные</a></li>
         <li><a href="#">Овощные</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Супы</a>
   </li>
   <li>
      <a href="#">Вторые блюда</a>
      <ul>
         <li><a href="#">Мясо</a></li>
         <li><a href="#">Птица</a></li>
         <li><a href="#">Рыба</a></li>
         <li><a href="#">Овощи</a></li>
         <li><a href="#">Морепродукты</a></li>
      </ul>
   </li>   
   <li>
      <a href="#">Выпечка</a>
      <ul>
         <li><a href="#">Сладкая</a></li>
         <li><a href="#">Несладкая</a></li>
         <li><a href="#">Блины</a></li>
         <li><a href="#">Оладьи</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Разное</a>
      <ul>
         <li><a href="#">Соусы</a></li>
         <li><a href="#">Сладости</a></li>
         <li><a href="#">Напитки</a></li>
         <li><a href="#">Десерты</a></li>
      </ul>
   </li>   
   <li>
      <a href="#">Консервирование</a>
   </li>
   <li>
      <a href="#">Детские</a>
   </li>
</ul>
   </ul>
      </ul>
      
Аватара пользователя
mtedi
 
Сообщения: 30
Зарегистрирован: 03 апр 2015, 22:12

Re: Выпадающее CSS меню

Сообщение mtedi » 17 апр 2015, 17:42

а вот эту в css файл:
Код: Выделить всё
.dropdown-menu{
   margin: 40px auto;
   text-align: center;
   opacity: 1;
}
   /* Стили для верхних пунктов меню */

   .dropdown-menu> li {
      position: relative;
      border: 1px solid #ccc;
      display: inline-block;
   }
      .dropdown-menuli a {
         display: inline-block;
         width: 142px;
         font: bold 14px Arial,sans-serif;
         color: #3d3d3d;
         height: 18px;
         padding: 4px 0;
         text-decoration: none;
      }

      /* Показываем выпадающее меню для элемента */

      .dropdown-menu> li:hover > ul {
         display: block;
      }

      /* Стили для выпадающего блока с пунктами меню (вложенность 1) */

      .dropdown-menu> li > ul {
         display: none;
         position: absolute;
         left: 0;
         width: 100%;
      }

         /* Универсальные стили для вложенного меню */

         .dropdown-menu li ul li {
            display: block;
            border: 1px solid #ccc;
            margin: 10px 0;
            width: 100%;
         }
            .dropdown-menu li ul li a {
               display: block;
               font-weight: normal;
            }

   /* Стили для наведение пунктов меню */

   .dropdown-menu li:hover {
      background: #e1e1e1;
   }


   
   
   
   
   /*горизонтальное меню*/
.dropdown {
   list-style: none; /* Отключение отображения маркеров. */
}
.dropdown li {
   float: center; /* Выстраивание элементов списка в один ряд. */
   margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 14px; /* Размер текста в ссылках. */
}
.dropdown li a {
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 10px 30px;  /* Внутри блочные отступы. */
   background:#ff7f50 ; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.dropdown li a:hover {
   background: #ffb79d; /* Цвет блока при наведении курсора. */
   color: #6b6b6b;  /* Цвет текста при наведении курсора. */
}
Аватара пользователя
mtedi
 
Сообщения: 30
Зарегистрирован: 03 апр 2015, 22:12

Re: Выпадающее CSS меню

Сообщение mtedi » 17 апр 2015, 17:45

Все работает :! Недавно сайт делал. Только пункты меню в html переименуйте на свои :)
Аватара пользователя
mtedi
 
Сообщения: 30
Зарегистрирован: 03 апр 2015, 22:12

Re: Выпадающее CSS меню

Сообщение WebCyber » 17 апр 2015, 21:37

Спасибо) А можете разъяснить некоторые моменты?) вот к примеру: почему здесь ".dropdown-menu li ul li{.....}" - тэг li написан дважды?)) я видел в нете подобные примеры выпадающего меню и вот конкретно этот момент мне просто ломает мозг начисто))) Объясните для чего li нужно написать дважды?) :crazy: :dash: И еще скобочка ">" для чего она пишется к примеру как тут: ".dropdown-menu> li:hover > ul {....}" :)?
WebCyber
 
Сообщения: 13
Зарегистрирован: 16 апр 2015, 16:56

Re: Выпадающее CSS меню

Сообщение mtedi » 17 апр 2015, 22:25

не будим засорять тему. напишите адрес электронной почты я там обьясню
Аватара пользователя
mtedi
 
Сообщения: 30
Зарегистрирован: 03 апр 2015, 22:12

Re: Выпадающее CSS меню

Сообщение WebCyber » 18 апр 2015, 08:56

А у Вас кажется заблокирована возможность отправки Вам ЛС. (P.S. подчищу эту тему от лишних сообщений чуть позже))
WebCyber
 
Сообщения: 13
Зарегистрирован: 16 апр 2015, 16:56

Re: Выпадающее CSS меню

Сообщение Encoder » 19 апр 2015, 15:12

Лучше тут написать, чтобы и другие видели ответ.

Это .dropdown-menu li ul li{.....} значит:
Выбрать li который находится внутри класса .dropdown-menu, затем выбрать li который находиться внутри ul и применить к нему стили.

Код: Выделить всё
<ul class="dropdown-menu">
  <li>menu 1</li>
  <li>
    <ul>
      <li>Вот это выбирается в css</li>
    </ul>
  </li>
</ul>


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

> - означает выбрать дочерний элемент.

Изучите еще CSS селекторы.
Аватара пользователя
Encoder
Модератор
 
Сообщения: 360
Зарегистрирован: 21 фев 2011, 11:15

След.

Вернуться в CSS

Кто сейчас на конференции

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

cron
Рейтинг@Mail.ru