Зручне меню, яке можна використовувати на своєму сайті. Дуже добре буде виглядати як на світлому, так і на темному дизайні.
Виглядає меню у вигляді стрічки, при наведенні на пункти якого буде відбуватися плавна анімація, яка надасть меню ще більш привабливий вигляд.
Спершу створимо меню. Меню складається з контейнерів і посилань.
Контейнеру div з класом menu задаємо стилі.
.menu{ position: fixed; top:10px; left:200px;}
Тепер нам потрібно щоб наше меню було схоже на стрічку. Для цього використовуємо псевдоелементи : before і : after
- псевдоелемент : before застосовується для відображення бажаного вмісту до вмісту елемента, до якого він додається. Працює спільно з властивістю content .
- псевдоелемент : after використовується для виведення бажаного тексту після вмісту елемента, до якого він додається. Псевдоелемент: after працює спільно з властивістю content .
.menu1:after, .menu1:before { margin-top:0.5em; content: “”; float:left; border:1.5em solid #eeeeee;}.menu1:after { border-right-color:transparent;}.menu1: before { border-left-color: transparent;}
Підкоригуємо наші посилання.
.menu1 a { color:#333333; text-decoration:none; float:left; height:3.5em; overflow:hidden;}.menu1 span { background:#eeeeee; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; -moz-transition: background-color 0.2s, margin-top 0.2s; -ms-transition: background-color 0.2s, margin-top 0.2s; -o-transition: background-color 0.2 s, margin-top 0.2 s; transition: background-color 0.2 s, margin-top 0.2 s;}
Нам потрібно що б при наведення на посилання вона піднімалася. У цьому нам допоможе псевдоклас : hover .
- :hover-визначає стиль елемента при наведенні на нього курсору миші, але при цьому елемент ще не активований, іншими словами кнопка миші не натиснута.
.div2 a: hover span { background:#ff7f50; margin-top :0;}
Використовуючи вже знайомі нам псевдоелементи : before і : after створюємо ефект вигину.
