Анимированная навигация без использования JavaScript

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Владимир Токмаков
(vlalek@design.ru)

# Анимированная навигация без использования JavaScript январь 2005

Используем псевдокласс `hover` и исправляем его обработку в IE.

### Как это выглядит в браузере

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61

    <style type="text/css">
        img { border: none; }
        ul.navigation { padding: 1em 0; margin: 0; width: 100%; position: relative; }
        ul.navigation li
        {
            list-style-type: none;
            padding: 0;
            margin: 0 1em;
            float: left;
        }
        ul.navigation li a
        {
            position: relative;
            display: block;
        }
        ul.navigation li a img { z-index: 2; }
        ul.navigation li a .left,
        ul.navigation li a .right
        {
            height: 91px;
            width: 43px;
            cursor: pointer;
            position: absolute;
            top: 0;
            /* чтобы картинки подгрузились,
            используем visibility: hidden,
            а не display: none */
            visibility: hidden;
            z-index: 1;
        }
        /* исправляем ошибку IE,
        чтобы сработал селектор вида a:hover на дочерний элемент */
        ul.navigation li a:hover { border-color: white; }
        ul.navigation li a:hover .left,
        ul.navigation li a:hover .right
        { visibility: visible; }
        ul.navigation li a .left { left: 0; }
        ul.navigation li a .right { right: 0; }
    </style>
    <ul class="navigation">
        <li>
            <a href="#a">
                <!-- обнуляем width и height,
                чтобы в версии без css их совсем не видеть -->
                <img src="frame-part-left.gif"
                    class="left" width="0" height="0" alt="" />
                <img src="frame-part-right.gif"
                    class="right" width="0" height="0" alt="" />
                <img src="./logo-ambar.gif" alt="" />
            </a>
        </li>
        <li>
            <a href="#b">
                <img src="frame-part-left.gif"
                    class="left" width="0" height="0" alt="" />
                <img src="frame-part-right.gif"
                    class="right" width="0" height="0" alt="" />
                <img src="./logo-benihana.gif" alt="" />
            </a>
        </li>
    </ul>

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |