Страница 1 из 11
Форум » Web дизайн » HTML и CSS » Простое динамическое меню сайта (без скриптов)
Простое динамическое меню сайта
Reddy Дата: Четверг, 24.06.2010, 00:27 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Уровень: Легкий
Шагов: 2

01. Перво наперво создадим HTML документ (назовём его index.html), в котором мы будем тренироваться - для этого откроем стандартный блокнот в MS Windows, и впишем туда следующие строчки:

Code

<html>
<head>
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Наша рабочая область -->

</body>
</html>

Теперь добавим наше меню (Естественно, что все названия и количество пунктов вы можете менять на своё усмотрение). Используем стандартный набор тегов <ul> и <li>

Code

<html>
<head>
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Меню сайта -->
<div id="container">
<ul class="navigation">
<li><a href="/" title="Ваш текст описания">ссылка №1</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №2</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №3</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №4</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №5</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №6</a></li>
</ul>
</div>

</body>
</html>

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

02. Создадим, с помощью блокнота, файлик style.css - это будет наша рабочая таблица стилей. Сохранить её нужно в той же папке, что и index.html . Для начала добавим параметры для "тела" нашей стрпницы

Code
body {
     background: #f0f0f0;
     font-family: Verdana;
     font-size: 11px;
}

Здесь мы задаём цвет фона страницы, её основной шрифт и его размер. Теперь добавим параметры непосредственно меню:

Code
#container {
     margin-top: 30px; /* отступ от верхнего края */
}
.navigation li {
     float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа. Необходимо для создания горизонтального меню */
     list-style-type: none; /* убираем маркеры для списка.*/
     padding: 3px; /* отступы между блоками меню */
}

Теперь наше меню стало горизонтальным (благодаря параметру float: left;). Пришло время следующего шага:

Code

.navigation li a {
     background: #dfdfdf; /* цвет фона неактивного меню */
     border: 1px solid #afafaf; /* цвет и размер рамки */
     color: #7f7f7f; /* цвет букв */
     display: block; /* отображает данный элемент как блок*/
     height: 40px;  /* высота блока */
     line-height: 40px; /* параметры height и line-height , желательно, должны быть одинаковыми - так текст будет точно отцентрирован по вертикали */
     text-align: center; /* выравнивание по горизонтали */
     width: 150px;  /* ширина блока */
}

теперь осталось только добавить последний штрих - поведение блока при наведении на него мышкой:

Code
.navigation li a:hover {
background: #ffffff; /* цвет фона активного меню */
}

всё, меню готово. Можно вместо цвета использовать фоновые изображения ( background: url('ссылка к картинке'); ), да и вообще менять всё под свои вкусы и желания :)

Пример данного меню Вы можете скачать с нашего каталога файлов

спец по кнопачкам
 
Mellow Дата: Четверг, 24.06.2010, 22:44 | Сообщение # 2
Mellow
Прохожий
Сообщений: 8
Репутация: 3
Страна: Украина
Статус: Offline
О... пригодится, думаю. yes Опять же спасибо, Reddy.
 
Reddy Дата: Четверг, 24.06.2010, 23:00 | Сообщение # 3
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Quote (Mellow)
Опять же спасибо, Reddy.

та лан blush

спец по кнопачкам
 
Mercenary Дата: Среда, 06.07.2011, 09:42 | Сообщение # 4
Mercenary
Прохожий
Сообщений: 1
Репутация: 0
Страна: Украина
Город: Краматорск
Область: Донецкая Область
Статус: Offline
полезно просто и познавательно, спасибо
Сообщение отредактировал Mercenary - Среда, 06.07.2011, 09:44
 
Reddy Дата: Четверг, 07.07.2011, 01:20 | Сообщение # 5
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Quote (Mercenary)
полезно просто и познавательно, спасибо


Всегда пожалуйста :) Рад, если материал действительно оказался полезным yes
спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » Простое динамическое меню сайта (без скриптов)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz