2014
26
Янв

Удобная навигация сайта



Удобная навигация сайта

Ранее мы уже рассматривали навигацию в виде полки. Сегодня мы рассмотрим удобную навигацию по сайту. Вы можете сделать ее для своего сайта меняя цвет, изображения, списки и т.д.

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

В верхней части находится список разделов, которые мы включили в навигацию. Если кликнуть по разделу, то откроется страница, на которой вы можете поместить информационный материал для посетителя.


В исходнике вы найдете папку со скриптом для данной навигации, папку со стилями, демонстрационный файл и текстовый файл. Прежде всего, необходимо для нашей навигации подключить стили и скрипты. Вставляем в голову нашей страницы перед тегом </head>. Не забывайте правильно указывать путь к файлам.



link rel="stylesheet" type="text/css" href="css/style.css" script type="text/javascript" src="js/jquery.js" script type="text/javascript" src="js/keypress_nav.js"

В тело нашей страницы между тегами <body></body> поместим блок для навигации.

<div id="header5"> <h1>Навигация по сайту</h1> <ul id="navigation"> <li><a href="#home">Главная</a></li> <li><a href="#about">Интернет</a></li> <li><a href="#contact">Для души</a></li> <li><a href="#awards">Кулинария</a></li> <li><a href="#links">Домоводство</a></li> <li><a href="#pozit">Позитивчик</a></li> </ul> </div> <div id="home" class="container5"> <h2>Главная</h2><br /> <p>Здесь Ваш текст</p> </div> <div id="about" class="container5"> <h2>Интернет</h2> <p>Здесь Ваш текст</p> </div> <div id="contact" class="container5"> <h2>Для души</h2> <p>Здесь Ваш текст</p> </div> <div id="awards" class="container5"> <h2>Кулинария</h2><img src="../images/Kylinar.png" alt="" width="80" height="100" class="redactor3" /> <p><table> <tr><td width="2%"><img src="images/01.gif" alt="" width="20" height="20"/></td><td width="20%">Рецепты</td><td width="5%"><img src="images/3.png" alt="" width="15" height="15" /></td><td width="50%"><a href="../Kylinaria/Kylinaria1.html" target="_blank">Полный список рецептов</a></td></tr> <tr><td width="2%"><img src="images/01.gif" alt="" width="20" height="20"/></td><td width="20%">Советы</td><td><img src="images/3.png" alt="" width="15" height="15" /></td><td><a href="../Kylinaria_sovet/Sovet_01.html" target="_blank">Полный список статей</a></td></tr> </table></p> <img src="images/4.gif" alt="" width="495" height="2" style="margin-bottom:-210px;"/> </div> <div id="links" class="container5"> <h2>Домоводство</h2> <p>Здесь Ваш текст</p> </div> <div id="pozit" class="container5"> <h2>Позитивчик</h2> <p>Здесь Ваш текст</p> </div> <p align="center">Created by <a href="http://bedrichrios.com">Bedrich Rios</a><br /> Навигация составлена для сайта <a href="../index.html">www.valvas.ru</a> </a> </p>

Раздел "Кулинария" я оставила так, как у меня он оформлен на сайте.

Теперь для нашей навигации зададим стили.

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

/*Header*/ #header5 /*Стили для заголовка названия меню. */ { width: 100%;/*ширина*/ margin: 0 auto;/*убираем отступы*/ font-size: 12px;/*размер шрифта*/ font-family: "Helvetica Neue", Helvetica, sans-serif;/*семейство шрифта*/ font-weight:bold;/*начертание шрифта*/ margin-left:450px;/*величина отступа от левого края элемента*/ } #header5 h1/*Стиль для заголовка меню. Можно убрать заголовок первого уровня и останутся только пункты меню.*/ { color:#00C; font-weight: normal; margin: 30px 0 30px 0;/*величина отступа сразу для всех сторон элемента*/ letter-spacing: .04em;/*интервал между символами*/ margin-left:160px; } #header5 ul/*Стили для пунктов меню*/ { list-style: none;/*стиль маркера списка*/ margin: 0 ; padding: 0;/*значение полей вокруг содержимого элемента*/ } #header5 ul li { float: left;/*Определяет, по какой стороне будет выравниваться элемент*/ text-align: left;/*Выравнивание текста по левому краю*/ } #header5 ul li a /*Стили ссылок пунктов меню*/ { display: block;/*Элемент показывается как блочный.*/ color: #000000;/*Цвет*/ text-decoration: none;/*Отменяет все эффекты, в том числе и подчеркивания у ссылок*/ text-transform: uppercase;/*Все символы текста становятся прописными*/ margin-right: 20px;/*величина отступа от правого края элемента*/ } #header5 ul li a:hover /*Стили ссылок пунктов меню при наведении*/ { text-decoration: underline; color: #CD0B0B; } /*Containers*/ .container5/*Стили блока с информацией пунктов меню*/ { width: 500px; height: 400px;/*высота*/ margin: 30px auto; padding: 10px 20px; border: 10px solid #fff;/*толщина, стиль и цвет границы вокруг элемента*/ color: #fff; font-size:14px; line-height: 2em;/*межстрочный интервал текста*/ } .container5 h2 /*Стили заголовка в блоке*/ { padding: 5px 10px; width: 200px; margin-bottom:20px;/*величина отступа от нижнего края элемента*/ } .container5 ul { list-style-position: inside;/*Маркер является частью текстового блока и отображается в элементе списка.*/ margin: 0; padding: 0; } .container5 ul li { margin-bottom: 10px; }/*Стили списков в блоке*/ .container5 a { color: #fff; } .container5 a:hover/*Стили ссылок в блоке информации*/ { background: #fff; color: #555; } #home { background: #15add1; } /*Здесь стили блоков с информацией. Здесь их бэкграунды и бэкграунды в заголовках.*/ #home h2 { background: #007aa5; border:#F20E0E solid 2px; border-radius:6px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } #about { background: #FF1E0B; } #about h2 { background: #B70000; border:#007AA5 solid 2px; border-radius:6px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } #contact { background: #f80083; } #contact h2 { background: #af005e; border:#f8fb14 solid 2px; border-radius:6px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } #awards { background: #f18300; } #awards h2 { background: #bb5f00; border:#26A219 solid 2px; border-radius:6px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } #links { background: #98c313; } #links h2 { background: #6f9a00; border:#F148EC solid 2px; border-radius:6px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } #pozit { background: #F148EC; } #pozit h2 { background: #A20991; border:#F7B425 solid 2px; border-radius:6px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } /*Self-Clearning Rules*/ ul#navigation:after { content: "."; display: block; visibility: hidden; clear: both; height: 0; } * html ul#navigation { height: 1px; } ul#navigation { min-height: 1px; }