Pop-Up Css навигация

В этом уроке мы продолжим создание Pop-Up навигации. В уроке Pop-Up навигация в Photoshop мы уже нарисовали навигацию. В этом уроке мы будем ее кодировать. Я покажу и расскажу, как сделать навигацию красочной и без всяких проблем.

Создание навигация в Photoshop

Если Вы еще не создали навигацию, то это вы можете сделать, изучив первую часть этого урока, которая называется Pop-Up навигация в Photoshop

Создание HTML разметки

Перед тем как начать создавать навигацию, нам необходимо создать директорию, где мы будем хранить файлы. После создания директории, откройте любой HTML редактор и сохраните пустые файлы с названием index.html и style.css. Файл index.html будет содержать кодовую разметку, а style.css – стили нашей навигации.

После того как мы создали HTML и CSS файлы их необходимо связать между собой. Для этого мы будем использовать стандартный способ. Между тегами HEAD необходимо вставить следующий код:

<link  href="style.css" rel="stylesheet" type="text/css"  />

ПРИМЕЧАНИЕ! Если CSS файл находится в другой папке, то вместо href="style.css" необходимо писать href="НАЗВАНИЕ ПАПКИ/style.css".

Внутри тега BODY, HTML файла, создаем пустой контейнер DIV с идентификатором container.

<div  id="container">
</div>

Контейнер DIV будет основным. В нем и бутен располагаться наше меню.

Создание разметки навигации

Для создания навигации мы будем использовать неупорядоченный список UL с классом navigation.

<div  id="container">
	<ul  class="navigation"
	</ul>
</div>

Внутри неупорядоченного списка добавим 6 элементов списка. У каждого списка есть собственный класс. Для этого мы будем использовать следующие классы: button1, button2, button3, button4, button5, button6.

<div id="container">
	<ul  class="navigation"
		<li  class="button1"><a href="#"  title="PS">PS</a></li>
		<li  class="button2"><a href="#" title="DW">DW</a></li>
		<li  class="button3"><a href="#"  title="ID">ID</a></li>
		<li  class="button4"><a href="#"  title="AE">AE</a></li>
		<li  class="button5"><a href="#"  title="AI">AI</a></li>
		<li  class="button6"><a href="#"  title="FL">FL</a></li>
	</ul>
</div>

Подготовка

Откроем файл normal.psd файл в Photoshop. Теперь откройте палитру слоев, если палитра еще не открыта, то ее можно открыть, нажав на клавишу F7. Внутри палитры слоев находим фрагмент фона для каждой иконки. Выделяем их, при нажатии на фрагмент слоя удерживаем клавишу CTRL.

После того как выделили все нужные нам фрагменты, выбираем Layer> Merge Layers. Все выделенные фрагменты должны объединится в один слой.

Теперь выделите все слои с иконками. Объедините иконки в один слой.

Теперь необходимо выбрать и объединить все слои с тенью. И, наконец, сделать тоже для линий слоев. Теперь палитра слоев имеет следующий вид:

Сейчас приступим к нарезке значков. Это позволит избавиться от фоновых слоев и облегчить отображение навигации.

Сейчас нам необходимо сделать выделение вокруг слоя background snippets. Это можно сделать быстро, удерживая клавишу CTRL и нажать на маленькую миниатюру или окно слоя. Также Вы можете выделить необходимый фрагмент фона и выполнить Select > Load Selection.

После того как Вы выделил слой background snippets сделайте активным слой Icons и нажмите клавише DELETE. Это позволит удалить ненужные части иконок. Теперь мы можем удалить слой background snippets.

Сохраняем наш документ. Теперь откроем документ с именем hover.psd.

Повторите все шаги описанные выше. Только в этот раз необходимо использовать файл hover.psd.

Создание перехода

Заново откройте файл normal.psd (если Вы его закрыли), выберите инструмент Прямоугольное Выделение и сделайте выделение вокруг нашей навигации. Не забудьте включить линии вод каждой иконкой.

После того как вы сделали выделение, скройте слой с именем background и выполните Edit > Copy Merged.

Создайте новый документ (после выполнения предыдущего шага, размер должен вставиться автоматически) и Edit> Paste.

Теперь нам необходимо увеличить высоту холста. В меню Image > Canvas Size в диалоговом окне, которое откроется, увеличиваем высоту в два раза.

Открываем с именем hover.psd и повторяем предыдущие шаги, до вставления навигации в новом слое. Эту часть навигации нам необходимо будет вставить в уже созданный новый документ. После того как Вы все выполните новый документ имеет следующий вид.

Сохраните изображение с именем navigation.png внутри той же папки, что и HTML файл.

Добавление CSS стилей

Для начала начнем описывать стили для тега BODY и идентификатора container.

body {
	padding:  0px;
	background-image:  url(bg.png);
	background-repeat:  repeat-x;
	background-color:  #ECEBEC;
	margin-top:  20px;
	margin-right:  0px;
	margin-bottom:  0px;
	margin-left:  0px;
}
#container {
	margin:  auto;
	width:  600px;
}

Для начала мы обнуляем все отступы, кроме верхнего края. Затем задаем фоновое изображение и цвет. Картинки с именем bg.png будет нашим фоновым изображением.

Для контейнера DIV мы установим автоматическое значение отступа и зададим фиксированную ширину в 600px. Это должно быть достаточно для нашей навигации.

Следующий набор стилей для нашей навигации:

.navigation  li {
	float:  left;
	display:  block;
	list-style-type: none;
}

Эта часть кода предназначена для списка. Мы задали значение отображения элементов списка как блок, плавающий и убрали все стандартные стили списка.

.navigation  li a {
	height:  53px;
	width:  89px;
	text-indent:  -9999px;
	display: block;
}

Для каждой нашей кнопки мы установили фиксированную ширину и высоту. Ширина и высота должна быть такой же, как и кнопки на картинке. Если кнопки разного размера, то ширину и высоту необходимо задавать в классах button1, button2, button3, button4, button5, button6.

Наконец установили отступ для текста. Это позволит нас убрать текст с поля зрения.

li.button1  {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  left top;
}
li.button2  {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -89px top;
}
li.button3  {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -166px top;
}
li.button4  {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -249px top;
}
li.button5  {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -334px top;
}
li.button6  {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  right top;
}

Для каждого класса кнопки необходимо настроить изображение в качестве фона. Для этого мы используем картинку navigation.png и свойство background, чтобы поставить каждой кнопке свое изображение.

При желании Вы можете объединить некоторые стили, которые имеют одни и те же свойства. Вот тот же код, но для классов, которые объединены:

li.button1,  li.button2, li.button3, li.button4, li.button5, li.button 6 {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
}
li.button1  {
	background-position:  left top;
}
li.button2  {
	background-position:  -89px top;
}
li.button3  {
	background-position:  -166px top;
}
li.button4  {
	background-position:  -249px top;
}
li.button5  {
	background-position:  -334px top;
}
li.button6  {
	background-position:  right top;
}

Это позволяет уменьшить размер CSS файла.

Стили при наведении

Код при наведении почти такой же, как мы рассмотрели ранее. Различие лишь в том, что нам надо использовать нижнюю часть картинки.

li.button1  a:hover {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  left bottom;
}
li.button2  a:hover {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -89px bottom;
}
li.button3  a:hover {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -166px bottom;
}
li.button4  a:hover {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -249px bottom;
}
li.button5  a:hover {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  -334px bottom;
}
li.button6  a:hover {
	background-image:  url(navigation.png);
	background-repeat:  no-repeat;
	background-position:  right bottom;
}

Сохраните файлы. Теперь Вы можете посмотреть, что у получилось. Надеюсь, Вы довольны?

Спасибо за внимание, на этом ВСЕ!