Css3 навігація з переходами

У цьому уроці ми поговоримо про те, що створити меню за допомогою переходів використовуючи псевдоелементи : before і : after.

Приклад меню можна побачити тут:

Подивитися прімерСкачать

На жаль тільки Mozilla підтримує переходи псевдоелементів.

HTML частина

Структура меню звичаю - невпорядкований список, і в кожного елемента списку клас effects:

lt;ulgt;lt;li class="Effects"gt; lt;a href="#"gt; ГОЛОВНАlt;/agt; lt;/ligt;lt;li class="Effects"gt; lt;a href="#"gt; ПРО АВТОРАlt;/agt; lt;/ligt;lt;li class="Effects"gt; lt;a href="#"gt; ПОРТФОЛИОlt;/agt; lt;/ligt;lt;li class="Effects"gt; lt;a href="#"gt; БЛОГlt;/agt; lt;/ligt;lt;li class="Effects"gt; lt;a href="#"gt; КОНТАКТИlt;/agt; lt;/ligt;lt;/ulgt;

Відео: Введення в CSS. Урок 4 Оформлення навігації (списків) за допомогою CSS

CSS частина

Для початку зробимо з цього списку горизонтальне меню:

Відео: ВИВЧЕННЯ ОФОРМЛЕННЯ І НАВІГАЦІЇ В CSS

12345678910111213141516171819202122

ul{list-style:none-padding-top:50px-}li {position:relative-float: left-width:150px-text-align:center-padding-top:35px-padding-bottom:35px-color:#fff-margin-right:20px-border-radius:5px-background:# 161616-border-bottom:1px solid # 333-border-left:1px solid # 000-border-right:1px solid # 333-border-top:1px solid # 000-cursor:pointer-}

А зараз додамо ефекти:

1234567891011121314151617181920212223242526272829

.effects: after,.effects: before {-moz-transition:width 0.5s ease 0s-height: 0px-width: 0px-position: absolute-content: ``-display: block-opacity:0-box-shadow: 0px 0px 5px # 00c6ff-}.effects: after {background: -moz-linear-gradient(left, # 0ad, # 08b)-top: 84px-left: 75px-}.effects: before {background: -moz-linear-gradient(right, # 0ad, # 08b)-top: 84px-right:75px-}.effects: hover: after, .effects: hover: before{width: 72px-height: 1px-opacity:1-}