UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Самое главное для достижения успеха – это четко поставленная цель. Все остальное – не более, чем комментарии к ней. © Жизнь

»

Введите код полученный после подписки

  • 3

  • 0

Фиксированная навигация с помощью CSS

Автор - Жур Артур | Добавлено - 2014-02-27 | Просмотров - 3357 | Скачено - 14

1Фиксированный блок

Разметка навигации




Стили для навигации

 /* Основной блок */
#fixbar{
    border-bottom: 1px solid #E2E2E2;  /* Нижняя рамка */
    box-shadow: 0px 3px 6px rgba(0,0,0,0.1);  /* Нижняя тень для блока */
    top: 0; left: 0; right: 0;  /* Прижимаем блок */
    position: fixed;  /* Фиксируем блок */
    height: 60px;  /* высота блока */
    background-color: white;  /* Цвет фона */
}
 /* Второй блок с фиксированной шириной, нужен для того, чтобы выровнить навигацию по-центру */
#fixbar-center{
    width: 800px;
    margin: 0 auto;
    height: 60px;
    position: relative;    
}
 /* Настройка навигации */
#fixbar ul{
    right: 0;
    position: absolute;
    margin-top: 22px;
    display: inline-block;
}
#fixbar li{
    float: left;
    padding: 0px 25px;
    border-right: 1px solid #E8E8E8;
}
#fixbar a{
    font:bold 12px sans-serif;
    text-decoration: none;
    color: black;
}
#fixbar a:hover{
    text-decoration: underline;
}

Интересное

Комментарии