Нижнее навигационное меню на CSS3

В данном уроке сделаем нижнее навигационное меню с использованием CSS3. Для получения визуального эффекта выскальзывания будет задействован jQuery.

 

Разметка HTML

Меню строится на неупорядоченном списке:

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Нижнее навигационное меню на CSS3 | Материалы сайта RUSELLER.COM</title>

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

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="/js/script.js"></script>
    </head>
    <body>
        <div class="menuContent">
            <a class="slider"><img alt="" id="bot" src="/images/arrow_bottom.png"></a>
            <ul id="nav">
                <li><a href="#"><img src="/images/t1.png" /> Главная</a></li>
                <li>
                    <ul id="1">
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 1</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 2</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 3</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 4</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 5</a></li>
                    </ul>
                    <a href="#" class="sub" tabindex="1"><img src="/images/t2.png" />HTML/CSS</a>
                </li>
                <li>
                    <ul id="2">
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 6</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 7</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 8</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 9</a></li>
                        <li><a href="#"><img src="/images/empty.gif" />Ссылка 10</a></li>
                    </ul>
                    <a href="#" class="sub" tabindex="1"><img src="/images/t3.png" />jQuery/JS</a>
                </li>
                <li><a href="#"><img src="/images/t2.png" />PHP</a></li>
            </ul>
        </div>
    </body>
</html>

 

CSS

Стили, которые используются для построения меню:

.menuContent {
    background-color:#FFF;
    background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd)); 
    border:1px solid #C7C7C7;
    bottom: 70px;
    left: 300px;
    padding: 0 15px 5px;
    position: fixed;
    width:525px;

    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -moz-box-shadow: 3px -3px 5px #B8B8B8;
    -webkit-box-shadow: 3px -3px 5px #B8B8B8;
    box-shadow: 3px -3px 5px #B8B8B8;
}

.menuContent a.slider {
    background-color:#fff;
    background-image: -moz-linear-gradient(center top , #ddd, #FFF);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));
    border: 1px solid #C7C7C7;
    border-bottom:none;
    cursor: pointer;
    float:right;
    height: 8px;
    margin:-15px 30px 0 0;
    padding:3px 20px;
    width: 8px;
    z-index: 2001;

    -moz-border-radius-topright: 7px;
    -moz-border-radius-topleft: 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    -moz-box-shadow: 3px -2px 3px #B8B8B8;
    -webkit-box-shadow: 3px -2px 3px #B8B8B8;
    box-shadow: 3px -2px 3px #B8B8B8;
}

.menuContent a.slider img {
    padding-bottom: 3px;
}

#nav {
    list-style: none;
}

#nav li {
    display: inline-block;
    margin: 10px;
}

#nav li a {
    border: 1px solid #ccc;
    color:#858585;
    display: block;
    padding: 5px 10px;
    text-align:center;
    text-decoration:none;
    width: auto;

    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topleft: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
}

#nav li a:hover, #nav li a.active {
    background-color:#ddd;
}

#nav li ul {
    display:none;
}

#nav li ul li {
    margin: 5px 0;
    display: block;
}

#nav li a img {
    border-width: 0px;
    margin-right: 8px;
    vertical-align: middle;
}

#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}

 

JavaScript

Для формирования визуального эффекта выскальзывания используется jQuery:

$(function(){
    $('.slider').click(function () { 
        $('#nav').slideToggle(300);

        var img = $(this).find('img');
        if ($(img).attr('id') == 'bot') {
            $(img).attr('src', 'images/arrow_top.png');
            $(img).attr('id', 'top');
        } else {
            $(img).attr('src', 'images/arrow_bottom.png');
            $(img).attr('id', 'bot');
        }
    });

    $('.sub').click(function () { 
        var cur = $(this).prev();
        $('#nav li ul').each(function() {
            if ($(this)[0] != $(cur)[0])
                $(this).slideUp(300);
        });
        $(cur).slideToggle(300);
    });
});

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

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

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



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

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