Всем привет, Kosten попросил меня сверстать меню, ну я и сверстал.
Сначала смотрим DEMO, а потом приступаем к установке:
1)Вставляем HTML-код в "Верхнюю часть сайта":
Код
<div class="menu"><a href="#"><div class="li">HOME</div></a><div class="li" style="padding-right:10px;"><span style="float:left;">HOME</span><span class="ugol"></span><div class="drop"><a href="#"><div class="dropli" style="border-top:none;">HOME</div></a><a href="#"><div class="dropli">HOME</div></a><a href="#"><div class="dropli">HOME</div></a><a href="#"><div class="dropli" style="border-bottom:none;">HOME</div></a></div></div><a href="#"><div class="li">HOME</div></a><a href="#"><div class="li">HOME</div></a><a href="#"><div class="fc"></div></a><a href="#"><div class="tw"></div></a><a href="#"><div class="rss"></div></a></div>
2)Вставляем CSS:
Код
.menu {
margin: 100px auto;
border-radius: 3px 3px 0 0;
background: url(http://zornet.ru/CSS-ZORNET/ZER/left.png) no-repeat left,url(http://zornet.ru/CSS-ZORNET/ZER/right.png) no-repeat right,url(http://zornet.ru/CSS-ZORNET/ZER/bg.png);
width: 800px;
height: 55px;
box-shadow: 0 1px 7px #a5a5a5;
-webkit-box-shadow: 0 1px 7px #a5a5a5;
-moz-box-shadow: 0 1px 7px #a5a5a5;
-o-box-shadow: 0 1px 7px #a5a5a5;
}
.li {
background: transparent;
padding: 17px 22px 23px 22px;
color: #dfdfdf;
float: left;
font: 12px arial;
text-shadow: 0 1px 3px #101010;
}
.li:hover{
background:url(http://zornet.ru/CSS-ZORNET/ZER/hover.png);
cursor:pointer;
}
.menu .li:first-child{
border-radius:3px 0 0 0;
}
.drop {
position: absolute;
width: 150px;
background: url(http://zornet.ru/CSS-ZORNET/ZER/bgdrop.png);
margin-top: 38px;
box-shadow: inset 0 7px 5px -5px #252525;
-o-box-shadow: inset 0 7px 5px -5px #252525;
-moz-box-shadow: inset 0 7px 5px -5px #252525;
-webkit-box-shadow: inset 0 7px 5px -5px #252525;
margin-left: -22px;
border-radius: 0 0 3px 3px;
display: none;
padding: 7px 15px;
}
.li:hover .drop{
display:block;
}
.dropli{
padding: 7px 1px;
color: #bbb;
font: 12px arial;
text-shadow: 0 1px 2px #101010;
border-bottom:1px solid #2c2b2b;
border-top:1px solid #3e3e3e;
}
.dropli:hover{
color:#dfdfdf;
cursor:pointer;
}
.ugol {
background: url(http://zornet.ru/CSS-ZORNET/ZER/ugol.png);
float: right;
width: 12px;
height: 9px;
margin-top: 3px;
margin-left: 10px;
}
.rss {
background: url(http://zornet.ru/CSS-ZORNET/ZER/rtf.png) no-repeat;
width: 21px;
height: 21px;
float: right;
margin-right: 6px;
margin-top: 13px;
}
.tw {
background: url(http://zornet.ru/CSS-ZORNET/ZER/rtf.png) -31px no-repeat;
width: 21px;
height: 21px;
float: right;
margin-right: 6px;
margin-top: 13px;
}
.fc {
background: url(http://zornet.ru/CSS-ZORNET/ZER/rtf.png) -61px no-repeat;
width: 21px;
height: 21px;
float: right;
margin-right: 14px;
margin-top: 13px;
}
.menu a{
text-decoration:none !important;
}
Можете загрузить картинки к себе на сайт, и поменять ссылки в CSS.
----------------------------------------------------------------------------------------------------------------
Второе меню:
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://5230soft.ucoz.ru/left.png) left no-repeat,url(http://5230soft.ucoz.ru/right.png) right no-repeat,url(http://5230soft.ucoz.ru/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://5230soft.ucoz.ru/hover.png);
}
.bottomblock{
background:url(http://5230soft.ucoz.ru/bottom.png) no-repeat;
width:227px;
height:7px;
margin-left:-4px;
margin-top:2px;
}
.block a{
text-decoration:none !important;
}
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>
DEMO
