ZorNet.Ru — сайт для вебмастера » Меню для сайта » Меню сайта Skill для сайта uCoz

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

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

Первый или Второй контейнер:

Код

<div class="block_t"><div class="cat"></div><div class="text">psd исходники</div></div>
<div class="home"></div>
<div class="block_c"><div class="block_menu">
<ul>
<li><a href="ВАША ССЫЛКА" title="Аватары psd для photoshop">Аватары psd</a></li>
  <li><a href="ВАША ССЫЛКА" title="Шапки psd для photoshop">Шапки psd</a></li>
  <li><a href="ВАША ССЫЛКА" title="Баннеры psd для photoshop">Баннеры psd</a></li>
  <li><a href="ВАША ССЫЛКА" title="Макеты psd для photoshop">Макеты psd</a></li>
  <li><a href="ВАША ССЫЛКА" title="Иконки psd для photoshop">Иконки psd</a></l>
  <li><a href="ВАША ССЫЛКА" title="Шапки psd для канала youtube">Шапки psd для youtube</a></li>
  <li><a href="ВАША ССЫЛКА" title="Другие psd для photoshop">Другие psd</a></li>
</ul>

Css:

Код

.block_left {width:235px;float:left;margin-left:2px; overflow:hidden;}
.block_right {width:235px;float:right;margin-right:2px; overflow:hidden;}
.block_center {margin:0 242px; overflow:hidden; max-width:657px;}
.block_t {background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0031967001465149107.png') no-repeat 0 0; width:235px; height:49px; line-height:48px; text-align:center; font-family:Cuprum_i;font-size:13px; color:#fff; text-shadow:1px 1px 1px #2a2a2a; text-transform:uppercase; overflow:hidden; padding:0 0 4px 0;}
.block_t .text {}
.block_t .home {float:left;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat 0 0; width:24px; height:21px; margin:12px 0 0 9px;}
.block_t .cat {float:left;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -24px 0; width:24px; height:21px; margin:12px 0 0 9px;}
.block_t .user {float:left;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -48px 0; width:24px; height:21px; margin:12px 0 0 9px;}
.block_t .buy {float:left;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -144px 0; width:24px; height:21px; margin:12px 0 0 9px;}
.block_t .forum {float:left;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -168px 0; width:24px; height:21px; margin:12px 0 0 9px;}
.block_t .chat {float:right;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -72px 0; width:24px; height:21px; margin:12px 9px 0 0;}
.block_t .banner {float:right;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -96px 0; width:24px; height:21px; margin:12px 9px 0 0;}
.block_t .stata {float:right;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -120px 0; width:24px; height:21px; margin:12px 9px 0 0;}
.block_t .mini {float:right;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0902072001465149062.png') no-repeat -192px 0; width:24px; height:21px; margin:12px 9px 0 0;}
.block_c {width:231px;}
.block_c .text {padding:0 6px 0 6px;}
.block_b {background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0858153001465149037.png') no-repeat -235px 0; width:231px; height:10px; margin:2px 2px 5px 2px;}
/* === */
.block_menu ul {padding:0;margin:-3px 0 2px 2px;}
.block_menu ul li {display:block;height:27px; text-transform:uppercase;}
.block_menu ul li a {display:block; background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0458080001465149005.png') no-repeat 0 0; height:27px; width:231px; font-family:Cuprum;font-size:11px;color:#fff;text-shadow:1px 1px 1px #666666;line-height:30px; text-indent:10px; text-transform:uppercase; margin-top:1px;}
.block_menu ul li a:hover {background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0458080001465149005.png') no-repeat -231px 0;line-height:30px; text-decoration:none;}
/* === */
.block_c .users { margin:0 0 0 -30px; font-family:cuprum; overflow:hidden; color:#fff;}
.block_c .users li { background:url(http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0066923001465148972.png) no-repeat; width:104px; height:80px; float:left; position:relative; margin:0 0 5px 0; font-family:cuprum;}
.block_c .users li:hover { background:url(http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0066923001465148972.png) no-repeat -104px;}
.block_c .users li img { width:88px; height:59px; margin:9px 8px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; position:absolute; z-index:1;}
.block_c .users li:hover img { opacity:0.6;}
.block_c .users li .info_f {display:none;}
.block_c .users li .info_p {display:none;}
.block_c .users li .info_c {display:none;}
.block_c .users li .nick { display:none;}
.block_c .users li:hover .nick {position:absolute; left:10px; top:11px; z-index:2; display:block; color:#fff; font-size:10px; font-family:cuprum; text-transform:uppercase;}
.block_c .users li:hover .info_f {background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0805702001465148929.png') no-repeat 0 0; height:8px; position:absolute; left:10px; top:11px; z-index:2; display:block; color:#fff; font-size:10px; font-family:cuprum; text-transform:uppercase; font:10px/10px cuprum; margin:15px 0 0 0; text-indent:13px;}
.block_c .users li:hover .info_p {background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0805702001465148929.png') no-repeat 0 -8px; height:8px; position:absolute; left:10px; top:11px; z-index:2; display:block; color:#fff; font-size:10px; font-family:cuprum; text-transform:uppercase; font:10px/10px cuprum; margin:30px 0 0 0; text-indent:13px;}
.block_c .users li:hover .info_c {background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/res/0805702001465148929.png') no-repeat 0 -16px; height:8px; position:absolute; left:10px; top:11px; z-index:2; display:block; color:#fff; font-size:10px; font-family:cuprum; text-transform:uppercase; font:10px/10px cuprum; margin:45px 0 0 0; text-indent:13px;}
/* === */
.text {color:#fff; text-shadow:1px 1px 1px #2a2a2a; font-family:cuprum; font-size:13px; text-transform:uppercase;}
.text a {color:#fff; text-shadow:1px 1px 1px #2a2a2a; }
.text a:hover {text-decoration:none; border-bottom:1px dotted #fff;}

05 Июня 2016 Просмотров: 1600 Комментариев: (3)

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

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

JoniDen

Комментарии: 3
Порядок вывода комментариев: Kosten 05 Июня 2016 21:17¹ 0 Не чего сколько ссылок в этом меню, видать старое, но в первые его вижу, но явно какое то тематическое. Сопрано 05 Июня 2016 21:21² 0 Что то под вид него видел, и на темном сайте даже такое меню отличается, так как сделано с блеском градиента. feliksteg 05 Июня 2016 22:47³ 0 Так сделано не плохо меню, но меня больше волнует, как будет проводиться под мобильные устройства, может кто знает и ответит. Что легче сделать, где дизайн на одном стиле или где присутствуют ссылки.