Анимированная навигация без использования 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>