| 
				
				Вёрстка меню
				 | 
 | 
๖ۣۜ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 ] | 
 
 | 
 
  |