Главная » Файлы » Прочие скрипты » CSS
Плавающие, Фиксированное, Плавно выезжающие меню на CSS by slavick
24.06.14, 17:01:26



Посмотрите ДЕМО

Решил побаловаться свойством

transition-duration

И вот результат

В верхнюю часть сайта
Код
<div id="hawkMenu">  
  <a href="#" class="hawkMenuA">Главная</a>  
  <a href="#" class="hawkMenuA">Форум</a>  
  <a href="#" class="hawkMenuA">Блог</a>  
  <a href="#" class="hawkMenuA">Каталог</a>  
  </div>


в CSS
Код
#hawkMenu {  
  background: rgb(180,223,91); /* Old browsers */  
  background: -moz-linear-gradient(-45deg, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */  
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */  
  background: -webkit-linear-gradient(-45deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */  
  background: -o-linear-gradient(-45deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */  
  background: -ms-linear-gradient(-45deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */  
  background: linear-gradient(135deg, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  

  position:fixed;  
  width:210px;  
  left:-180px;  
  transition-duration:1.0s;  
  border-radius:15px;  
  }  
  #hawkMenu:hover {  
  left:-10px;  

  }  
  .hawkMenuA {  
  font-f  
  text-decoration:none;  
  color:#000;  
  border-radius:10px;  
  width:140px;  
  margin-left:25px;  
  padding:5px;  
  display:block;  
  background: rgb(191,210,85); /* Old browsers */  
  background: -moz-linear-gradient(-45deg, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */  
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */  
  background: -webkit-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */  
  background: -o-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */  
  background: -ms-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */  
  background: linear-gradient(135deg, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  
  margin-top:5px;  
  margin-bottom:5px;  

  }  

  .hawkMenuA:hover {  
  background: rgb(180,221,180); /* Old browsers */  
  background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */  
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */  
  background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */  
  background: -o-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */  
  background: -ms-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */  
  background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  

  }

Категория: CSS | Добавил: Apocalypse | Теги: CSS, Фиксированное, Плавно, by, на, slavick, плавающие, Меню, выезжающие
Просмотров: 627 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: