Як зробити меню, що випадає

Як зробити меню, що випадає

Красиве меню, що випадає можна створити не тільки в JavaScript, але і використовуючи стандартні теги HTML. Такий спосіб створення випадаючого меню буде корисний тим, хто тільки починає свої перші кроки в створенні сайтів і хоче спростити роботу зі створення меню на сторінках.

Інструкція

  1. У коді HTML таке меню є ненумерованих списків з вкладеними списками всередині. Для початку створіть файл style.css і скопіюйте туди наступний CSS-код, необхідний для оформлення та форматування меню:

    # Nav, # nav ul {

      list-style: none;

      margin: 0;

      padding: 0;

      border: 1px solid # 000;

      background: # 515151;

      float: left;

      width: 100%;

    }

    # Nav li {

      float: left;

      position: relative;

      background-color: # 003366;

      back ground: none;

    }

    # Nav li ul {

      display: none;

      position: absolute;

      background-color: # 003366;

      padding: 8px 0;

      width: 138px;

    }

  2. Тепер потрібно доповнити пункти меню оформленням. Визначте для них ширину і висоту, приберіть лінії підкреслення, задайте чітку ширину кожного посилання, а також вкажіть потрібні кольори бекграунду.
  3. Для всіх цих змін додайте в файл наступний код:

    # Nav a {

      color: # fff;

      text-decoration: none;

      display: block;

      width: 120px;

      padding: 4px 10px;

      background-color: # 003366 repeat-y right;

    }

    # Nav a: hover {

      color: # 000;

       background-color: # 0033FF;

    }

    # Nav li: hover {

      background-color: # 333333;

    } Потім додайте наступний шматок коду для остаточного доопрацювання меню:

    # Nav li: hover li ul {

      display: none;

      width: 138px;

      top:-9px;

      left: 133px;

    }

    # Nav li: hover li: hover ul {

      display: block;

    }

  4. У варіанті HTML загальний ненумерований список меню виглядає наступним чином — на його основі і створюється меню, про яке говорилося в статті.

    <ul>

    <li> <a href=»#null»> Додому </ a> </ li>

    <li> <a href=»#null»> Каталог </ a>

    <ul>

    <li> <a href=»#null»> Вся продукція </ a>

    <ul>

    <li> <a href=»#null»> За датою </ a> </ li>

    <li> <a href=»#null»> Виробники </ a> </ li>

    <li> <a href=»#null»> Інше </ a> </ li>

    </ Ul>

    </ Li>

    </ Ul>

    </ Li>

      …

    </ Ul>