В данном уроке мы создаем кроссбраузерное многоуровневое меню в стиле MS Office. Используется только CSS3, а для иконок можно задействовать другие изображения.

Разметка HTML
Для меню используется структура на основе неупорядоченного списка.

<div id="nav">
    <ul>
        <li><span tabindex="1">Файл</span>
            <ul>
                <li><a href="#"><img src="images/icon1.gif" alt="" />Новый</a></li>
                <li><a href="#"><img src="images/icon2.gif" alt="" />Открыть</a></li>
                <li><a href="#"><img src="images/icon3.gif" alt="" />Закрыть</a></li>
                <li><span tabindex="1"><img src="images/icon4.gif" alt="" />Сохранить</span>
                    <ul>
                        <li><span tabindex="1"><img src="images/icon4.gif" alt="" />Опция 1</span>
                            <ul>
                                <li><a href="#"><img src="images/icon1.gif" alt="" />Опция A</a></li>
                                <li><a href="#"><img src="images/icon2.gif" alt="" />Опция B</a></li>
                                <li><a href="#"><img src="images/icon3.gif" alt="" />Опция C</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><img src="images/icon2.gif" alt="" />Опция 2</a></li>
                        <li><a href="#"><img src="images/icon3.gif" alt="" />Опция 3</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="images/icon5.gif" alt="" />Сохранить как</a></li>
                <li><a href="#"><img src="images/icon1.gif" alt="" />Печать</a></li>
                <li><a href="#"><img src="images/icon2.gif" alt="" />Выход</a></li>
            </ul>
        </li>
        <li><span tabindex="1">Правка</span>
            <ul>
                <li><a href="#"><img src="images/icon1.gif" alt="" />Вырезать</a></li>
                <li><a href="#"><img src="images/icon2.gif" alt="" />Копировать</a></li>
                <li><a href="#"><img src="images/icon3.gif" alt="" />Вставить</a></li>
            </ul>
        </li>
        <li><span tabindex="1">Вид</span>
            <ul>
                <li><a href="#"><img src="images/icon1.gif" alt="" />Обычный</a></li>
                <li><a href="#"><img src="images/icon2.gif" alt="" />Для Web</a></li>
                <li><a href="#"><img src="images/icon3.gif" alt="" />Для печати</a></li>
            </ul>
        </li>
        <li><a href="#">Вставить</a></li>
        <li><a href="#">Формат</a></li>
        <li><a href="#">Инструменты</a></li>
        <li><a href="#">Таблица</a></li>
        <li><a href="#">Окно</a></li>
        <li><a href="http://www.ruseller.com/" target="_blank">Помощь</a></li>
        <img class="close" src="images/spacer.gif" alt="" />
    </ul>
</div>

CSS
Весь функционал меню реализуется правилами CSS

#nav {
    position:relative;
    z-index:2;
}
#nav ul {
    background-color:#B8D1F8;
    border:1px solid #000C80;
    height:24px;
    list-style:none outside none;
    margin:0;
    padding:1px;
}
#nav ul ul {
    background-color:#FFFFFF;
    border:1px solid #8A867A;
    display:none;
    height:auto;
    left:0;
    padding:0;
    position:absolute;
    top:25px;
    width:168px;
 
    background-image:-webkit-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
    background-image:-moz-linear-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
}
#nav ul ul ul {
    display:none;
    left:168px;
    position:absolute;
    top:-1px;
    width:168px;
}
#nav ul li {
    float:left;
    margin-right:1px;
    position:relative;
}
#nav ul li a {
    border:1px solid #B8D1F8;
    color:#000;
    cursor:default;
    display:block;
    font:11px Tahoma,Arial;
    padding:3px 3px 4px;
    text-decoration:none;
}
#nav ul li span {
    background:url("../images/u.gif") no-repeat scroll 90% center transparent;
    border:1px solid #B8D1F8;
    color:#000;
    cursor:default;
    display:block;
    font:11px Tahoma,Arial;
    padding:3px 14px 4px 3px;
    position:relative;
}
#nav ul ul li span {
    background:url("../images/s.gif") no-repeat scroll 97% center transparent;
}
#nav ul ul li {
    float:none;
    margin-right:0;
    padding:1px;
    text-indent:10px;
}
#nav ul ul li a,#nav ul ul li span {
    border:1px solid transparent;
    padding:3px 3px 5px 2px;
}
#nav ul ul li a img,#nav ul ul li span img {
    border-width:0;
    float:left;
    margin-right:5px;
    vertical-align:middle;
}
#nav ul li:hover > a,#nav ul li:hover > span {
    background-color:#FFF2C8;
    border:1px solid #000C80;
    color:#000;
}
#nav img.close {
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:-1;
}
#nav ul li span:focus + ul,#nav ul li ul:hover,#nav ul:hover + img.close {
    display:block;
}

Добавлено: 27 Апреля 2018 06:23:54 Добавил: Андрей Ковальчук Нравится 0

Добавить