• Выпадающее меню на HTML и CSS

    by  • 27.11.2009 • CSS & HTML • Комментарии [5]

    Привет, сегодня я расскажу вас как сделать несложное, но от этого не менее красивое, раскрывающееся меню на «чистом» HTML и CSS, без усложнения кода скриптами и прочей, утяжеляющей страницу мутью. Применяется это меню может где угодно: и на личных страничках, и на корпоративных сайтах со сложной иерархической структурой. Для начала нам нужно создать HTML-файл, который будет отвечать за пункты меню. Поехали.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div id="mn">
    <ul>
       <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="#">CSS</a></li>
       <li><a href="#">PHP и mySQL</a></li>
       <li><a href="#">JavaScript и jQuery</a></li>
    </ul>
    </li>
    </ul>
    </div>

    Сейчас этот список выглядит вот так

    menu Выпадающее меню на HTML и CSS

    выпадающее меню


    Для того, чтобы изменить его внешний вид, напишем несколько строк CSS.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    #mn ul {
    list-style: none; /*убираем маркер у элементов списка*/
    width: 190px; /*задаем ширину вертикального меню*/
    }
    #mn ul li {
    position: relative; /*для того, чтобы выпадающий блок мы
    могли
    позиционировать абсолютно*/
    }
    #mn li ul {
    position: absolute;/*вот для этого*/
    left:100px;/*отступ слева появляющегося блока*/
    top:5px;
    display: none;/*сначала невидим*/
    }
    #mn ul li a {
    display: block;
    }
    /*и самое главное, при наведении показать*/
    #mn li:hover ul {
    display: block;
    }
    /*танцы с бубном для ие*/
    * html #mn ul li { float: left; height: 1%; }
    * html #mn ul li a { height: 1%; }

    Вот что у нас получилось: Простое выпадающее меню
    Остается самое интересное, декорирование этого самого меню, тут полет фантазии не знает предела, поэтому оставляю вам место для творчества. То, что в конечном итоге получилось у меня, можете лицезреть на картинке снизу. Удачи.

    lastversion Выпадающее меню на HTML и CSS

    выпадающее меню (последняя версия)

    Комментарии к "Выпадающее меню на HTML и CSS"

    1. klemk
      26.12.2009 at 09:32

      I want to quote your post in my blog. It can?
      And you et an account on Twitter?

      Ответить
    2. admin
      26.12.2009 at 13:25

      yeap, y can, but u must do this with link to my blog
      my twit acc: http://twitter.com/vredniy

      Ответить
    3. димбрас
      20.08.2010 at 15:46

      объясни пожалуйста движения в этом танце с бубном :)
      причем тут 1%?

      Ответить
    4. ant
      26.10.2011 at 10:51

      проше самому попробовать в ие, с хаком и без все станет ясно.

      Ответить

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *