Простая навигация на CSS

Опубликовал 23.07.2010 в рубрике css | 4 комментария(ев)

Простая навигация на CSS

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

На многих форумах задаются вопросы: “Как сделать постраничную навигацию в конце сайта на HTML сайтах?” Это несложно, когда знаешь немного html и css. Раньше я был в группе поддержки немецкой CMS Jimdo. Там пользователи форума тоже задавались похожим вопросом. Отсюда собственно и родилась тема урока.

Хочу представить вам 22 отличных панели навигации для ваших html сайтов. Работают они отлично, проверял сам. Встраиваются они различными способами. Один из которых – это просто вставить css в <head> и прописать html в <body>

Я не стану создавать отдельный файл css, а просто пропишу стилизацию меню в области <head> нашего сайта.

Пропишем css в область <head>

<!-- Данный код вставляем в head //-->
<style type="text/css">

/* Тема: digg */
DIV.digg {
        PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
        BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
        BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
        BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
        BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
        BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
/* Конец кода */

</style>

Html код для этого меню будет выглядеть следующим образом:

HTML код вставляем в <body>

<!-- Так выглядит html код меню //-->
<div class="digg">
<span class="disabled"> < </span><!-- Отключение кнопки //-->
<span class="current">1</span><!-- Активируем подсветку кнопки и делаем ее некликабельной //-->
<a href="#?page=2">2</a><!-- Ссылка на другую страницу //-->
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>
...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</span></div>

Из кодов видно, что css и html мы присвоили класс digg. Это просто название данной темы. Название темы вы можете придумать сами.

После того, как вы скачаете исходник, можно открыть index.html и выбрать понравившееся меню визуально, а дальше с помощью блокнота открываете исходники и копируете коды css и html (соответственно css.css и index.html). Пользуйтесь лучше программой Notepad++. Тогда у вас не возникнет проблем с кодировками и BOM.

Информация о загрузках

Простая навигация на CSS (50.2 KB, 36 скачиваний)
Файл залит 23.07.2010 в 8:44

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация