Меню с выезжающими кнопками с левого края

В верхнюю часть сайта

<div id="hawkMenu">
<a href="http://scripts-for-ucoz.ru/" class="

hawkMenuA" >Скрипты для uCoz</a> 

<a href="http://ucozzz.ru/" class="

hawkMenuA" >Всё для uCoz</a> 

<a href="http://fastnews.lv/" class="

hawkMenuA" >Новости</a> 

<a href="http://bestnews.lv/" class="

hawkMenuA" >Интересное</a> 

<a href="http://cobra.lv/" class="

hawkMenuA" >Counter-Strike GO</a> 

<a href="http://parventa.lv/" class="

hawkMenuA" >Вентспилс</a> 

<a href="http://funny-animals.lv/" class="

hawkMenuA" >Животные</a>

<a href="http://csl.lv/" class="

hawkMenuA" >Counter-Strike 1.6</a> 

<a href="http://rigaportal.lv/" 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 */ 



}

Просмотров: 2440 | Добавил: dev | Комментарии: 0