» »

Меню сайта Modgames для сайта uCoz


Меню сайта Modgames для сайта uCoz

Не плохое горизонтальное меню подойдет для многих сайтов. Как видим, горизонтальное меню в темных тонах так что лучше ставить на темные интернет ресурсы. Также можно поставить на любую тематику, просто по своей стилистике оно сделано красиво и не относится не к одной теме, так где хорошо будет смотреться, то устанавливаем.

Меню сайта Modgames

Установка:

Верхняя часть сайта:

Код
<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.
23.05.2016 Просмотров: 538 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
BlackHARD
BlackHARD 23.05.2016 11:241
0
Это новое?
Лучше бы старое закинул, которое разворачивалось)))
JoniDen
JoniDen 23.05.2016 11:252
+1
Какое старое?
Kosten
Kosten 23.05.2016 15:024
0
Старое, то что закинул в материал изображение, это?
Kosten
Kosten 23.05.2016 12:443
0
Под темный дизайн с желтым оттенком подойдет, просто как видно, 2 оттенка всегда сочетаются.
feliksteg
feliksteg 24.05.2016 17:415
0
Так какое меню здесь, но подогаю что на главном изображение. Просто , которое второе, приходилось его встречать и там стили по другому. А так эта навигация и на светлый и на тёмный подойдёт и имеет свой отличие.
JoniDen
JoniDen 24.05.2016 23:266
0
Это все одно меню. И первый, и второй скриншот.
FeStemBer
FeStemBer 25.05.2016 19:337
0
Тут видимо от самого фона зависит дизайн горизонтального меню, он видать полупрозрачным идет.
Цитата JoniDen
Это все одно меню. И первый, и второй скриншот.
JoniDen
JoniDen 25.05.2016 23:228
0
Так и есть он полупрозрачный.
avatar