ZorNet.Ru — сайт для вебмастера » Меню для сайта » Скрипт меню сайта от Supermenыч

Скрипт меню сайта от Supermenыч

Очень по своему красивое и можно сказать что меню сайта для системы ucoz является оригинальным. Возможно вы его видели как макет, но Supermenыч его сверстал на славу и теперь вы можете его установить на свой сайт.
Меню идет с блоком хотелось сразу заметить и если отделить саму навигацию то можно получить полноценный блок сайта и обновить на своем сайте. Так как этот очень красиво смотрится а с меню вообще шикарный вид и подойдет под любую тематику сайта.
Но вот с дизайн сайтом у него не так все однообразно, видно что было создана навигация под темные оттенку цвета порталы, и видать только под эту гамму цвета меню будет установлено. Но можно так же попробовать и на светлый сайт чтоб только фон у сайта был темный и тогда думаю все в масть будет.
Код HTML:

Код

<div class="block"><div class="topblock">НАВИГАЦИЯ САЙТА</div><a href="#"><div class="li" style="margin-top:2px;">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><a href="#"><div class="li">Навигация в блоке</div></a><div class="bottomblock"></div></div>

CSS:

Код

.block {
background: #212121;
padding: 4px;
padding-top: 0;
padding-bottom: 0;
width: 219px;
border-radius: 4px;
margin:100px auto;
box-shadow:0 1px 8px #afafaf;
  -o-box-shadow:0 1px 8px #afafaf;
  -moz-box-shadow:0 1px 8px #afafaf;
  -webkit-box-shadow:0 1px 8px #afafaf;
}
.topblock {
background: url(http://zornet.ru/CSS-ZORNET/REN/left.png) left no-repeat,url(http://zornet.ru/CSS-ZORNET/REN/right.png) right no-repeat,url(http://zornet.ru/CSS-ZORNET/REN/center.png) repeat-x;
height: 32px;
width: 100%;
font: 13px arial;
color: white;
padding-top: 17px;
text-align: center;
}
.li {
background: #383838;
border-radius: 3px;
width: 197px;
padding: 5px 5px 4px 9px;
color: white;
font: 11px tahoma;
margin-left: 4px;
margin-top: 3px;
}
.li:hover{
background:url(http://zornet.ru/CSS-ZORNET/REN/hover.png);
}
.bottomblock{
background:url(http://zornet.ru/CSS-ZORNET/REN/bottom.png) no-repeat;
width:227px;
height:7px;
margin-left:-4px;
margin-top:2px;
}
.block a{
text-decoration:none !important;
}
body{
margin:0;
background:#efefef;
}

09 Декабря 2013 Просмотров: 2093 Комментариев: (0)

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

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

Kosten

Комментарии: 0