Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум о uCoz и Web » Веб-программирование и дизайн » Готовые элементы страницы » CSS меню с иконками
CSS меню с иконками
SleepWalkerДата: Воскресенье, 12.07.2009, 21:17 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
CSS Menu With Icons

Для начала давайте создадим нашу навигацию в photoshop, создайте новый документ 600х200 пикселей с фоном черного цвета. С помощью инструмента rectangular marquee tool нарисуйте прямоугольник 600×40 пикселей, вы можете задавать точный размер, для выделения изменив параметр Style в настройках инструмента на fixed size.

Залейте вашу навигацию черным цветом, далее добавьте стили слоя.

У вас должно выйти что-то вроде этого.

Снова выберите инструмент rectangular marquee tool и создайте выделение как показано ниже.

Залейте выделение белым цветом, потом, зажав клавишу ctrl нажмите на иконку слоя с навигацией, что бы создать выделение.

После чего пойдите в меню select > inverse, после чего нажмите кнопку delete. У вас должно получиться как на изображении ниже.

Уменьшите opacity примерно до 5% и добавьте текст для меню.

Теперь берем инструмент rounded rectangle tool и создаем маленький прямоугольник рядом с текстом меню. Иконки должны быть не больше чем 32х32 пикселя. Конечно вы можете сделать иконки больше, но тогда вам нужно будет подкорректировать CSS код, когда мы доберемся до соответствующего этапа этого урока. Добавьте следующие стили к каждому из прямоугольников:

В итоге ваша навигация будет выглядеть как на изображении ниже.

Внутри скругленных прямоугольников, в которые мы собираемся добавлять наши иконки я собираюсь использовать стандартные shapes (формы), которые есть в библиотеке форм бесплатно входящей в photoshop. После того как вы выбрали ваши иконки и добавили их внутрь прямоугольников, добавьте к ним стиль outer glow.

В итоге у вас должно получиться так:

Смотрится немного нагромождено, но это не играет роли, мы сможем настроить отступы между элементами в CSS. Для следующего куска меню нам нужно немного увеличить масштаб, выберите инструмент pen tool и цвет #008aff, нарисуйте линию внизу первого пункта меню.

Теперь добавьте стилей слоя:

Все, с рисованием закончили. Финальный результат изображен ниже.

Теперь нам нужно нарезать наше меню. Создайте новую папку на вашем компьютере, назовите ее navigation, далее внутри той папки создайте еще две папки: “icon_images" и “navigation”. Внутри папки icon_images мы должны сохранить каждую иконку как отдельное изображение, не забудьте, что они должны быть размером 32х32 пикселя и быть на прозрачном фоне, сохраните каждую из иконок как .PNG файл. Вот мои иконки.

Нам также нужно 2 куска нашей навигации. Один - главный фон, а второй - изображение пункта меню при наведении мышки. Вернитесь обратно к меню, которое все еще открыто в photoshop, спрячьте все слои кроме главной навигации и состояния при наведенной мыше.

Сделайте каждое изображение 300 пикселей в ширину, вам нужно будет растянуть изображение с синей линией, что бы получилось как на рисунке ниже. Сохраните эти два файла как “nav_background” и “nav_hover”.

Следующее, что вам нужно, это создать пустой текстовый файл и сохранить его как styles.css в корне папки с меню. После того как вы это сделали, наступает время открывать dreamweaver (прим. переводчика.: честно говоря, я никогда не использовал dreamweaver, но судя по тому что пишется дальше в уроке вам хватит обычного блокнота). Создайте новый html документ и сразу же сохраните его как index.html (или под любым другим названием) в той же папке что и styles.css. Измените ваш титульный текст и привяжите стили.

Code
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt-->
<html>
<head>
<title>GLOWING NAVIGATION TUTORIAL</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Примечание переводчика: автор не указывал базовую структуру документа (<html><body><head>) и соответственно не писал нигде код подключающий стиль (<link href="styles.css" rel="stylesheet" type="text/css" />), но поскольку не все знают, как подключать стили к странице я решил дописать код. Весь остальной HTML код должен писаться между <body>....</body>. Если вам не хватило этой информации, что бы разобраться, предлагаю прочитать этот урок.

После этого кусочка кода нам нужно написать каркас, для нашей навигации используя, стандартные теги UL м LI. Код приведен ниже:

Code
<ul class="navigation">
<li class="current"><a href="http://www.hv-designs.co.uk"><em class="home"></em><strong>Home</strong></a></li>
<li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="templates"></em><strong>CSS Templates</strong></a></li>
<li><a href="http://www.sb-designs.co.uk"><em class="psd"></em><strong>PSD>HTML</strong></a></li>
<li><a href="http://www.hv-designs.co.uk"><em class="tutorials"></em><strong>Tutorials</strong></a></li>
<li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="shop"></em><strong>Shop</strong></a></li>
<li><a href="http://www.hv-designs.co.uk"><em class="contact"></em><strong>Contact Me</strong></a></li>
</ul>

Вы заметили, что после каждой ссылки есть “EM CLASS”, єто будет отвечать за наши иконки в стилях. Ві также заметили, что первый пункт меню имеет класс CURRENT, что у нас будет значить, что ссылка в меню находиться в наведенном (активном) состоянии для определенной страницы.

Code
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt-->

<ul class="navigation">
<li class="current"><a href="http://www.hv-designs.co.uk"><em class="home"></em><strong>Home</strong></a></li>
<li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="templates"></em><strong>CSS Templates</strong></a></li>
<li><a href="http://www.sb-designs.co.uk"><em class="psd"></em><strong>PSD>HTML</strong></a></li>
<li><a href="http://www.hv-designs.co.uk"><em class="tutorials"></em><strong>Tutorials</strong></a></li>
<li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="shop"></em><strong>Shop</strong></a></li>
<li><a href="http://www.hv-designs.co.uk"><em class="contact"></em><strong>Contact Me</strong></a></li>
</ul>

Это весь HTML код, который нам понадобиться, теперь давайте приступим к styles.css. Вверху нашего css файла добавьте код комментария, который выглядит как этот /* NAVIGATION ELEMENTS */ после этого мы начинаем добавлять css правила для навигации.

Code
.navigation {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:40px;
background:#1841c8 url(navigation/nav_background.gif);
}

padding:0 0 0 20px = Короткое свойство, устанавливающее все внутренние отступы в одно обьявление.
margin:0 = Короткое свойство для установки всех наружных отступов равными одному числу.
list-style:none = убираем маркеры-кружочки из списка.
height:40px = высота навигационной панели.
background:#000000 url(navigation/nav_background.gif) = устанавливает фоновый цвет навигации на черный, а так же устанавливает фоновое изображение, которое мы создали в photoshop.

Следующий кусок css кода:

Code
.navigation li {
float:left;
}
.navigation li a {
display:block;
float:left;
height:40px;
line-height:40px;
color:#FFFFFF;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
font-size:11px;
}
.navigation li a strong {
float:left;
display:block;
padding:0 16px 0 8px;
}

float:left = Свойство float (обтекание) устанавливает место, где будет появляться изображение или текст в другом элементе. В нашем случае слева.
display:block = Элемент будет отображен как блочной, с переносом строки до и после элемента.
line-height:40px = Свойство line-height устанавливает высоту строки текста.
color:#FFFFFF = Цвет текста - #ffffff, тоесть белый.
text-decoration:none = Уберает декорации текста (подчеркивания у ссылок, к примеру).

Следующий кусок css определяет класс “current” и изображение, при наведении курсора на меню.

Code
.navigation li.current a {
color:#FFFFFF;
background:url(navigation/nav_hover.gif);
}
.navigation li a:hover {
color:#00CCFF;
background: url(navigation/nav_hover.gif);
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}

Обратите внимание на фон (background): параметр URL указывает на изображение синей линии, которое мы создали в photoshop. Так же проверьте изображения, которые мы указывали раньше, если изображения не показываются при проверке меню в браузере, значит скорей всего проблема в пути к изображению.

Последний кусок css кода отвечает за наши иконки. Не забудьте добавить комментарий /* ICON ELEMENTS */.

Code
/* ICON ELEMENTS */

.navigation li a em.home {
background-image: url(nav_icons/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(nav_icons/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(nav_icons/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(nav_icons/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(nav_icons/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(nav_icons/contact.png);
background-repeat: no-repeat;
background-position: center center;
}

Были установлены только 3 свойства для каждой из наших иконок, так как большинство важных свойств было унаследовано у других правил CSS. Самое важное - наши индивидуальные изображения или иконки, которые мы сделали до этого. Если вы посмотрите на наш HTML в ваших ссылках, то вы увидите, что каждая иконка имеет свой индивидуальный класс (class), который отвечает за ее личный кусочек кода в css файле.

Пример работающего меню можете посмотреть сдесь.
Скачать PSD файл готового меню можно сдесь.

Автор: hv-designs.co.uk
Перевод: SleepWalker ( http://udf.su/ )

Как установить кнопки социальных сетей?

Time Waits For No One
 
VovichДата: Понедельник, 13.07.2009, 17:53 | Сообщение # 2
Полковник
Сообщений: 204
Репутация: 12
Социальная репутация:

Статус: Оффлайн
Спасибо за отличный урок!!!
Ultra-Warez.Net - Журналы | Девочки | Автомото | Интересное
 
JesseДата: Пятница, 14.08.2009, 00:42 | Сообщение # 3
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Оффлайн
ага, хорошиу урок)
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
mencherdДата: Вторник, 25.08.2009, 14:23 | Сообщение # 4
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Оффлайн
криво получается...нужно код переделывать
 
SleepWalkerДата: Вторник, 25.08.2009, 14:54 | Сообщение # 5
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
mencherd, http://www.hv-designs.co.uk/tutorials/css_navigation2/navigation.html
разве тут криво? возможно ты гдето ошибся, когда писал код

Time Waits For No One
 
KapralДата: Среда, 30.12.2009, 17:08 | Сообщение # 6
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Оффлайн
SleepWalker, в этом уроке после слов "Все тэги, расположенные между , это что-то вроде служебной информации. Например" есть что-нить? Я ничего не вижу.. cry
 
SleepWalkerДата: Среда, 30.12.2009, 22:36 | Сообщение # 7
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
теперь там все впорядке
Time Waits For No One
 
Resp_krutДата: Понедельник, 15.03.2010, 19:40 | Сообщение # 8
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Оффлайн
хороший урок
 
kondr-oneДата: Вторник, 16.03.2010, 16:30 | Сообщение # 9
Лейтенант
Сообщений: 55
Репутация: 2
Социальная репутация:

Статус: Оффлайн
Отличнейший урок! happy
LET'S GO CAPS! - В процессе.
 
CountteranДата: Понедельник, 29.03.2010, 12:59 | Сообщение # 10
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Оффлайн
Помоему - совсем не отлично!!! если будет разбираться новичегг как я, то он совсем ничё не поймёт!!! если ты делаешь скрины дак делай скрин всей программы а не хз какой его части!!! я сидел 2 часа разбирался и ничё у ся не нашёл к томуже у меня фотошоп на русском angry
пожалуйста подредактируй чтоб было попонятнее!!!
 
KingДата: Понедельник, 29.03.2010, 13:39 | Сообщение # 11
Полковник
Сообщений: 246
Репутация: 22
Социальная репутация:

Статус: Оффлайн
Quote (Countteran)
пожалуйста подредактируй чтоб было попонятнее!!!

итак все разжовано до немогу!
 
SleepWalkerДата: Воскресенье, 04.04.2010, 22:35 | Сообщение # 12
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
Quote (Countteran)
Помоему - совсем не отлично!!! если будет разбираться новичегг как я, то он совсем ничё не поймёт!!! если ты делаешь скрины дак делай скрин всей программы а не хз какой его части!!! я сидел 2 часа разбирался и ничё у ся не нашёл к томуже у меня фотошоп на русском пожалуйста подредактируй чтоб было попонятнее!!!

ты не поверишь, но одним постом не обучить сразу двум языкам и владению фотошопом. кстати я тебе скажу, что то что у тебя русс фотошоп это твои проблемы, так как русский фотошоп используют восновном новички, а те кто планирует чему-то учится сразу понимают, что нужно использовать англ, так как все уроки для англ фотошопа, ну и мне к примеру больше нравится англ интерфейс

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

в общем не вижу дальше комментить твой пост, думаю и так все понятно. не надо пытатся бегать ненаучившись ходить

Time Waits For No One
 
RightДата: Четверг, 06.05.2010, 21:17 | Сообщение # 13
Рядовой
Сообщений: 2
Репутация: 0
Социальная репутация:

Статус: Оффлайн
Спасибо за отличный урок! Но вот, если из этого меню сделать выпадающее трехуровневое, сложно ли? Если возможно, то подскажите как. Я сам пытался, искал в интернете ничего путного. Заранее спасибо)
 
SleepWalkerДата: Пятница, 07.05.2010, 01:03 | Сообщение # 14
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
Right, знаешь, на хтмл странице ты сам себе бог, возможно абсолютно все... вот токо я не могу тебе посоветовать готовые решения. обычно я под каждый случай пишу меню отдельно. кстати если ты присмотришься, то на этом сайте тоже использовано меню из этого урока, токо малость переделано и добавленно выпадающее меню, правда с одним уровнем, бо для меня нету необходимости втором, третем и т.д. уровнях.
Time Waits For No One
 
RightДата: Пятница, 07.05.2010, 07:58 | Сообщение # 15
Рядовой
Сообщений: 2
Репутация: 0
Социальная репутация:

Статус: Оффлайн
SleepWalker, спасибо за своевременный ответ. Постараюсь сам во всем разобраться.
 
Форум о uCoz и Web » Веб-программирование и дизайн » Готовые элементы страницы » CSS меню с иконками
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: