Меню у вигляді стрічки на css

12

Зручне меню, яке можна використовувати на своєму сайті. Дуже добре буде виглядати як на світлому, так і на темному дизайні.

Виглядає меню у вигляді стрічки, при наведенні на пункти якого буде відбуватися плавна анімація, яка надасть меню ще більш привабливий вигляд.

Спершу створимо меню. Меню складається з контейнерів і посилань.

Контейнеру 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 створюємо ефект вигину.