Блог про красивому
Радує те, що це майже завжди одне і теж. Виняток. мабуть, один випадок: коли на сайті меню, що випадає. Наприклад, є кнопка «уроки», наводячи на яку, випадає цілий список: «уроки photoshop», «уроки flash», «уроки 3D Max» і т.д. Для пользователятакое меню на сайті дуже зручне, але для пошукових систем така конструкція ускладнить і сповільнить індексацію.
Але сьогоднішній урок буде на прикладі меню, яке разом з іншим дизайном, я зробив для іншого сайту. Поки не можу сказати, що цей сайт ще один козир в колоді моїх робіт. Але сподіваюся, що власник таки займеться його наповненням і це не буде черговий мертвий проект, а я згодом зможу пишатися, що доклав до нього руку.
Досить слів, перейдемо до справи;)
Цей код поміщається в каскадну таблицю стилів (CSS). Якщо Ви ще не в курсі, що це таке, прочитайте книгу «Блокова Верстка» зі змісту якої почерпнете масу корисної інформації.
#nav width: 990px;
/ * Ширина всього меню навігації * /
height: 50px;
/ * І, зрозуміло, його висота * /
background: url (img / nav.jpg) no-repeat # 374f37;
/ * Тут ми задаємо параметри фону; відразу прописуємо шлях до картинки, котороая буде служити фоном, після вказуємо, що ця картинка не повторюється і в кінці вказуємо колір меню, на випадок, якщо користувач відключить графіком * /
font-size: 18px;
float: left;
/ * Робить так, що наш блок з меню розташовується праворуч; насправді меню розтягується на всю довжину сайту і нам це начебто не потрібно, але цей параметр знадобляться, щоб не «косячіт» макет, щоб меню «дружити» з іншими блоками * /
#nav ul margin: 4px 0 0 25px;
/ * Змінюючи ці параметри, я «рухаю» кнопки щодо фону * /
list-style: none;
#nav li display: inline;
/ * Щоб наші кнопки шикувалися в лінію, а не стовпчиком * /
#nav a float: left;
/ * Вказує, що кнопки повинні вибудовуватися зліва направо * /
display: block;
width: 98px;
/ * Довжина цього «каркаса» * /
height: 50px;
background: url ( «img / key.png») no-repeat;
/ * Тут все, як і у випадку з фоном для меню; хто не усвідомив, нехай повернеться трохи вище і повторить * /
text-align. center;
/ * Положення тексту в «каркаса» * /
text-decoration: none;
/ * Робимо, щоб текст був чистий, без всяких підкреслень, які в меню навігації нам не потрібні зовсім * /
padding: 10px 2px 10px 0px;
/ * Цими цифрами можна підправити положення напису усередині «каркаса», якщо нас щось не влаштовує: посунути, опустити і т.д. * /
color: #FFF;
/ * Колір напису, коли кнопка не активна * /
#nav a: hover background-position: 0% -50px;
color: # 66ff66;
/ * Колір тексту, коли на кнопку під вказівником * /
Ось власне і все, як бачите, нічого складного. Залишилося лише розповісти про параметр «background-position» і навіщо він потрібен. Взагалі, можна обійтися без нього, а просто прописати «background» і шлях до картинки (або колір), на яку повинен буде змінюватися фон при наведенні курсору. Але в такому випадку, якщо у користувача слабка швидкість Інтернету, при наведенні курсору буде відбуватися гальмування: спочатку фон пропаде зовсім, потім, коли тільки завантажиться нова картинка, він зміниться на потрібний.
Щоб такого не відбувалося, потрібно намалювати обидва фону на одній картинці: зверху той, який буде у кнопки в неактивному стані, нижче, який з'явиться при наведенні курсору. Залежно від того, якої висоти кнопка, ми і вказуємо, на скільки пікселів потрібно підняти фон.
Щоб показати меню на сайті, в код сторінки потрібно додати такий шматок:
Якщо Ви робите шаблон для WordPress, то код повинен виглядати так: