Каталог файлов

Рейтинг:4.0
Категория: Скрипты для Ucoz
 


Красивое черное меню на css очень легкое в установке и настройке

Установка:
1) Где хотим видеть вставляем код (html):

Code
<ul class="vertical-list">  
  <li><a href='ВАША ССЫЛКА' class='button' onClick="return false;">Меню 1</a></li>  
  <li><a href='ВАША ССЫЛКА' class='button' onClick="return false;">Меню 2</a></li>  
  <li><a href='ВАША ССЫЛКА' class='button' onClick="return false;">Меню 3</a></li>  
  <li><a href='ВАША ССЫЛКА' class='button' onClick="return false;">Меню 4</a></li>  
  <li><a href='ВАША ССЫЛКА' class='button' onClick="return false;">Меню 5</a></li>  
  </ul>


2) В таблицу стилей css вставляем:

Code
/* Dark Button CSS */  
  .button {  
  outline: 0;  
  padding: 5px 12px;  
  display: block;  
  color: #9fa8b0;  
  font-weight: bold;  
  text-shadow: 1px 1px #1f272b;  
  border: 1px solid #1c252b;  
  border-radius: 3px;  
  -moz-border-radius: 3px;  
  -webkit-border-radius: 3px;  
  background: #232B30; /* old browsers */  
  background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */  
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */  
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */  
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */  
  }  
  .button:hover {  
  color: #fff;  
  background: #4C5A64; /* old browsers */  
  background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */  
  }  
  .button:active {  
  background-position: 0 top;  
  position: relative;  
  top: 1px;  
  color: #fff;  
  padding: 6px 12px 4px;  
  background: #20282D; /* old browsers */  
  background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */  
  -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */  
  -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */  
  box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */  
  }  
   

   

  /* Vertical List: */  
  .vertical-list {  
  list-style: none;  
  padding: 10px;  
  width: 200px;  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  background: #20282D; /* old browsers */  
  background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */  
  -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */  
  -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */  
  box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */  
  }  
  .vertical-list .button {  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  background: #515B62; /* old browsers */  
  background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */  
  }  
  .vertical-list .button:hover {  
  background: #5F6B72; /* old browsers */  
  background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54',GradientType=0 ); /* ie */  
  }  
  .vertical-list .button:active {  
  padding: 5px 12px;  
  top: 0;  
  background: #515B62; /* old browsers */  
  background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */ -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */  
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */  
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */  
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */  

  }  
  .vertical-list li { margin: 0 0 5px; }  
  .vertical-list li:last-child { margin: 0; }
 
 
 
Источник: http://stock-exchange.ucoz.com
 
 0 комментариев  624 просмотров  дата: 20.04.2024  автор: admin
 
 
Советую взглянуть:
  • Вид материалов для форума
  • Меню в стиле контакта CSS3
  • «Предупреждения 2.0»
  • Таймер
  •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

    Последние комментарии


    Опрос сайта

    Нравится ли вам обязательная регистрация, чтобы скачать файл?
    Всего ответов: 16

    Статистика

    Кол-во зареганных: 2908 (+0)
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сейчас на сайте:

    Нас посетили: