Перейти к содержимому


Партнерская программа Kredov

Верстаем горизонтальное меню по мотивам MasterWEBS

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
5

Отправлено 13 Январь 2015 - 13:12

Доброго времени суток, %username%! Сегодня я покажу как сверстать горизонтальное меню по мотивам меню на этом форуме. Заранее я подготовил все в фотошопе, PSD файл можно скачать по этой ссылке, само меню немного модифицировано и выглядит так:

 

f74d57c1a7db.jpg

 

Как мы видим, меню немного светлее и в нем появилась форма поиска. Представим конструкцию нашего меню. Пункты рубрик будут реализованы в виде ссылок <a> заключенных в элементы списка <li>. Все это будет флотится в левую часть, а форма поиска соответственно по правой части. Фон меню градиент. Его можно реализовать двумя способами, как прокручиваемое изображение или средствами CSS создать полноценный градиент. Мы будем использовать второй способ. 

 

Для начала верстки, я создам два файла index.html и style.css. Если вы внедряете его в готовый шаблон, вам нужно просто вставить код там, где необходимо, а я буду верстать с нуля в пустом документе. Реализуем нашу конструкцию и создадим основной блок с классом main-menu и добавим туда список <ul> с элементами <li>, внутри которых уже и будет идти ссылка <a>. Затем поместим туда и код формы поиска:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
        <title>Крутое меню</title>
</head>
<body>
	<div class="main-menu">
	<!-- Начало списка меню -->
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Форум</a></li>
			<li><a href="#">История</a></li>
			<li><a href="#">Фотогалерея</a></li>
			<li><a href="#">Новости</a></li>
			<li><a href="#">Видео</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">Помощь</a></li>
		</ul>
	<!-- Конец списка меню -->
	<!-- Форма поиска -->
	<form>
		<input type="text" name="search" placeholder="Введите запрос...">
	</form>
	<!-- Конец формы поиска -->
	</div>
</body>
</html>

Сохраните изменения и откройте файл, должно получится следующее:

 

 822a5ad8bb80.jpg

 

Все правильно, все отображается, список появился, ссылки появились и форма на месте. Теперь перейдем к стилям. Так как мы задали класс основному блоку <div>, в котором у нас хранятся все элементы, обращаться мы будем через него ко всем селекторам. Зададим стили для блока .main-menu. Так как нам понадобиться создать градиент, мы воспользуемся сервисом http://www.colorzill...gradient-editor.

 

Необходимо будет создать вертикальный градиент от цвета  #92cb2f к цвету #57a20c

Зададим фиксированные значения ширины и высоты блока, а также скругление 5px углов. После чего централизуем блок. Вот, что получилось. Самое главное, в самом начале файлы style.css скопируйте reset css. Эти правила "сбрасываю" все стили, отменяя отступы и т.д.

 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*

Горизонтально меню.

*/

.main-menu {
	/*задаем ширину блока*/
	width: 960px;
	/*задаем высоту блока*/
	height: 50px;
	/*фоновый цвет в случае если браузер не поддерживает градиенты*/
	background: #76bb17;
	/*задаем градиент с начального цвета 92cb2f к конечному #57a20c */
	background: -moz-linear-gradient(top, #92cb2f 0%, #57a20c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92cb2f), color-stop(100%,#57a20c));
	background: -webkit-linear-gradient(top, #92cb2f 0%,#57a20c 100%);
	background: -o-linear-gradient(top, #92cb2f 0%,#57a20c 100%);
	background: -ms-linear-gradient(top, #92cb2f 0%,#57a20c 100%);
	background: linear-gradient(to bottom, #92cb2f 0%,#57a20c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92cb2f', endColorstr='#57a20c',GradientType=0 );
	/*задаем скругление краем по 5px*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	/*центрируем блок, 40px это отступ сверху и снизу, auto задает автоматический отступ по краям*/
	margin: 40px auto;
	/*прячем все, что вылазит за пределы блока*/
	overflow: hidden;
}
 

Если вы посмотрите результат. то увидите, что градиент отобразился и блок центрировался по центру страницы. Теперь приступим к оформлению нашего списка и ссылок. Давайте выставим списки в горизонтальную линию, назначим отступы и стилизуем ссылки:

.main-menu ul {
	/*отступ ul списка справа*/
	padding-left: 5px;
}

.main-menu ul li {
	/*прижимаем списки к левому краю*/
	float: left;
	/*задаем отступы верху и снизу по 17px и по 10px по краям между li элементами.*/
	padding: 17px 10px;
	/*Создаем разделитель средствами CSS*/
	border-right: 1px solid #295216;
	/*при помощи тени создаем вторую белую полосу разделителя*/
	-webkit-box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.8);
	-moz-box-shadow:    1px 0px 0px 0px rgba(255, 255, 255, 0.8);
	box-shadow:         1px 0px 0px 0px rgba(255, 255, 255, 0.8);
}

.main-menu ul li:last-child {
	/*при помощи псевдоэлемента :last-child отменяем разделитель для последнего элемента списка*/
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow:    none;
	box-shadow:         none;
}

.main-menu ul li a {
	/*задаем цвет ссылки*/
	color: #fff;
	/*убираем подчеркивание*/
	text-decoration: none;
	/*задаем жирность текста, так же можноо задавать цифрами от 100 до 700*/
	font-weight: bold;
        /*задаем размер шрифта*/
        font-size: 15px;
	/*задаем шрифт, если первый не поддерживается, подключается второк базовый*/
	font-family: "PT Sans", sans-serif;
}

.main-menu ul li a:hover {
	/*при помощи псевдоэлемента :hover мы меняем цвет ссылки при наведении на нее курсором.*/
	color: #fff018;
}

Обратите внимание на решение по созданию двухцветного разделителя. Реализовать его можно различными способами, я предпочитаю способ с созданием правого бордера с тенью при помощи CSS. Тень создается при помощи сервиса http://css3gen.com/box-shadow. конкретно для такой тени использовались такие параметры на сервисе:

 

8796102a4c75.jpg

 

Также мы использовали два псевдоэлемента в CSS это :last-child и :hover. Про псевдоэлементы можно и нужно подробнее почитать тут: http://htmlbook.ru/c...t/pseudoelement

 

Посмотрим на текущий результат:

 

321f7fa69025.jpg

 

Выглядит неплохо. Осталось добавить стили для формы поиска и не забыть про разделитель. Начнем с разделителя. Так как он должен постоянно фиксировано быть в одном месте, мы прибегнем к абсолютному позиционированию. Вкратце, абсолютное позиционирование задает возможность позиционирования элементов относительно краев дисплея. Но, мы сделаем немного иначе.

 

Я решил, что разделитель в виде трех точек будет обычным png изображением, не будем извращаться с CSS, так как оно того не стоит. На html странице, сразу после закрывающегося тега </ul> создадим элемент span с классом .dots:

    <!-- Разделитель -->
    <span class="dots"></span> 

Отлично. Теперь приступим к его оформлению. Как я сказал выше, мы будем использовать для этого элемента абсолютное позиционирование. Но это будем не совсем корректно, так как родительский элемент фиксирован и при  увеличении или уменьшении документа в браузере, разделитель будет бегать по горизонтали произвольно. чтобы этого избежать его родительскому элементу .main-menu нужно задать relativ позиционирование. Так мы добьемся того, что элемент span будет отталкиваться уже относительно родительского элемента. Поэтому, добавьте эту строчку в CSS файле к классу .main-menu:

position: relative; 

Круто, то что надо. Давайте напишем стили для нашего span:

.dots {
	/*зададим абсолютное позиционирование*/
	position: absolute;
	/*при помощи этого правила, мы заставим элемент оттолкнуться от правого края на 270px*/
	right: 270px;
	/*задаем "прозрачный цвет" фона и заранее подготовленный png файл с точками*/
	background: transparent url("dots.png") no-repeat center;
	/*так как фон у нас шириной 4px задаем эту ширину иначе элемент не будет отображаться*/
	width: 4px;
	/*задаем высоту равную высоте родительского элемента*/
	height: 50px;
}

Так, с этим разобрались. Теперь нужно позаботиться с формой поиска и кнопкой в форме лупы. Для этого мы немного модифицируем опять наш HTML файл и сразу после разделителя мы изменим наш код на такой:

<!-- Форма поиска -->
<div class="searchform">
    <form>
        <input  class="search" type="text" name="search" placeholder="Введите запрос...">
        <input class="search-btn" type="submit" name="search-btn" value="">
    </form>
</div>
<!-- Конец формы поиска -->

Так-то лучше. Мы теперь добавили кнопку и завернули все это дело в отдельный <div>. По большему счету, нам сталось "прилепить" все это дело к правому краю, задать скругления углов и ровно все выстроить. Так как мы все делаем в фиксированном стиле, то жесткая привязанность к пиксельным отступам для нас не критична. Вот что получилось:

.searchform {
	/*задаем фиксированную ширину*/
	width: 220px;
	/*прилипаем элементы к правому краю*/
	float: right;
	/*задаем отступы для всех сторон */
	margin: 12px;
	/*задаем внутренние отступы*/
	padding: 4px 4px 4px 10px;
	/*задаем скругление углов*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	/*задаем цвет фона*/
	background: #fff;
}

.search {
	/*отменяем базовые стили подсвечивания и бордюры*/
	border: none;
	outline: none;
	/*задаем фиксированную ширину*/
	width: 195px;
}

.search-btn {
	/*задаем параметры ширины и высоты нашей кнопки*/
	width: 16px;
	height: 18px;
	/*также отменям стили*/
	border: none;
	outline: none;
	/*при наведении наш курсор будт меняться на такой же, как и при наведении на ссылку*/
	cursor: pointer;
	/*задается сам фон, это картинка лупы в png*/
	background: #fff url('search.png') no-repeat center;
	/*задаем отступы для всех сторон*/
	padding: 4px; 
}

Теперь сохраним все это вместе и посмотрим результат:

 

8ba4bcbbfe4f.jpg

 

Все получилось так, как мы и задумывали. За исключением того, что в Mozilla и Safari с padding'ом кнопки возникают маленькие проблемы, причину которых позже мы с вами выясним и решим. 


 

Проблемы с мелочами отображения в браузерах Mozilla и Safari были решены абсолютным позиционированием элементов с классами .searchform и .search-btn. Также для элемента searchform был отменен ранее заданный margin. Архив со всеми файлами, включая PSD можно скачать по этой ссылке. В CSS файле и HTML файле есть комментарии по каждому параметру. 

 

Сообщение отредактировал TimurR: 13 Январь 2015 - 22:32

  • 4

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#2 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1 178 сообщений
  • Репутация: 84

Отправлено 13 Январь 2015 - 14:16

Почему для градиента не использовать одно-пиксельный спрайт? В чем плюс использования именно градиентов CSS?


Сообщение отредактировал kamchatniyoleg: 13 Январь 2015 - 14:30

  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#3 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 13 Январь 2015 - 16:04

kamchatniyoleg, лично для меня градиент использовать проще, так как быстрее можно оперировать с цветом. Помимо этого изображение придется делать фиксированного размера (если оно в растре, а не в SVG), либо растягивать средствами CSS, в то время как градиент тянется без дополнительных костылей. При адаптивной верстке очень нужная вещь. В добавок ко всему мы исключаем дополнительные запросы сервера. Но цель статьи не в выяснении, что лучше или хуже. Просто показываю людям, что можно реализовать определенные моменты при помощи чистого CSS.  


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#4 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1 178 сообщений
  • Репутация: 84

Отправлено 13 Январь 2015 - 16:06

TimurR, Понял, я конечно больше поклонник SVG - так проще как по мне и круче. Но суть понял, интерсно ... почитаем дальше!


  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#5 maksimov1989

maksimov1989
  • Пользователь
  • 856 сообщений
  • Репутация: 95

Отправлено 13 Январь 2015 - 16:49

Просветительская работа, обучаете молодежь, похвально, побольше бы подобных уроков на данном форуме.


  • 1

Продам место в подписи или обменяю по средствам бартера, в личке договоримя.



#6 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 13 Январь 2015 - 22:27

Обновлен первый пост, стили для формы поиска и разделителя добавлены. 


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.




Оформление форума – IPBSkins.ru