Меню сайта Modgames для сайта uCoz
 | |
Не плохое горизонтальное меню подойдет для многих сайтов. Как видим, горизонтальное меню в темных тонах так что лучше ставить на темные интернет ресурсы. Также можно поставить на любую тематику, просто по своей стилистике оно сделано красиво и не относится не к одной теме, так где хорошо будет смотреться, то устанавливаем.  Установка: Верхняя часть сайта: Код <ul id="menu"><li class="menu"> <a href="$HOME_PAGE_LINK$">Главная</a> <ul></ul></li> <li class="menu"> <a href="/load"><font color="FF6600">Файлы</font></a><ul><li> <a href="/load/0-0-0-0-1">Добавить файл</a> <ul> <li><a href="/forum/200-13232-1#1210516">Как добавить файл?</a></li> </ul> <li> <a href="/search/">Поиск по сайту</a> <ul> </ul></li> </ul></li> <li class="menu"> <a href="/forum">Форум</a> <ul> <li><a href="/forum/0-0-1-34">Новые сообщения</a></li> <li><a href="/forum/0-0-0-6">Поиск по форуму</a></li> <li><a href="/forum/0-0-1-46">Подписки</a></li> </ul></li> <li class="menu"><a href="/publ">Статьи</a> <ul> <li> <a href="/publ/0-0-0-0-1">Добавить статью</a> <ul> <li><a href="/forum/200-13233-1#1210518">Как добавить статью?</a></li> </ul> <li><a href="/publ/15">Новости сайта</a> <ul> <li><a href="/publ/17">События</a></li> <li><a href="/publ/18">Важные новости</a></li> <li><a href="/publ/19">Конкурсы</a></li> </ul></li> <li><a href="/publ/7">Обзоры</a> <ul> <li><a href="/publ/10">Общая</a></li> <li><a href="/publ/20">Рецензии</a></li> <li><a href="/publ/23">Ретро-рецензии</a></li> </ul></li> <li><a href="/publ/11">Обучающие статьи</a> <ul> <li><a href="/publ/12">Общая</a> <li><a href="/publ/24">Adobe Photoshop</a> <li><a href="/publ/27">Для мододелов</a> </ul></li> <li><a href="/publ/5">Новости модостроения</a></li> <li><a href="/publ/21">Новости игрового мира</a></li> <li><a href="/publ/6">Моды в разработке</a></li> <li><a href="/publ/13">Наши проекты</a></li> </ul></li> <li class="menu"><a href="/blog">Блоги</a> <ul> <li><a href="/blog/0-0-0-0-1">Добавить блог</a></li></ul></li> <li class="menu"><a>Разное</a> <ul> <li><a href="/index/0-59">Связь с нами</a></li> <li><a href="/forum/0-0-0-36">Правила сайта</a></li> <li><a href="/forum/203">Наши конкурсы</a></li> <li><a href="/index/0-17"><img border="0" align="absmiddle" src="http://j-p-g.net/if/2016/05/23/0497730001463990387.gif"> Помочь нам</a></li> <li><a href="/index/0-32">Наши друзья</a></li> <li><a href="/index/0-35">Правообладателям</a></li> <li><a href="/index/0-58">Топ сайта</a></li> <li><a href="/forum/8-9664-1">Тех. изменения</a></li> <li><a target="_blank" href="/index/0-14">Администрация</a></li> <li><a href="/index/102-1">Бан-лист users</a></li> <li><a href="/index/15-1">Список users</a></li> <li><a target="_blank" href="http://vk.com/"><img class="menuIMG" src="http://vizar.ucoz.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/0570833001463990591.png" width="28" height="28"> Мы Вконтакте</a></li> </ul></li> <li><a href="/index/0-28">Реклама</a></li> </ul> Css: Код /* 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:780px;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://vizar.ucoz.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/0753611001463990554.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; } /* - */ /* Menus */ .menu1,.editedBy{font-weight:bold;font-size:8pt;} .uMenuV .uMenuItem{font-weight:normal;} .uMenuH li{float:left;padding:0 5px;} ul.uz,ul.uMenuRoot{list-style:none;margin:0 0 0 0;padding-left:0px;} li.menus{margin:0;padding:0 0 0 17px;background:url('http://vizar.ucoz.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/0497730001463990387.gif') no-repeat 0px 3px;margin-bottom:.6em;} .uMenuV .uMenuItemA{font-weight:bold;} .uMenuV a.uMenuItemA:link,.uMenuV a.uMenuItemA:visited{text-decoration:none;color:#F17C1C} .uMenuV a.uMenuItemA:hover{text-decoration:none;color:#FFF} .uMenuV .uMenuArrow{position:absolute;width:10px;height:10px;right:0;top:3px;background:url('http://vizar.ucoz.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/vwlgjcwskjbeh8x0u4xbix2l5.gif') no-repeat 0 0;} .uMenuV li{margin:0;padding:0 0 0 17px;background:url('http://vizar.ucoz.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/0497730001463990387.gif') no-repeat 0px 3px;margin-bottom:.6em;} .menut0{background:#585858;border-top:1px solid #FFF;border-right:1px solid #FFF;} .menut{padding:2 3 3 15px;background:#868686;border-top:1px solid #FFF;border-right:1px solid #FFF;border-bottom:4px solid #FFF;} .mframe{padding:2 0 30 30px;} .bannerTable{width:468;height:60;background:#868686;border-top:1px solid #FFF;border-left:1px solid #FFF;border-bottom:4px solid #FFF;} .catsTd{padding:0 0 3px 17px;background:url('http://vizar.ucoz.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/0497730001463990387.gif') no-repeat 0px 3px;margin-bottom:.6em;} .catNumData{font-size:7pt;color:#D8D5D5;} .catDescr{font-size:7pt;padding-left:10px;} /* - */ (rip Бармен) - он же JoniDen. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 8 | |
|
| |
