Меню сайта
АКЦИЯ!!!
Категории раздела
Меню [34]
Меню для сайтов на Ucoz
Кнопки [15]
Кнопки для uCoz
Блоки и формы [22]
Блоки и формы для uCoz.
Вид материалов [41]
Вид материалов для uCoz
Мини-Профили [7]
Мини-Профили для uCoz
Переключатели [29]
Переключатели страниц для uCoz
Информеры [35]
Информеры для uCoz
Плейеры для сайта [23]
Аудио, видео, радио плейеры
Слайдеры [21]
Слайдеры и карусели картинок.
Вид опросов [8]
Вид опросов для uCoz
Часы и календари [8]
Часы и календари для uCoz.
Статистика сайта [20]
Статистика сайта для uCoz
Скрипты [25]
Скрипты для uCoz
Виджеты [2]
Виджеты для uCoz
Мини-чаты [6]
Мини-чаты для uCoz
Ajax для uCoz [8]
Ajax для uCoz
Шаблоны сайтов [0]
Шаблоны и шапки для uCoz.
Анимация [3]
Анимация и анимашки для сайтов на Ucoz.
Игры [6]
Игры для uCoz.
Прочее для uCoz [18]
Прочее для uCoz.
Сервис

Translate my page
Выбрать язык / Select language:



   
веб студия Одесса создание интернет магазинов создание каталога товаров Создание сайтов раскрутка сайтов портфолио веб студии продвижение сайтов готовые дизайны сайтов наши заказчики Дизайн макеты для создания сайтов Flash игры для сайтов Мини-Чат для сайтов uCoz Вид опроса для сайта Часы и календари для сайтов дизайн сайтов-визиток онлайн радио для сайта кнопки для сайтов статистика для сайта юкоз мини-профили для сайта Полезное для сайтов переключатели страниц для сайтов ajax окна для сайтов скрипты для сайта информационные блоки для сайтов информеры для сайта Формы для Ucoz слайдер для сайта информеры для юкоз меню для сайта вид материалов для сайтов вид материалов uCoz Готовые сайты Новые Бизнес дизайн макеты Новые дизайн макеты Медицина дизайн макеты интернет магазинов Новые дизайн макеты Рестораны Новые дизайн макеты Музыка и клубы Новые дизайн макеты Отели дизайн макеты производство и услуги дизайн макеты интерьер дизайн макеты строительство дизайн макеты сельское хозяйство Новый дизайн макет Транспорт Новый дизайн макет Образование Новый дизайн макет Мода дизайн макеты компьютеры дизайн макеты мобилки Логотипы портфолио
Бесплатное отправление смс сообщений!
Поиск
Календарь
«  Сентябрь 2014  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930
Архив записей
Наш опрос
Есть ли у Вас сайт?
Всего ответов: 27
Друзья сайта

МЕТА - Украина. Рейтинг сайтов Рейтинг@Mail.ru
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама

Главная » 2014 » Сентябрь » 13 » Набор разноцветных меню для сайтов
07:36
Набор разноцветных меню для сайтов

Набор разноцветных меню для сайтов

Скопируйте содержимое поля CSS в таблицу стилей Вашего сайта,если у Вас сайт в системе uCoz,измените значение margin-top,свойство находится в верхней части кода CSS на 30px,для места под админ панель.Установите пути для пунктов меню и установите код там где хотите видеть меню.Если у Вас возникли вопросы по настройке кода меню - опишите их в комментариях к материалу.

 

 

 


Javascript (для всех цветов меню):

 

 

