Горизонтальное меню KRYZ под цвет для uCoz
 | |
| Хочу вам представить оригинально создано под любую гамма Горизонтальное мню KRYZ под цвет для uCoz где вы самими можете выбрать его цвет под ваш фон. Вообщем давайте разберемся очень подробно по этому скрипту, так как может оно и смотрится красиво, а установите, будет совершенно другой оттенок у него. На главной картинке вы видите, что на темном смотрится очень красиво и однозначно создано было под него. Есть и под категорий, оставил 2, так как на одной идет со значками, это будет к примеру для тематического портала. Берем кнопку рисунка на 25 пикселей и устанавливаем, в коде вы увидите. А другой идет просто с рубриками, это стандартно, просто решил предоставить на выбор, там сами уберите, что не нужно. Он был специально под один ресурс, а это ширина его фиксированная, прописал avto чтоб подходил на многие. И не было завершенной линий, что не красиво смотрелось, сейчас есть и стазу другой формат. Здесь вместо авто вы можете поставить к примеру 900px и выровнять как вам нужно, все найдете в начале стиля. Попробовал поставить на светлые обои и вот как получилось. Чтоб вы поняли, если у вас будет синий фон, то оно и будет таким, это как пример. 1)  Также еще:  Думаю здесь разобрались, и дальше у нас CSS где только одна ссылка на под катигорий, оно всегда будут идти в темном, если смените, то можете поставить другую. Каркас: Код <ul id="menu"><li class="menu"> <a href="http://zornet.ru">Главная</a> <ul> </ul> </li> <li class="menu"> <a href="/load"><font color="FF6600">Файлы uCoz</font></a> <ul> <li> <a href="/load/90"><img class="menuIMG" src="http://zornet.ru/CSS-ZORNET/Grety/Menu-1/Chat-icon.png" width="20" height="20">Скрипты для сайта</a> <ul> </ul></li> <li> <a href="/load/16"><img class="menuIMG" src="http://zornet.ru/CSS-ZORNET/Grety/Menu-1/Chat-icon.png" width="20" height="20">Шаблоны для сайта</a> <ul> </ul></li> <li> <a href="/load/246"><img class="menuIMG" src="http://zornet.ru/CSS-ZORNET/Grety/Menu-1/Chat-icon.png" width="20" height="20">Все для сайта</a> <ul> </ul></li> <li> <a href="/"><img class="menuIMG" src="http://zornet.ru/CSS-ZORNET/Grety/Menu-1/Chat-icon.png" width="20" height="20">Скрипты для сайта</a> <ul> </ul></li> <li> <a href="/"><img class="menuIMG" src="http://zornet.ru/CSS-ZORNET/Grety/Menu-1/Chat-icon.png" width="20" height="20">Скрипты для сайта</a> <ul> </ul></li> </ul></li> <li class="menu"> <a href="/forum">Форум</a> <ul> </ul></li> <li class="menu"><a href="/publ">Статьи</a> <ul> </ul></li> <li class="menu"><a href="/blog">ZORNET.RU</a> <ul> </ul></li> <li class="menu"><a href="/blog">Блоги</a> <ul> <li><a href="/blog/1-0-2">Модификации</a></li> <li><a href="/blog/1-0-3">Игры</a></li> <li><a href="/blog/1-0-7">Рецензии</a></li> <li><a href="/blog/1-0-6">Личные блоги</a></li> <li><a href="/blog/1-0-1">Другое</a></li> </ul></li> <li class="menu"><a href="/video">Видео</a> <ul> </li> </ul></li> Этот код, если вы будете добавлять новые темы. Код </ul></li> <li class="menu"><a href="/">ZORNET.RU</a> <ul> И чтоб форму сделать, прописываем стили для нашего материала. Код /* MenuMG */ .menuIMG{float:left;position:relative;top:-6px;left:-6px;height:28px;margin-bottom:-12px;} #menu,#menu ul{margin:0;padding:0;list-style:none;} #menu{white-space:nowrap;height:37px;width:avto;margin:10px auto;border:1px solid rgba(0,0,0,0.6); background-color:none; background-image:-moz-linear-gradient(top,rgba(85,85,85,0.1) 0%,rgba(0,0,0,0.4) 100%); background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(85,85,85,0.1)),color-stop(100%,rgba(0,0,0,0.4))); background-image:-webkit-linear-gradient(top,rgba(85,85,85,0.1) 0%,rgba(0,0,0,0.4) 100%); background-image:-o-linear-gradient(top,rgba(85,85,85,0.1) 0%,rgba(0,0,0,0.4) 100%); background-image:-ms-linear-gradient(top,rgba(85,85,85,0.1) 0%,rgba(0,0,0,0.4) 100%); background-image:linear-gradient(to bottom,rgba(85,85,85,0.1) 0%,rgba(0,0,0,0.4) 100%); -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow:0 1px 1px #000,0 1px 0 rgba(255,255,255,0.1) inset; -webkit-box-shadow:0 1px 1px #000,0 1px 0 rgba(255,255,255,0.1) inset; box-shadow:0 1px 1px #000,0 1px 0 rgba(255,255,255,0.1) inset;} #menu:before,#menu:after{content:"";display:table;} #menu:after{clear:both;} #menu{zoom:1;} #menu li{float:left;position:relative;} .menu{border-right:1px solid #000;-moz-box-shadow:1px 0 0 rgba(255,255,255,0.1);-webkit-box-shadow:1px 0 0 rgba(255,255,255,0.1);box-shadow:1px 0 0 rgba(255,255,255,0.1);} #menu a{float:left;padding:12px 30px;color:#999;text-transform:uppercase;font:bold 12px Arial,Helvetica;text-decoration:none;text-shadow:0 1px 0 #000;} #menu li:hover > a{color:#fafafa;} *html #menu li a:hover{/* аЂаОаЛб?аКаО аДаЛб? IE6 */ color:#fafafa;} #menu ul{margin:20px 0 0 0; _margin:0;/*аЂаОаЛб?аКаО аДаЛб? IE6*/ opacity:0; visibility:hidden;position:absolute;top:40px;left:0;z-index:9999; background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/bg.jpg) repeat scroll 0% 0% transparent;-moz-box-shadow:0 -1px rgba(255,255,255,0.1); -webkit-box-shadow:0 -1px 0 rgba(255,255,255,0.1); box-shadow:0 -1px 0 rgba(255,255,255,0.1); -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out; } #menu li:hover > ul{opacity:1;visibility:visible;margin:0;} #menu ul ul{top:0;left:165px;margin:0 0 0 20px; _margin:0;/*аЂаОаЛб?аКаО аДаЛб? IE6*/ -moz-box-shadow:-1px 0 0 rgba(255,255,255,0.1); -webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.1); box-shadow:-1px 0 0 rgba(255,255,255,0.1);} #menu ul li{float:none;display:block;border:0; _line-height:0;/*аЂаОаЛб?аКаО аДаЛб? IE6*/ -moz-box-shadow:0 1px 0 #070707,0 2px 0 rgba(255,255,255,0.1); -webkit-box-shadow:0 1px 0 #070707,0 2px 0 rgba(255,255,255,0.1); box-shadow:0 1px 0 #070707,0 2px 0 rgba(255,255,255,0.1); } #menu ul li:last-child{-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;} #menu ul a{padding:10px;width:145px; _height:10px; display:block;white-space:nowrap;float:none;text-transform:none;} #menu ul a:hover{background-color:none; background:-moz-linear-gradient(top,rgba(215,78,0,0.1) 0%,rgba(215,78,0,0.3) 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(215,78,0,0.1)),color-stop(100%,rgba(215,78,0,0.3))); background:-webkit-linear-gradient(top,rgba(215,78,0,0.1) 0%,rgba(215,78,0,0.3) 100%); background:-o-linear-gradient(top,rgba(215,78,0,0.1) 0%,rgba(215,78,0,0.3) 100%); background:-ms-linear-gradient(top,rgba(215,78,0,0.1) 0%,rgba(215,78,0,0.3) 100%); background:linear-gradient(to bottom,rgba(215,78,0,0.1) 0%,rgba(215,78,0,0.3) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ad74e00',endColorstr='#4dd74e00',GradientType=0 );} #menu ul li:first-child > a{ -moz-border-radius:3px 3px 0 0; -webkit-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0;} #menu ul li:first-child > a:after{content:'';position:absolute;left:40px;top:-6px; border-left:6px solid transparent;border-right:6px solid transparent; border-bottom:6px solid rgba(255,255,255,0.1);} #menu ul ul li:first-child a:after{left:-6px;top:50%;margin-top:-6px;border-left:0; border-bottom:6px solid transparent;border-top:6px solid transparent; border-right:6px solid rgba(0,0,0,0.6);} #menu ul li:first-child a:hover:after{border-bottom-color:rgba(215,78,0,0.2);} #menu ul ul li:first-child a:hover:after{border-right-color:rgba(215,78,0,0.2);border-bottom-color:transparent;} #menu ul li:last-child > a{ -moz-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; } /* - */  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |