Site icon Vavik96

Фиксированное меню: снизу и сверху экрана

admin

Фиксированное меню меню может пригодится практически везде. Ведь оно не занимает много места, заметно, и пользователь может перейти на любую страницу вашего сайта без особых трудностей поиска блока меню.

 В данном примере разберем два вида фиксированных меню: первый вариант меню прижат к верху экрана, второй к низу экрана. Создается такое меню очень просто, с использованием позиционирования, а уголки создаются при помощи псевдоклассов. Но обо всем по порядку. Для начала создадим фиксированное меню, прижатое к верху экрана.

HTML

<div class="topMenu">
<a href="#">BlueCode.ru</a><a href="#">BlueCode.ru</a><a href="#">BlueCode.ru</a><a href="#">BlueCode.ru</a><a href="#">BlueCode.ru</a><a href="#top">Наверх!</a>
</div>

CSS

Как обычно, начнем с оформления главного класса topMenu: прозрачность, transition, фон, внутренние отступы:

.topMenu {
    background-color: #008DFF; /*  */
    padding:10px;    /* Внутренние оступы */
    color:#fff;    /* Цвет текста */
    font-weight:bold;    /* Толщина текста */
    position:fixed;    /* Фиксированное позиционирование */
    top:0;    /* Сверху 0, прижимаем к верху экрана */
    left:50px; right:50px;    /* Слева и справа по 50px отступов */
    text-align:center; /* Расположение текста по центру */
    
    /* Прозрачность старт */
    -moz-opacity: 0.50;
    opacity: 0.50;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
    /* Прозрачность конец */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    /* transition конец */
}

Теперь, при наведении сделаем так, чтобы прозрачность исчезла:

.topMenu:hover {
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}

Ссылки: внутренние отступы, цвет текста, фон при наведении:

.topMenu a{
    padding:10px; /* Внутренние оступы */
    color:#fff;    /* Цвет ссылки */
    text-decoration:none;    /* Отсутствие нижней линии */
}

.topMenu a:hover{
    background-color:#007CE1;    /* Цвет фона */
}

Теперь самое интересное. Делаем уголки. Для этого мы будем использовать псевдоклассы :after, для первого уголка, и псевдокласс :before, который идет последним.
Для создания уголков используют свойства border-width, border-style, border-color. Так же, чтобы получить уголок, нужно сначала запозиционировать его и расположить в том месте, где хотим увидеть уголок.

Для начала создадим первый уголок:

.topMenu:after {
    border-width:0 30px 42px 0; /* Толщина границы. Сверху 0, справа 20px, снизу 20px, слева 0. */
    border-style:solid; /* Тип обводки */
    border-color:#fff #008DFF; /* Цвет обводки. Сверху и снизу #fff, слева и справа #008DFF */
    content:"";
    position:absolute;    /* Абсолютное позиционирование */
    top:0;    /* Отступы сверху */
    left:0;
}

Ну и соответственно второй, который идет последним:

.topMenu:before {
    border-width:0 0 42px 30px; /* Толщина границы. Сверху 0, справа 20px, снизу 20px, слева 0. */
    border-style:solid; /* Тип обводки */
    border-color:#fff #008DFF; /* Цвет обводки. Сверху и снизу #fff, слева и справа #008DFF */
    content:"";
    position:absolute;    /* Абсолютное позиционирование */
    top:0;    /* Отступы сверху */
    right:0; /* Справа 0 */
}

Вот и все. Наше первое фиксированное к верху меню готово. Со вторым вариантом, фиксированным к низу меню, все тоже самое, лишь изменены свойства у псевдоклассов :after и :before. Ну или сам, полный код второго варианта меню, фиксированного к низу:

.bottomMenu {
    background-color: #D8D8D8; /* Фон */
    padding:10px;    /* Внутренние оступы */
    color:#676767;    /* Цвет текста */
    font-weight:bold;    /* Толщина текста */
    position:fixed;    /* Фиксированное позиционирование */
    bottom:0;    /* Снизу 0, прижимаем к низу экрана */
    left:50px; right:50px;    /* Слева и справа по 50px отступов */
    text-align:center; /* Расположение текста по центру */

    /* Прозрачность старт */
    -moz-opacity: 0.50;
    opacity: 0.50;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
    /* Прозрачность конец */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    /* transition конец */
}

.bottomMenu:hover {
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}

.bottomMenu a{
    padding:10px; /* Внутренние оступы */
    color:#676767;    /* Цвет ссылки */
    text-decoration:none;    /* Отсутствие нижней линии */
}

.bottomMenu a:hover{
    background-color:#C7C7C7; /* Фон */
}

.bottomMenu:before {
    border-width:0 30px 42px 0; /* Толщина границы. Сверху 0, справа 20px, снизу 20px, слева 0. */
    border-style:solid; /* Тип обводки */
    border-color:#D8D8D8 #fff; /* Цвет обводки. Сверху и снизу #D8D8D8, слева и справа #fff */
    content:"";
    position:absolute;    /* Абсолютное позиционирование */
    top:0;    /* Отступы сверху */
    right:0;  /* Отступы справа */
}

.bottomMenu:after {
    border-width:42px 30px 0 0; /* Толщина границы. Сверху 0, справа 20px, снизу 20px, слева 0. */
    border-style:solid; /* Тип обводки */
    border-color:#fff #D8D8D8; /* Цвет обводки. Сверху и снизу #fff, слева и справа #D8D8D8 */
    content:"";
    position:absolute;    /* Абсолютное позиционирование */
    top:0;    /* Отступы сверху */
    left:0; /* Отступы слева */
}

Пример
Источник

Exit mobile version