Код
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript">var search_input= $('домен .search input[type=text]');var search_input_size = 120; var search_large_size = 180; var Ratio = 3; var термоусаживаемые = "";$(document).ready(function(){search_input.click(function(){сжать();}).focus(function(){сжать();});search_input.blur(function(){ if(термоусаживаемые=="YES")normal();});$('.button').hover(function(){if(термоусаживаемые=="YES")normal();}); });функция shrink(){if(search_input_size < search_large_size ){$('.button').each(function(){$(this).animate({'padding-left': обивка+'px','padding-right': обивка+'px'},'fast');});search_input.animate({'width': search_large_size+'px'},'fast'); термоусаживаемые="YES";}return false;}function нормальный(){search_input.animate({'width':search_input_size+'px'},'fast'); $('.button').animate({'padding-left':'10px','padding-right':'10px'},'fast');термоусаживаемые="";search_input.blur();return false;}</script>

 


Для КРАСНОГО меню вставляем в любое место HTML-страницы:

 

Код
<ul id="menu_wrap" class="Red"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

 


Для КРАСНОГО меню вставляем в CSS

 

Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Red,.Red .button a{color:#faddde;background: #ed1c24;border-right:solid 1px #aa1317;background: -moz-linear-gradient(top, #ed1c24 0%, #aa1317 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed1c24), color-stop(100%,#aa1317));background: -webkit-linear-gradient(top, #ed1c24 0%,#aa1317 100%);background: -o-linear-gradient(top, #ed1c24 0%,#aa1317 100%);background: -ms-linear-gradient(top, #ed1c24 0%,#aa1317 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#aa1317',GradientType=0 );background: linear-gradient(top, #ed1c24 0%,#aa1317 100%);}.Red .button a:hover,.Red .button a:focus{background: #c9151b;background: -moz-linear-gradient(top, #c9151b 0%, #a11115 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9151b), color-stop(100%,#a11115));background: -webkit-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -o-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -ms-linear-gradient(top, #c9151b 0%,#a11115 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9151b', endColorstr='#a11115',GradientType=0 );background: linear-gradient(top, #c9151b 0%,#a11115 100%);}.Red .button a:active{color:#de898c;background: #aa1317;background: -moz-linear-gradient(top, #aa1317 0%, #ed1c24 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aa1317), color-stop(100%,#ed1c24));background: -webkit-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -o-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -ms-linear-gradient(top, #aa1317 0%,#ed1c24 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa1317', endColorstr='#ed1c24',GradientType=0 );background: linear-gradient(top, #aa1317 0%,#ed1c24 100%);}домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: 1px inset 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45 градусов);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}

 

 

 


Для СЕРОГО меню вставляем в любое место HTML-страницы:

 

 

Код
<ul id="menu_wrap" class="Gray"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

 


Для СЕРОГО меню вставляем в CSS

 

Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Gray,.Gray .button a{color:#e9e9e9;background: #888888;border-right:solid 1px #575757;background: -moz-linear-gradient(top, #888888 0%, #575757 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888), color-stop(100%,#575757));background: -webkit-linear-gradient(top, #888888 0%,#575757 100%);background: -o-linear-gradient(top, #888888 0%,#575757 100%);background: -ms-linear-gradient(top, #888888 0%,#575757 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#575757',GradientType=0 );background: linear-gradient(top, #888888 0%,#575757 100%);}.Gray .button a:hover,.Gray .button a:focus{background: #757575;background: -moz-linear-gradient(top, #757575 0%, #4b4b4b 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757575), color-stop(100%,#4b4b4b));background: -webkit-linear-gradient(top, #757575 0%,#4b4b4b 100%);background: -o-linear-gradient(top, #757575 0%,#4b4b4b 100%);background: -ms-linear-gradient(top, #757575 0%,#4b4b4b 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#4b4b4b',GradientType=0 );background: linear-gradient(top, #757575 0%,#4b4b4b 100%);}.Gray .button a:active{color:#afafaf;background: #575757;background: -moz-linear-gradient(top, #575757 0%, #888888 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#575757), color-stop(100%,#888888));background: -webkit-linear-gradient(top, #575757 0%,#888888 100%);background: -o-linear-gradient(top, #575757 0%,#888888 100%);background: -ms-linear-gradient(top, #575757 0%,#888888 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575757', endColorstr='#888888',GradientType=0 );background: linear-gradient(top, #575757 0%,#888888 100%);}Домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}

 

 

 


Для СИНЕГО меню вставляем в любое место HTML-страницы:

 

 

Код
<ul id="menu_wrap" class="Blue"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

 


Для СИНЕГО меню вставляем в CSS

 

Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Blue,.Blue .button a{color:#d9eef7;background: #00adee;border-right:solid 1px #0078a5;background: -moz-linear-gradient(top, #00adee 0%, #0078a5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00adee), color-stop(100%,#0078a5));background: -webkit-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -o-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -ms-linear-gradient(top, #00adee 0%,#0078a5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adee', endColorstr='#0078a5',GradientType=0 );background: linear-gradient(top, #00adee 0%,#0078a5 100%);}.Blue .button a:hover,.Blue .button a:focus{background: #0095cc;background: -moz-linear-gradient(top, #0095cc 0%, #00678e 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0095cc), color-stop(100%,#00678e));background: -webkit-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -o-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -ms-linear-gradient(top, #0095cc 0%,#00678e 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0095cc', endColorstr='#00678e',GradientType=0 );background: linear-gradient(top, #0095cc 0%,#00678e 100%);}.Blue .button a:active{background: #0078a5;background: -moz-linear-gradient(top, #0078a5 0%, #00adee 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0078a5), color-stop(100%,#00adee));background: -webkit-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -o-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -ms-linear-gradient(top, #0078a5 0%,#00adee 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0078a5', endColorstr='#00adee',GradientType=0 );background: linear-gradient(top, #0078a5 0%,#00adee 100%);}домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45 градусов);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}

 

 

 


Для ЗЕЛЕНОГО меню вставляем в любое место HTML-страницы:

 

 

Код
<ul id="menu_wrap" class="Green"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

 


Для ЗЕЛЕНОГО меню вставляем в CSS

 

Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}Giorgio Armani,Giorgio Armani .button a{color:#e8f0de;background: #7db72f;border-right:solid 1px #4e7d0e;background: -moz-linear-gradient(top, #7db72f 0%, #4e7d0e 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db72f), color-stop(100%,#4e7d0e));background: -webkit-linear-gradient(top, #7db72f 0%,#4e7d0e 100%);background: -o-linear-gradient(top, #7db72f 0%,#4e7d0e 100%);background: -ms-linear-gradient(top, #7db72f 0%,#4e7d0e 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db72f', endColorstr='#4e7d0e',GradientType=0 );background: linear-gradient(top, #7db72f 0%,#4e7d0e 100%);}.Green .button a:hover,.Green .button a:focus{background: #6b9d28;background: -moz-linear-gradient(top, #6b9d28 0%, #436b0c 64%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b9d28), color-stop(64%,#436b0c));background: -webkit-linear-gradient(top, #6b9d28 0%,#436b0c 64%);background: -o-linear-gradient(top, #6b9d28 0%,#436b0c 64%);background: -ms-linear-gradient(top, #6b9d28 0%,#436b0c 64%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b9d28', endColorstr='#436b0c',GradientType=0 );background: linear-gradient(top, #6b9d28 0%,#64 436b0c%);}.Green .button a:active{color:#a9c08c;background: #4e7d0e;background: -moz-linear-gradient(top, #4e7d0e 0%, #7db72f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e7d0e), color-stop(100%,#7db72f));background: -webkit-linear-gradient(top, #4e7d0e 0%,#7db72f 100%);background: -o-linear-gradient(top, #4e7d0e 0%,#7db72f 100%);background: -ms-linear-gradient(top, #4e7d0e 0%,#7db72f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7d0e', endColorstr='#7db72f',GradientType=0 );background: linear-gradient(top, #4e7d0e 0%,#7db72f 100%);}Домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}

 

 

 


Для ЖЕЛТОГО меню вставляем в любое место HTML-страницы:

 

 

Код
<ul id="menu_wrap" class="Yellow"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

 


Для ЖЕЛТОГО меню вставляем в CSS

 

Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Yellow,.Yellow .button a{color: #ffffef;background: #ffff88;border-right:1px solid #f7c40e;background: -moz-linear-gradient(top, #ffff88 0%, #f7c40e 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff88), color-stop(100%,#f7c40e));background: -webkit-linear-gradient(top, #ffff88 0%,#f7c40e 100%);background: -o-linear-gradient(top, #ffff88 0%,#f7c40e 100%);background: -ms-linear-gradient(top, #ffff88 0%,#f7c40e 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#f7c40e',GradientType=0 );background: linear-gradient(top, #ffff88 0%,#f7c40e 100%);}.Yellow .button a:hover,.Yellow .button a:focus{background: #ffff44;background: -moz-linear-gradient(top, #ffff44 0%, #ffff7a 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff44), color-stop(100%,#ffff7a));background: -webkit-linear-gradient(top, #ffff44 0%,#ffff7a 100%);background: -o-linear-gradient(top, #ffff44 0%,#ffff7a 100%);background: -ms-linear-gradient(top, #ffff44 0%,#ffff7a 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff44', endColorstr='#ffff7a',GradientType=0 );background: linear-gradient(top, #ffff44 0%,#100 ffff7a%);}.Yellow .button a:active{background: #e8c745;background: -moz-linear-gradient(top, #e8c745 0%, #f2f475 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8c745), color-stop(100%,#f2f475));background: -webkit-linear-gradient(top, #e8c745 0%,#f2f475 100%);background: -o-linear-gradient(top, #e8c745 0%,#f2f475 100%);background: -ms-linear-gradient(top, #e8c745 0%,#f2f475 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8c745', endColorstr='#f2f475',GradientType=0 );background: linear-gradient(top, #e8c745 0%,#f2f475 100%);}домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}

 

Для РОЗОВОГО меню вставляем в любое место HTML-страницы:

 

Код
<ul id="menu_wrap" class="Pink"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

 


Для РОЗОВОГО меню вставляем в CSS

 

Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Pink,.Pink .button a{color:#feeef5;background: #feb1d3;border-right:solid 1px #f171ab;background: -moz-linear-gradient(top, #feb1d3 0%, #f171ab 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feb1d3), color-stop(100%,#f171ab));background: -webkit-linear-gradient(top, #feb1d3 0%,#f171ab 100%);background: -o-linear-gradient(top, #feb1d3 0%,#f171ab 100%);background: -ms-linear-gradient(top, #feb1d3 0%,#f171ab 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb1d3', endColorstr='#f171ab',GradientType=0 );background: linear-gradient(top, #feb1d3 0%,#f171ab 100%);}.Pink .button a:hover,.Pink .button a:focus{background: #f4aacb;background: -moz-linear-gradient(top, #f4aacb 0%, #e5408a 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4aacb), color-stop(100%,#e5408a));background: -webkit-linear-gradient(top, #f4aacb 0%,#e5408a 100%);background: -o-linear-gradient(top, #f4aacb 0%,#e5408a 100%);background: -ms-linear-gradient(top, #f4aacb 0%,#e5408a 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4aacb', endColorstr='#e5408a',GradientType=0 );background: linear-gradient(top, #f4aacb 0%,#e5408a 100%);}.Pink .button a:active{color:#f3c3d9;background: #f171ab;background: -moz-linear-gradient(top, #f171ab 0%, #feb1d3 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f171ab), color-stop(100%,#feb1d3));background: -webkit-linear-gradient(top, #f171ab 0%,#feb1d3 100%);background: -o-linear-gradient(top, #f171ab 0%,#feb1d3 100%);background: -ms-linear-gradient(top, #f171ab 0%,#feb1d3 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f171ab', endColorstr='#feb1d3',GradientType=0 );background: linear-gradient(top, #f171ab 0%,#feb1d3 100%);}Домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}
Категория: Меню | Просмотров: 583 | Добавил: master | Теги: меню для сайта | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Copyright "IPC" © 2008
Хостинг от uCoz