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

ZHUR ARTUR.ru

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

Первый шаг к величию - это борьба со своей ленью. © Жизнь

»

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

  • 3

  • 0

Исследование интернет-магазина Lamoda.ru. Нижняя фиксированная навигация

Автор - Жур Артур | Добавлено - 2014-01-05 | Просмотров - 20363 | Скачено - 11

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

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

Первый и основной блок div


Настроим для него стили


#lamoda-fix-bottom{
    background-color: #EEEEEE;
    height: 30px;
    width: 100%;
    bottom: 0;
    position: fixed;
    border-top: 1px solid #E5E5E5;
}

  • background-color - Цвет основного блока
  • height: 30px; - Высота блока.
  • width: 100%; - Ширина блока, 100% - это значит растянуть блок на всё ширину экрана.
  • bottom: 0; - Прижать блок к нижней части экрана.
  • position: fixed; - Фиксация блока.
  • border-top: 1px solid #E5E5E5 - Верхняя линия.

Далее идёт ещё один блог, который даёт верхнюю белую линию.


Настроим для него стили


#lamoda-fix-block{
   border-top: 1px solid white; 
}

Дальше идёт логотип


Лого

Настроим для него стили


#logo-bottom{
    position: absolute;
    margin-top: 5px;
}

  • position: absolute; - Абсолютное позиционирование, это нужно для того, чтобы логотип не от чего не зависил и его можно было легко перемещать.

Третий блок и кнопка с меню

Блок lamoda-fix-center нужен для того, чтобы выровнить меню по центру.




Стили для всей навигации.


#lamoda-fix-center{
    width: 981px;
    margin: 0 auto;
}
#bonus-link{
 position: absolute; 
 display: inline-block;
 padding-top: 8px;
 padding-bottom: 11px;
 padding-left: 11px;
 padding-right: 11px;
 background: url(grd-lamoda.png) repeat-x; 
 margin-left: 0px;
 font:bold 13px sans-serif;
 color: white;
 text-decoration: none;
 margin-top: -2px;
}
#lamoda-fix-menu{
    position: absolute;
    margin-left: 355px;
}
#lamoda-fix-menu li{
    float: left;
    margin-left: 15px;
    margin-top: 7px;
}
#lamoda-fix-menu li > a{
    font:bold 13px sans-serif;
    color: #6A82A9;
    text-decoration: none;
}
#lamoda-fix-menu li > a:hover{
    color: #FF8500;
}
#lamoda-fix-menu li > a.active{
    color: #FF8500;
}

Интересное

Комментарии