X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Верстаем горизонтальное меню по мотивам MasterWEBS
TimurR
TimurR
Topic Starter сообщение 13.1.2015, 14:12; Ответить: TimurR
Сообщение #1


Доброго времени суток, %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.colorzilla.com/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/css/cat/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'ом кнопки возникают маленькие проблемы, причину которых позже мы с вами выясним и решим. 


Сообщение отредактировал TimurR - 13.1.2015, 23:32
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kamchatniyoleg
kamchatniyoleg
сообщение 13.1.2015, 15:16; Ответить: kamchatniyoleg
Сообщение #2


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


Сообщение отредактировал kamchatniyoleg - 13.1.2015, 15:30
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
Topic Starter сообщение 13.1.2015, 17:04; Ответить: TimurR
Сообщение #3


[member=kamchatniyoleg], лично для меня градиент использовать проще, так как быстрее можно оперировать с цветом. Помимо этого изображение придется делать фиксированного размера (если оно в растре, а не в SVG), либо растягивать средствами CSS, в то время как градиент тянется без дополнительных костылей. При адаптивной верстке очень нужная вещь. В добавок ко всему мы исключаем дополнительные запросы сервера. Но цель статьи не в выяснении, что лучше или хуже. Просто показываю людям, что можно реализовать определенные моменты при помощи чистого CSS.  
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kamchatniyoleg
kamchatniyoleg
сообщение 13.1.2015, 17:06; Ответить: kamchatniyoleg
Сообщение #4


[member=TimurR], Понял, я конечно больше поклонник SVG - так проще как по мне и круче. Но суть понял, интерсно ... почитаем дальше!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Maksimov1989
Maksimov1989
сообщение 13.1.2015, 17:49; Ответить: Maksimov1989
Сообщение #5


Просветительская работа, обучаете молодежь, похвально, побольше бы подобных уроков на данном форуме.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
Topic Starter сообщение 13.1.2015, 23:27; Ответить: TimurR
Сообщение #6


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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) ВНИМАНИЕ: Пользователям MasterWEBS.ru
Важная информация!
118 Silverspam 899043 17.12.2020, 14:57
автор: Silverspam
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1444 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 3384 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
1 lepota 1127 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
0 Olya_Poy 4631 29.11.2017, 11:09
автор: -garmoni-


 



RSS Текстовая версия Сейчас: 19.3.2024, 10:59
Дизайн