Скачать скрипт меню для сайта

Описание:

Многим интересно как сделать на сайте неплохое блочное меню на основе html и css, просмотрев этот мини-урок вы научитесь это делать

Картинки из cs 1.6:

Установка: Что же, для начала надо сделать на хтмл скрипт самого меню, который будет контролироваться через таблицу стилей CSS, для этого возьмем тег span и прибавим ему класс menu:
<span class="menu">
<a href="/">Главная</a>
<a href="/gb">Гостевая</a>
<a href="/load">Файлы</a>
<a href="/publ">Статьи</a>
<a href="/forum">Форум</a></span>
Между <a href=""> и </a> пишем название пункта меню, а в самом <a href="тут"> пишем ссылку, на страницу при нажатии на кнопку, добавлять можно сколько угодно пунктов меню. Все это добавляем в нужное место на странице. Далее займемся стилями CSS, которые мы назначим в тег <span class="menu"> - добавляем следующий скрипт в таблицу стилей:

.menu {height:20px;width:170px;font:400 11px Arial,Helvetica,sans-serif;text-align:left;}
.menu a:link,
.menu a:visited {background:#222;color:#ffb119;text-decoration:none;padding-left:16px;line-height:20px;display:block;font-weight:400;border:1px solid #444;text-align:left;}
.menu a:hover {background:#222;color:#ffb119;text-decoration:underline;padding-left:16px;line-height:20px;display:block;font-weight:400;border:1px solid #444;text-align:left;}

где .menu означает общий стиль меню
.menu a:link, menu a:visited - стиль меню в стандартном состоянии в виде ссылке (как и должно быть)
.menu a:hover - стиль меню при наведении на него мышкой

начнем с .menu - height:*** - высота каждого пункта меню
width - ширина
font - параметры шрифта (толщина размер шрифт)
text-align - в какую сторону выравнивать текст (left,right,center,justify)

Далее идем к .menu a:link, menu a:visited, где
background отвечает за цвет фона {можно поставить и фоновое изображение типа "background:url('ссылка на изображение');"}
color - цвет шрифта
text-decoration - декорация шрифта (напр. стандартный или подчеркнутый)
padding-left - расстояние между началом текста и левым краем меню (можно убрать)
line-height - высота отдельного блока меню
display:block; - этот тег делает меню блоком (и авт. переносит следующие пункты меню вниз как тег br)
border: 1px solid #444; - размер рамки каждого пункта меню, ее стиль (solid) и цвет хтмл

Содержание .menu a:hover может быть пустым или вообще не назначенным - таким образом меню никак не будет меняться при наведении на него, но можно и поэкспериментировать назначив в .menu a:link (visited) и .menu a:hover разные значения цвета фона, текста, размер текста и прочее, что сделает ваше меню достаточно интересным. Спасибо за внимание, надеюсь вам помогла эта статья - все вопросы пишите в комментариях

Категория: Скрипты для CS 1.6 Сайта

Дата: 10.07.2025

Добавил: Админ

Скачать файл