В веб-дизайне и разработке вы обнаружите, что существует множество различных методов для достижения поставленной цели. Некоторые из них хороши, а некоторые хороши, но пока выбранный вами метод работает хорошо и выглядит хорошо, вы должны использовать его с уверенностью. Чтобы завершить профессиональный, индивидуальный веб-дизайн, важно понимать, как создавать навигационное меню от начала до конца.
Навигация вашего сайта является, пожалуй, самым важным элементом, помимо структуры сайта. Каждый посетитель сайта будет использовать его, чтобы найти то, что он ищет. Если ваше меню не работает или не выделяется, посетители могут не знать, куда идти и что делать, чтобы найти нужную им информацию.
Система меню вашего сайта должна отражать стиль вашего сайта: вы можете выбрать меньшие, более тонкие размеры и шрифты, или вы можете масштабировать до больших пространств и подходящих шрифтов. В этом уроке мы собираемся создать более тонкий, более утонченный вид.
Шаг 1: создайте холст
Для начала откройте Photoshop и создайте документ с веб-настройками. Сделайте так, чтобы ширина области контента вашего сайта. Большинство сайтов сегодня имеют ширину 960 пикселей или ширину 1024 пикселя. Высота не так важна — мы собираемся нарезать кусочки для нашего меню CSS позже — но я решил сделать высоту 768 пикселей высокой для целей урока. Таким образом, меню будет выделяться больше.
Шаг 2: Настройка меню
В Photoshop создайте новый слой над фоновым слоем. Выберите инструмент выделения, и в верхней строке меню вы найдете параметры инструмента выделения. Мы хотим убедиться, что растушевка отсутствует, поэтому обязательно установите для нее значение 0px, и тогда вы увидите выпадающее меню с надписью «Normal». Нажмите на это меню, и под ним вы увидите другие опции, которые произнесите «фиксированное соотношение» и «фиксированный размер». Выберите фиксированный размер, и вы увидите, что вы можете ввести точную ширину и высоту, которые вы хотите использовать для инструмента выделения.
Установите высоту меню 40px, а ширину 1024px, полную ширину нашего документа. Часть этого дополнительного пространства на самом деле не имеет значения; мы просто используем их для наглядности. Это помогает визуально увидеть все меню.
Шаг 3: выбор цветов
Используя инструмент выделения, щелкните курсор на экране, где вы хотите разместить свое меню. Вы увидите активный выбор на экране, поэтому теперь вам нужно будет дважды щелкнуть по цвету переднего плана на панели инструментов и выбрать любой нужный вам цвет. Как только вы выберете цвет, который хотите использовать, Photoshop предоставит вам шестнадцатеричные значения этого цвета (шестизначное число), которые вы сможете использовать позже в своем CSS. Использование Photoshop и возможность выбирать цвета визуально сделает ваши меню (и все остальное, что вы макетируете) намного лучше и более сплоченным. Хорошей идеей будет записать шестнадцатеричные значения различных цветов, которые вы в конечном итоге используете в своем макете, чтобы вы могли использовать их позже.
Я выбрал цвет: # C03C03, насыщенный красный. На созданном слое и сделанном выделении нажмите клавишу Alt или Option + клавишу удаления, чтобы заполнить выделение цветом переднего плана. Это плоский цвет, но мы собираемся изменить это.
Шаг 4: создайте подсветку для вашего меню
Создайте новый слой и с помощью инструмента выделения выделите более короткую ширину (примерно 100 пикселей) и оставьте высоту равной 40 пикселей. Нажмите прямо в верхней части меню, и выбор станет активным. Выберите белый в качестве цвета переднего плана и выберите инструмент градиента. В параметрах градиента выберите параметр «Передний план — прозрачный» и нарисуйте градиент, удерживая клавишу Shift, чтобы убедиться, что он прямой. Начните с верхней части меню и перетащите прямо вниз. Это создаст подсветку для вашего обычного меню навигации. А пока скройте слой градиента подсветки, который мы только что создали.
Шаг 5: Создайте состояние темного наведения
Создайте новый слой и измените цвет переднего плана на черный. Сделайте тот же выбор, что вы сделали для белого градиента. Выберите инструмент «Градиент» и снова, выбрав опцию «Передний план на прозрачный», щелкните в нижней части меню и перетащите вверх, создав черный градиент исчезновения. С обоими этими слоями вы можете настроить непрозрачность по вкусу.
Шаг 6: Нарезка ваших изображений
Теперь, когда у нас есть наши блики и тени, мы можем начать разрезать и кодировать дизайн. Если вы щелкнете мышью на инструменте выделения и удержите его, вы заметите, что существуют инструменты выделения с одной строкой и одним столбцом. Для наших целей выберите инструмент выделения одной колонки, который делает вертикальное выделение на 1 пиксель для всей высоты вашего документа.
Шаг 7: сохраните выделенное изображение
Спрячьте все остальные слои, кроме слоя белого градиента, удерживая нажатой клавишу «Alt» или «Alt» и щелкая значок глаза слоя с белым градиентом. Теперь щелкните в любом месте меню, чтобы создать вертикальный выделение прозрачного градиента на 1 пиксель. Нажмите команду или клавишу Ctrl + «C», чтобы скопировать ваш выбор.
Чтобы упростить задачу, создайте новый документ, и Photoshop автоматически создаст его с размерами, выбранными вами, шириной 1 или 40 пикселей. Нажмите «ОК», дважды щелкните фоновый слой, чтобы разблокировать его, и нажмите «Command» или «Control» + «A», чтобы выбрать все. Затем нажмите клавишу удаления, чтобы удалить белый цвет фона.
Затем нажмите Ctrl + «V», чтобы вставить белый градиент в новый документ. Выберите «Файл»> «Сохранить для Web и устройств» и в настройках выберите «png-24». Это правильный выбор, потому что он обеспечивает прозрачность. Я назвал файл «highlight.png» и сохранил его в папке своего проекта в другой папке с именем «images». Закройте документ без сохранения, так как он больше не нужен.
Шаг 8: сохраните свой теневой файл
Вернитесь к исходному файлу, скройте выделенный слой и сделайте слой черного градиента видимым. Повторите шаги сверху, создав новый документ с черным прозрачным градиентом. Я сохранил его как «shadow.png». На данный момент мы закончили с Photoshop.
Шаг 9: Создание HTML
Для нашего HTML я создал неупорядоченный список с элементами списка для нашего выпадающего меню. Вы можете иметь столько выпадающих элементов, сколько захотите, но я стараюсь не превышать семи. Если мне нужно больше вариантов, я разбиваю некоторые пункты на категории. Вся система меню имеет класс CSS «menu». Имейте в виду, что ваше меню, если оно находится внутри контейнера, должно быть такой же ширины контейнера.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
<br>
<br>
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">About</a>
<ul>
<li><a href="#">Process</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Philosophy</a></li>
</ul>
</li>
<li><a href="/faq.php">Work</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
</body>
</html>Шаг 10: Сделай это стильно
Для CSS, мы собираемся создать наше меню и не давать отступов, границ и полей. Это может измениться для вашего проекта в зависимости от того, как настроен ваш сайт, но именно так мы настраиваем CSS для наших целей. Основное внимание в этом руководстве уделяется созданию базовой структуры, которую вы можете изменять по мере необходимости. Выберите вашу гарнитуру и размер шрифта, который я установил на 14.
.menu{
padding:0px;
font-family: Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
border:none;
border:0px;
margin:0px;
}
Шаг 11: Код Nitty-Gritty
Далее, мы собираемся стилизовать наш неупорядоченный список. Помните, что если вы не укажете здесь ширину, то меню будет работать на всю ширину контейнера. Если ваше меню не внутри контейнера, оно будет работать на всю ширину браузера. Ранее мы установили высоту наших светлых и теневых прозрачных файлов PNG равной 40 пикселей. Мы должны сделать то же самое здесь, чтобы все совпадало. Установите поле и отступ в 0px.
Для фона, вот как вы создадите свой бесшовный градиент: выберите цвет фона для вашего меню. Я выбрал # C03, который красный. Вызовите фоновый URL, выберите свой файл «highlight.png» и установите его повторение по оси X. Это возьмет ваше фоновое изображение высотой 40px и повторит его горизонтально внутри div. Мы получаем приятный розовый цвет, но если он слишком сильный на ваш вкус, вы можете отредактировать файл .png и уменьшить его непрозрачность. Вы заметите, что это меняет фон меню, но сами кнопки не меняются. Мы исправим эту проблему в ближайшее время.
.menu ul{
background:#C03 url("images/highlight.png") repeat-x;
height:40px;
list-style:none;
margin:0;
padding:0;
}
Снова выберите класс меню, но на этот раз выберите свой элемент списка. Установите отступы 0px и установите элементы списка (кнопки), чтобы они плавали влево. Если ваш сайт требует, чтобы они были справа, установите атрибут float справа.
.menu li{
float:left;
padding:0px;
}
Шаг 12: стиль ваших активных ссылок
Следующий атрибут, который мы собираемся стилизовать, — это активная опция. Это берет любой элемент списка с классом «меню» и активной ссылкой, и стилизует его определенным образом. Здесь установите атрибуты фона так же, как ваше меню, чтобы все ваши кнопки выглядели одинаково. Стоит отметить, что вам нужно установить высоту строки равной 40 пикселей, чтобы она была такой же высоты, как и меню. Выровняйте текст по центру, чтобы главное меню выглядело равномерно. Установите текстовое оформление на none, чтобы ваши ссылки не были подчеркнуты по умолчанию. Я установил цвет текста # 000, который является черным, чтобы он контрастировал со светлым меню.
.menu li a{
background:#C03 url("images/highlight.png") repeat-x;
color:#000;
text-shadow: 0px 0px 4px #E5E5E5;
display:block;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
Шаг 13: выделите состояние наведения
Далее нам нужно стилизовать активное состояние наведения элемента списка и неупорядоченных пунктов меню списка. Если вы считаете свое меню массивом кнопок, этот стиль будет определять состояние наведения для каждой кнопки. Здесь я выбрал # 900 в качестве цвета для состояния наведения, и мы также собираемся использовать наш файл «shadow.png», чтобы придать ему некоторую глубину. Так же, как и файл «highlight.png», мы собираемся повторить файл по оси X, реплицируя его по горизонтали. Установите текст на белый для контраста с темными цветами, которые мы только что выбрали, и установите текстовое оформление на none.
.menu li a:hover, .menu ul li:hover a{
background: #900 url("images/shadow.png") repeat-x;
color:#FFFFFF;
text-decoration:none;
}
Шаг 14: стиль вашего подменю
Следующий набор параметров позволяет стилизовать элементы выпадающего меню. Мы собираемся выбрать неупорядоченные элементы списка под нашими элементами списка (представьте, что они являются нашими подменю первого уровня), и мы будем стилизовать их обычное отображение. Установите цвет фона # C03, который является тем же цветом, который мы выбрали ранее. Установите границы, поля и отступы на 0px, позиционирование на абсолютное, и убедитесь, что здесь определена ширина. Как правило, для большинства слов должно хватить 225 пикселей, но вам, возможно, придется настроить его для своих целей.
.menu li ul{
background:#C03;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
}
Шаг 15: Подбери стиль наведения
Для состояния наведения неупорядоченного списка в пунктах списка вашего меню вы захотите настроить отображение на блокировку. Это единственный атрибут, необходимый для этого селектора, но без него ваши выпадающие элементы не будут отображаться. Вы увидите только первый уровень вашего меню.
.menu li:hover ul{
display:block;
}
Далее мы будем стилизовать элементы списка под нашими элементами списка (наши фактически видимые выпадающие меню). Установите фоновый URL для вашего файла «highlight.png» и повторите его вдоль оси X. Установите поля и отступы 0px, а ширину снова 225px или ширину, которую вы предпочитаете для своего дизайна. Установите float в none и дисплей заблокировать. В общем, убедитесь, что для любых элементов, которые мы будем стилизовать, их отображение будет заблокировано.
.menu li li {
background:url("images/highlight.png") repeat-x;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
Шаг 17: Создание вашего подменю
Далее мы выберем состояние наведения активного элемента списка элементов списка меню. Нам нужно установить фоновый «нет», иначе вы не увидите состояние наведения при наведении курсора на каждый пункт меню.
.menu li:hover li a{
background:none;
}
Выберите активный неупорядоченный список под основными элементами списка. Установите высоту 40px, поле 0px и отступ 15px, потому что мы собираемся установить выравнивание текста по левому краю, и мы не хотим, чтобы текст касался левого края вашего меню. Всегда полезно оставлять любые текстовые элементы на небольшом расстоянии от края контейнера, чтобы их можно было легко прочитать.
.menu li ul a{
display:block;
height:40px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
Шаг 18: Подменю Состояния наведения
Теперь мы хотим стилизовать состояния наведения вашего подменю. Установите границу 0px, текст на белый для хорошего контраста и выберите темный # 900 в качестве цвета фона. Обязательно используйте изображение «shadow.png» и повторяйте его вдоль оси X.
.menu li ul a:hover, .menu li ul li:hover a{
background:#900 url("images/shadow.png") repeat-x;
border:0px;
color:#ffffff;
text-decoration:none;
}
Вот то, что вы должны в конечном итоге:
Итак, теперь, когда вы закончили разработку своего меню, вы можете задаться вопросом, почему этот процесс так важен. Отличительной особенностью этой гибкой системы меню является то, что вы можете адаптировать ее для использования во всех ваших будущих проектах без необходимости начинать с нуля. Вы можете вносить незначительные изменения цвета, не кодируя все заново, и вы можете вносить более обширные изменения, просто редактируя несколько строк кода: добавьте небольшую рамку местами с помощью CSS, отредактируйте файлы .png, чтобы внести изменения к градиентам добавьте текстовые эффекты, такие как текстовая тень, которую я добавил, и многое другое. Это простая, гибкая структура для любого меню CSS, и она может сэкономить время и энергию, которые в противном случае были бы потрачены впустую, делая ненужные, избыточные проекты меню с нуля.