Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Не обычное меню на чистом CSS
Не обычное меню на чистом CSS
AndreyДата: Пятница, 13.12.2013, 10:52:02 | Сообщение # 1
Технарь
Offline
3

Не обычное меню с прикольным эффектом при наведении

Смотрим мой тест на Фиддле

Сначала пропишем стиль нашего меню. Заходим в CSS и там вставляем:
Код
.menu2 {
      font-family:arial;
      margin-top : 50px;
      width : 400px;
}
.menu2 ul {
      border-radius : 3px;
      margin:0;
      padding:0;
}
.menu2 ul:after, .menu2 ul:before {
      display : block;
      content :'';
}
.menu2 ul:after {
      clear : both;
}
.menu2 li {
      list-style-type : none;
      background : linear-gradient(rgba(220, 220, 255, 0.4) 85%, rgba(255, 255, 255, 0.5) 100%);
      float : left;
      cursor : pointer;
      padding : 3px 10px;
      border-top : 2px solid rgba(200, 200, 255, 0.5);
      border-bottom : 2px solid rgba(50, 50, 50, 0.4);
}
.menu2 li:first-child {
      border-radius : 5px 0 0 5px;
}
.menu2 li:last-child {
      border-radius : 0 5px 5px 0;
}
.menu2 li a {
      display : block;
      padding : 10px 13px;
      font-size : 13px;
      text-decoration : none;
      border-radius : 5px;
      position : relative;
      top : 0;
      color : #FFF;
      transition : all .4s;
}
.menu2 li:hover a {
      top : -20px;
      color : #4eacff;
      background-color: #fff;
      box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
      transition : all .4s;
}
.menu2 li a:after {
      display : block;
      content :'';
      position : absolute;
      top : 100%;
      left : 42%;
      border-style : solid;
      border-color : transparent;
      border-width : 5px 5px 0 5px;
      transition : all .4s;
}
.menu2 li:hover a:after {
      border-color : white transparent transparent transparent;
      transition : all .4s;
}
/*************************************/
   .menu2 {
}
.menu2 a {
      font-family : georgia;
      font-size : 14px;
      font-style : italic;
      text-transform : capitalize;
}
.menu2 li {
      border-right : 1px solid rgba(200, 200, 255, 0.5);
      border-left : 1px solid rgba(40, 40, 40, 0.2);
}
.menu2 .selected {
      top : -20px;
      color : #4eacff;
      background-color: #fff;
      box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
      transition : all .4s;
}
.menu2 .selected:after {
      border-color : white transparent transparent transparent;
      transition : all .4s;
}


И где хотите видеть само меню вставляем:
Код
<nav class="menu2">
      <ul>
          <li>
              <a href="#">Главная</a>
          </li>
          <li>
              <a href="#">О нас</a>
          </li>
          <li>
              <a class="selected" href="#">Контакты</a>
          </li>
          <li>
              <a href="#">Блог</a>
          </li>
      </ul>
</nav>


Вот и всё, меню установлено

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Не обычное меню на чистом CSS
Страница 1 из 11
Поиск: