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

2 ноября 2014 г. Просмотров: 335 Инструкции
Красивое выпадающее меню можно создать не только в JavaScript, но и используя стандартные теги HTML. Такой способ создания выпадающего меню будет полезен тем, кто только начинает свои первые шаги в создании сайтов и хочет упростить работу по созданию меню на страницах.
Создать сайт самостоятельно с Wix.com

Инструкция

  • В коде 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;}

  • Теперь нужно дополнить пункты меню оформлением. Определите для них ширину и высоту, уберите линии подчеркивания, задайте четкую ширину каждой ссылки, а также укажите нужные цвета бэкграунда.
  • Для всех этих изменений добавьте в файл следующий код:
  • #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;}

  • В варианте HTML общий ненумерованный список меню выглядит следующим образом – на его основе и создается меню, о котором говорилось в статье.
    • Домой
    • Каталог
      • Вся продукция
        • По дате
        • Производители
        • Другое
    • ...

    Оцените статью!