| Вёрстка меню | 
|  | 
| 
| ๖ۣۜ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(https://zornet.ru/CSS-ZORNET/ZER/left.png) no-repeat left,url(https://zornet.ru/CSS-ZORNET/ZER/right.png) no-repeat right,url(https://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(https://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(https://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(https://zornet.ru/CSS-ZORNET/ZER/ugol.png);
 float: right;
 width: 12px;
 height: 9px;
 margin-top: 3px;
 margin-left: 10px;
 }
 .rss {
 background: url(https://zornet.ru/CSS-ZORNET/ZER/rtf.png) no-repeat;
 width: 21px;
 height: 21px;
 float: right;
 margin-right: 6px;
 margin-top: 13px;
 }
 .tw {
 background: url(https://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(https://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 ] |  |  |