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

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    январь 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>