12 меню на css

Опубликовал 04.08.2010 в рубрике css | 1 комментарий

12 меню на css

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Сегодняшний урок будет посвящен менюхам, а если быть точнее, то его разным графическим модификациям с использованием CSSCascading Style Sheets. Изюминка таких меню заключается в том, что при наведении на них курсором, высвечивается дополнительный контекст. Что-то в роде детализации.

Наш урок будет разбит на последовательные шаги. Это упростит его и сделает доступным для восприятия. Итак, начнем. Первым делом пропишем код в <head> области как показано ниже.

Вставим стиль в шапку нашего сайта - <head>

<!-- Этот код прописывается в head области //-->

<link rel="stylesheet" href="css/menu#.css" type="text/css" media="screen"/>

Так как у нас все стили css пронумерованы (menu1.css, menu2.css … menu12.css), то вместо menu#.css следует прописать номер понравившегося вам стиля.

HTML-код вставляем в тело документа - <body>

<!--Этот код прописывается там, где вам нужно //-->
<div id="menu#">
        <ul>
                <li><a href="">
                                <span class="title">О сайте</span>
                                <span class="text">Кто же мы?</span>
                        </a>
                </li>
                <li><a href="">
                                <span class="title">Портфулио</span>
                                <span class="text">Мои работы</span>
                        </a>
                </li>
                <li><a href="">
                                <span class="title">Блог</span>
                                <span class="text">Наши разговоры</span>
                        </a>
                </li>
                <li><a href="">
                                <span class="title">Контакты</span>
                                <span class="text">Напишите мне</span>
                        </a>
                </li>
        </ul>
</div>

Данный html-код универсальный для всех меню, поэтому как и в css вам нужно указать только menu# – не забывайте про эту малозаметную часть кода.

Ниже приведен css код одного из 12 стилей меню.

Пример стиля menu1

#menu1 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    border:2px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:20px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu1 ul li a span.text{
    visibility:hidden;
    font-size:12px;
    text-align:right;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}

На этой веселой ноте я заканчиваю серию старых уроков и начинаю новые, которых еще не было на моем предыдущем сайте по кодингу http://hdweb.jimdo.com. Поэтому следите за обновлениями и … удачи всем!

Информация о загрузках

12 меню на css (47.6 KB, 36 скачиваний)
Файл залит 04.08.2010 в 11:11

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация