Страница 1 из 212»
Форум про uCoz » Всё для web-мастера » Уроки Веб-мастера » Вёрстка меню
Вёрстка меню
๖ۣۜInspire
Дата: Вторник, 22.10.2013, 19:19 | Сообщение # 1
Администраторы
Сообщений:598
Награды: 2




Всем привет, 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

Прикрепления: 2890538.jpg(10Kb) · 6155172.png(9Kb)




Моё портфолио
Kosten
Дата: Вторник, 22.10.2013, 20:13 | Сообщение # 2
Администраторы
Сообщений:12675
Награды: 39


Supermenыч, круто, всегда знал что ты матерый верстальщик. Исходник psd находиться ЗДЕСЬ

SaW
Дата: Вторник, 22.10.2013, 21:43 | Сообщение # 3
Проверенные
Сообщений:130
Награды: 0


Supermenыч, могёшь, знаешь толк в этом деле.
Kosten
Дата: Вторник, 22.10.2013, 21:58 | Сообщение # 4
Администраторы
Сообщений:12675
Награды: 39


SaW, не то слово. Он просто плотно этим не нанимался. Зато саму верстку знает по хлеще верстальщиков которые предлагают свои услуги. И что мне в нем нравится он не жадный и не падкий на деньги. И с ним я бы пошел в разведку. Почему я это сказал?
Расскажу один случай из жизни, когда был на первой войне это в 96 году, служил в развед десантной роте РДР. И снами служил один парень, но реально не боязливый такой крученый спортсмен. А в то время были еще миллионы а не тысячи и вот наступил тот день когда за месяц выдают деньги и не дали, не помню то ли колонну обстреляли но вообщем не дали а сказали через месяц.
Я сам не ожидал сколько говна с него полезло, короче не один я был в ахуе.. И что произошло его просто перевели в пехоту (Мабута) он там недели не прослужил уволился, типо он спортсмен и рожден не для пихоты.
Да жлобяра он, если он так отреагировал что ему вовремя не выплатили боевые, что от такого разведчика можно ожидать, и это хорошо что он был недавно и вовремя показал свою сущность. А так бы была заруба не исключаю что было бы предательство.
Дико извиняюсь за флуд!


Kosten
Дата: Вторник, 22.10.2013, 22:05 | Сообщение # 5
Администраторы
Сообщений:12675
Награды: 39


Supermenыч, делай себе портфолио.. надо тебе реально начинать.. у тебя уже не первая верска.

๖ۣۜInspire
Дата: Вторник, 22.10.2013, 22:09 | Сообщение # 6
Администраторы
Сообщений:598
Награды: 2


Kosten, я бы сделал, но дизайнер из меня фиговый, вот если бы кто-нибудь нарисовал то тогда сделал бы.
По теме - че ещё сверстать




Моё портфолио
Kosten
Дата: Вторник, 22.10.2013, 22:15 | Сообщение # 7
Администраторы
Сообщений:12675
Награды: 39


Supermenыч, есть портфолио на верстку.. просто будишь выставлять что сверстал. Если на кокойто сайт нужен взнос денег я тебе дам.. но не пропадать же отличному верстальщику.

Kosten
Дата: Вторник, 22.10.2013, 22:17 | Сообщение # 8
Администраторы
Сообщений:12675
Награды: 39


Цитата Supermenыч ()
По теме - че ещё сверстать

Не вопрос найду..как раз для портфолио будет что показать


๖ۣۜInspire
Дата: Вторник, 22.10.2013, 22:17 | Сообщение # 9
Администраторы
Сообщений:598
Награды: 2


Kosten, я имел ввиду что нужен дизайн отдельного сайта с портфолио



Моё портфолио
Kosten
Дата: Вторник, 22.10.2013, 22:19 | Сообщение # 10
Администраторы
Сообщений:12675
Награды: 39


Пошли по меню.. как тебе вертикальное меню http://zornet.ru/load/136-1-0-4447

Kosten
Дата: Вторник, 22.10.2013, 22:21 | Сообщение # 11
Администраторы
Сообщений:12675
Награды: 39


Цитата Supermenыч ()
нужен дизайн отдельного сайта с портфолио

Зачем когда существуют порталы по услугам в которых основная страница это портфолио.. weblancer.net


๖ۣۜInspire
Дата: Вторник, 22.10.2013, 22:23 | Сообщение # 12
Администраторы
Сообщений:598
Награды: 2


Ок завтра будет готово. Надо будет все подряд верстать :-) чтоб к psd ещё и верська шла

Добавлено (22.10.2013, 22:23)
---------------------------------------------
Kosten ну так-то да




Моё портфолио
Kosten
Дата: Вторник, 22.10.2013, 22:23 | Сообщение # 13
Администраторы
Сообщений:12675
Награды: 39


Что я хочу сказать пора тебе Supermenыч, денюжку зарабатывать.

Kosten
Дата: Вторник, 22.10.2013, 22:24 | Сообщение # 14
Администраторы
Сообщений:12675
Награды: 39


Цитата Supermenыч ()
ну так-то да

Если нужна моя помощь, ты знаешь как со мной связаться.


๖ۣۜInspire
Дата: Вторник, 22.10.2013, 22:26 | Сообщение # 15
Администраторы
Сообщений:598
Награды: 2


Kosten, Я знаю, просто не могу деньги брать



Моё портфолио
Форум про uCoz » Всё для web-мастера » Уроки Веб-мастера » Вёрстка меню
Страница 1 из 212»
Поиск: