|
Вёрстка меню
|
|
| ๖ۣۜInspire | Вторник, 22 Октября 2013, 19:19 | Сообщение 1 |
|
Всем привет, 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
Моё портфолио
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 20:13 | Сообщение 2 |
| Supermenыч, круто, всегда знал что ты матерый верстальщик. Исходник psd находиться ЗДЕСЬ
| | [ RU ] |
| |
| SaW | Вторник, 22 Октября 2013, 21:43 | Сообщение 3 |
| Supermenыч, могёшь, знаешь толк в этом деле.
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 21:58 | Сообщение 4 |
|
| SaW, не то слово. Он просто плотно этим не нанимался. Зато саму верстку знает по хлеще верстальщиков которые предлагают свои услуги. И что мне в нем нравится он не жадный и не падкий на деньги. И с ним я бы пошел в разведку. Почему я это сказал?
Расскажу один случай из жизни, когда был на первой войне это в 96 году, служил в развед десантной роте РДР. И снами служил один парень, но реально не боязливый такой крученый спортсмен. А в то время были еще миллионы а не тысячи и вот наступил тот день когда за месяц выдают деньги и не дали, не помню то ли колонну обстреляли но вообщем не дали а сказали через месяц.
Я сам не ожидал сколько говна с него полезло, короче не один я был в ахуе.. И что произошло его просто перевели в пехоту (Мабута) он там недели не прослужил уволился, типо он спортсмен и рожден не для пихоты.
Да жлобяра он, если он так отреагировал что ему вовремя не выплатили боевые, что от такого разведчика можно ожидать, и это хорошо что он был недавно и вовремя показал свою сущность. А так бы была заруба не исключаю что было бы предательство.
Дико извиняюсь за флуд!
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:05 | Сообщение 5 |
|
| Supermenыч, делай себе портфолио.. надо тебе реально начинать.. у тебя уже не первая верска.
| | [ RU ] |
| |
| ๖ۣۜInspire | Вторник, 22 Октября 2013, 22:09 | Сообщение 6 |
|
| Kosten, я бы сделал, но дизайнер из меня фиговый, вот если бы кто-нибудь нарисовал то тогда сделал бы.
По теме - че ещё сверстать
Моё портфолио
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:15 | Сообщение 7 |
|
| Supermenыч, есть портфолио на верстку.. просто будишь выставлять что сверстал. Если на кокойто сайт нужен взнос денег я тебе дам.. но не пропадать же отличному верстальщику.
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:17 | Сообщение 8 |
|
| Цитата Supermenыч (  ) По теме - че ещё сверстать
Не вопрос найду..как раз для портфолио будет что показать
| | [ RU ] |
| |
| ๖ۣۜInspire | Вторник, 22 Октября 2013, 22:17 | Сообщение 9 |
|
| Kosten, я имел ввиду что нужен дизайн отдельного сайта с портфолио
Моё портфолио
| | [ US ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:19 | Сообщение 10 |
|
| Пошли по меню.. как тебе вертикальное меню /load/136-1-0-4447
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:21 | Сообщение 11 |
|
| Цитата Supermenыч ( ) нужен дизайн отдельного сайта с портфолио
Зачем когда существуют порталы по услугам в которых основная страница это портфолио.. weblancer.net
| | [ RU ] |
| |
| ๖ۣۜInspire | Вторник, 22 Октября 2013, 22:23 | Сообщение 12 |
|
| Ок завтра будет готово. Надо будет все подряд верстать :-) чтоб к psd ещё и верська шла Добавлено (22.10.2013, 22:23)
---------------------------------------------
Kosten ну так-то да
Моё портфолио
| | [ US ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:23 | Сообщение 13 |
|
| Что я хочу сказать пора тебе Supermenыч, денюжку зарабатывать.
| | [ RU ] |
| |
| Kosten | Вторник, 22 Октября 2013, 22:24 | Сообщение 14 |
|
| Цитата Supermenыч ( ) ну так-то да
Если нужна моя помощь, ты знаешь как со мной связаться.
| | [ RU ] |
| |
| ๖ۣۜInspire | Вторник, 22 Октября 2013, 22:26 | Сообщение 15 |
|
| Kosten, Я знаю, просто не могу деньги брать
Моё портфолио
| | [ US ] |
| |
