Меню в стиле MS Office

В данном уроке мы создаем кроссбраузерное многоуровневое меню в стиле 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;
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/WYH4N8WDyNI/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Меню в стиле MS Office | | 2012-06-19 11:58:00 | | Статьи Web-мастеру | | В данном уроке мы создаем кроссбраузерное многоуровневое меню в стиле MS Office. Используется только CSS3, а для иконок можно задействовать другие изображения.Разметка HTMLДля меню используется | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: