2005 © iNetEssentials

Горизонтальное меню

Делаем горизонтальное меню средствами css.

С чего начать?

  1. Для начала строим наше будущее меню:

    <div id="menu">
    <ul>
    <li>Пункт 01</li>
    <li>Пункт 02</li>
    <li>Пункт 03</li>
    <li>Пункт 04</li>
    </ul>
    </div>

  2. Устанавливаем свойства для ul и li и блока menu

    #menu {float:left; width:100%; line-height:normal;}
    #menu ul {margin:0; padding:0; list-style:none;}
    #menu li {float:left; margin:0; padding:0;}

    Получаем:



    То есть каркас меню уже есть. Теперь лишь приукрашиваем его.

  3. Добавляем ссылки и новые стили:

    <div id="menu">
    <ul>
    <li><a href="#">Пункт 01</a></li>
    <li><a href="#">Пункт 02</a></li>
    <li><a href="#">Пункт 03</a></li>
    <li><a href="#">Пункт 04</a></li>
    </ul>
    </div>

    Новое стилевое правило:

    #menu a {padding:10px;display:block;}

    Наше меню преображается:





  4. Чтобы не было путаницы, я добавлю еще одно правило, вы же можете все сократить и поправить лишь #menu a:

    #menu a {padding:10px; display:block; border-left: 1px solid #000; border-top: 1px solid #000; border-right: 1px solid #000;}

    Получаем:





  5. Правим #menu li

    #menu li {float:left; margin:0; padding:0px 10px 0px 0px;}

    Получаем:





    По вкусу:

    #menu {float:left; width:100%; line-height:normal;border-bottom: 1px solid #000;}
    #menu a:hover {background: #fff;text-decoration:underline;}

    Получаем:





  6. Готово!!!