5.0 0.5 5 50

Как сделать выпадающее меню?

Владимир Кулинич
Владимир Кулинич
4 апреля 2013
3790
Оцените:
Как сделать выпадающее меню?

Многие выдели на разных сайтах выпадающие меню. Такое меню делает Ваш сайт как более функциональным, так и более интуитивно понятным посетившему его пользователю сети. О том, как сделать выпадающее меню, расскажет наша статья.

Joomla

  • Необходимо зайти в Панель управления сайтом, затем в «Меню», потом в «Расширения», далее в «Менеджер модулей»;
  • Теперь нужно найти модуль, которыq отвечает за Меню сайта. Он может быть и в «Менеджере модулей» (плагин, что отвечает за показ меню на данном сайте);
  • Далее нужно нажать на модуле и выполнить такие настройки:
    • «Включен» - «Да»;
    • «Всегда показывать вложенные подпункты» - «Да»;
    • «Активировать родителя» - «Да»;
    • «Раскрывать меню» - «Да»;
  • Сохранить настройку;
  • Затем необходимо перейти в «Все меню», потом «Меню» и в списке выбрать то меню, в котором будет создан пункт с выпадающими подпунктами;
  • Нажать кнопку «Создать»;
  • Теперь нужно сделать пункты меню и уже потом подпункты, для чего необходимо выбрать материалы, то есть шаблон категории (например, внешняя ссылка);
  • Далее нужно вписать название этого меню и выставить настройки, главная из которых - «Родительский элемент» - пункт меню, из которого будут выпадать разные подпункты, вот почему нужно выбрать пункт главного меню именно родительским элементом.
  • Затем нужно указать категорию на которую будет ссылка Вашего подпункта и сохранить настройку

Вот как сделать выпадающее меню Joomla. Если Вы хотите сделать несколько таких пунктов, то нужно проделать вышеуказанные шаги несколько раз.

HTML и CSS

  • Сначала необходимо составить меню и определить его структуру. Потом нужно расположить элементы в комфортном для пользователя порядке и подумать над грамотными и понятными названиями будущих разделов. Теперь осталось определить те пункты, что будут выпадающими, и необходимые подпункты, что будут в этих пунктах;
  • Далее нужно оформить выбранную структуру при помощи html-тэгов. Это выглядит приблизительно так:
    • <ul>
      <li><a href="#">Ваша ссылка №1</a></li>
    • <li><a href="#">Ваша ссылка №2</a>
      • <ul>
        <li><a href="#">Ваш пункт №2-1</a></li>
      • <li><a href="#">Ваш пункт №2-2</a></li>
      • <li><a href="#">Ваш пункт №2-3</a></li>
        </ul></li>
    • <li><a href="#">Ваша ссылка №3</a>
      • <ul>
        <li><a href="#">Ваш пункт №3-1</a></li>
      • <li><a href="#">Ваш пункт №3-2</a></li>
      • <li><a href="#">Ваш пункт №3-3</a></li>
      • <li><a href="#">Ваш пункт №3-4</a></li>
        </ul></li>
    • </ul>
  • Затем необходимо поместить все Ваше меню в блок, обозначенный и задать идентификатор (). Это позволит Вам присваивать свои особенности исключительно этому блоку, не трогая остальные блоки. В идентификаторе нужно указать имя, свойства которого Вы опишите в дальнейших шагах;
  • Теперь нужно создать списки, в которых - это сам список, • - это каждая его строка, и добавить для будущих ссылок, что будут созданы выпадающим меню, список с подходящими подпунктами;
  • Далее необходимо превратить названия этих пунктов в ссылки, заключая их в , и присвоить его параметру «href-адрес» нужной страницы, указанной ссылкой. Вот как html сделать выпадающее меню;
  • Теперь необходимо задать свойства нужного списка при помощи css. Для этого нужно внести их в css-файл так:
    • #vmenu ul {padding:0px; margin:0px; width:250px; list-style:none;},
  • где «padding» - это отступ внутри (должен быть «0»), «margin» - это отступ снаружи (должен быть «0»), «list-style» - это стиль списка (можно поставить значение «none», чтобы убрать точки), width - это ширина списка;
  • Затем нужно добавить свойства элемента: #vmenu ul li {position:relative;} - это параметр нужного позиционирования (расположения элементов - «position»), «relative» - это значение, необходимое для определения расположения выпадающего меню относительно стартового меню. Это меню будет вертикальное;
  • Далее необходимо указать свойства списка, который расположен в элементе иного списка:
    • #vmenu li ul {position:absolute; display:none; top:0; left:250px; },
  • где «position: absolute» - это абсолютное размещение подменю относительно меню, «left» и «top» - это расположение при помощи отступа слева и сверху, «display:none - параметр отображения (изначально список не будет виден);
  • Теперь необходимо внести параметры для Ваших ссылок:
    • #vmenu ul li a {padding:5px; display:block; color:#606060; text-decoration:none; background:#d8d8d8;},
  • где «display:block» - это параметр отображения, который делает элемент в виде блока, «padding» - это отступ, «color» - это цвет ссылки (текст), «background» - это цвет ссылки (фон), «text-decoration» - это стиль Вашей ссылки (в данном случае убрано подчеркивание);
  • Далее необходимо задать действие в случае наведения курсора:
    • #vmenu li:hover ul {display: block;},
  • где - «li» - это строка списка, «ul» - это список, который будет видимым. Вот как как сделать выпадающее меню css;
  • Также можно добавить такие параметры, как параметр изображения или цвета для фона, шрифт самих ссылок, горизонтальные черты и много других свойств для вида меню.

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

Подписывайтесь на наши группы в социальных сетях - смешные статьи, картинки и факты!