Главная » Статьи » Меню

Зеленое Горизонтальное Меню by hawk.do.am

Посмотрите ДЕМО
В то место где будет меню
Код
<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="Search" /></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:800px;height: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}.Green,.Green .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%,#436b0c 64%);}.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 a: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:24px;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}li a:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li a:before, li a:after {margin:-7px 0 0;background: #000;}

Вот и все
Категория: Меню | Добавил: slavick (04.08.2013)
Просмотров: 149 | Теги: Горизонтальное, hawk.do.am, зеленое, меню, By | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]