Меню для навигации между страницами

Надеюсь в скором времени сменить дизайн своего блога, на днях столкнулся с вопросом: «Как организовать навигацию между страницами сайта?» Для WordPress есть хороший плагин — WP Page Numbers, но говорить сегодня мы будем не о нём. Я хочу рассказать о том, как при помощи CSS, можно сделать красивое навигационное меню для перехода между страницами сайта.

Итак, начнём…

1) Создаём файл стилей style.css

.nav {
    font-family: Tahoma;
}
 
.nav a {
	text-decoration:none;
	color: #FFFF85;
	border:1px solid #000000;
        background-color: #000000;
        background-image: url(fon1.gif);
	padding:2px 6px;
	font-size:11px;
	font-weight:bold;
}
 
.nav a:hover {
        background-color: #27570F;
        background-image: url(fon2.gif);	
	color:#ffffff;
	border-color: #27570F;
}
 
#bord {
    width:480px;
    height:200px;
    background-color: #C9C9C9;
}
 
h3{
color: #000095;
}

2) Создаём html-файл, в котором будет размещена основа нашего навигационного меню. Я его назвал example3.html

 
<title>Навигация между страницами</title>
 	<link href="”style.css”" rel="”stylesheet”" type="”text/css”">
 
 
<center>
 
<div id="”bord”" align="”center”">
 
<div class="”nav”">
 
<h3>Меню для навигации между страницами</h3>
 
 
 
 
<a href="”#”">← Назад</a> <a href="”#”">1</a> <a href="”#”">2</a> <a href="”#”">3</a> <a href="”#”">4</a> <a href="”#”">5</a> <a href="”#”">Вперёд →</a>
</div>
 
</div>
 
</center>

3) Сохраняем файлы и смотрим на результат.

Для оформления меню навигации я использовал два фоновых рисунка fon1.gif и fon2.gif. Можете использовать их, либо создать свои, подходящие под дизайн Вашего сайта.

Пояснения по коду:

font-family: Tahoma; — шрифт для текста и цифр;

text-decoration:none; — отмена подчёркивания ссылок;

color: #FFFF85; — цвет текста;

background-color: #000000; — цвет блока (на случй, если картинка не будет найдена);

border:1px solid #000000; — ширина границ и их цвет;

background-image: url(fon1.gif); — фоновое изображение;

padding:2px 6px; — отступы (для формирования блоков меню навигации);

font-size:11px; — размер шрифта;

font-weight:bold; — полужирный шрифт.

Результат работы — Меню для навигации между страницами.

Скачать Example3.zip