YOUSELLER
Среда, 19.02.2020, 05:11
Приветствую Вас Гость | RSS
 
Главная Каталог статей и уроковРегистрацияВход
Меню сайта
Категории каталога
HTML [4]
CSS [8]
Для сайта [4]
Электронные деньги [2]
Разное [6]
Мини-чат
200
Наш опрос
Оцените мой сайт
Всего ответов: 18
Главная » Статьи » Уроки » CSS

Интересное CSS меню
В этом уроке мы будем учиться делатьинтересное меню с использованием CSS.

Вот набор графики, который Вам понадобится для реализации меню (скачать его можно здесь http://youseller.my1.ru/images.zip ). Всего 7 изображений. Желательно их поместить в папку images. Если этого не получится, везде в коде исправьте путь до изображений.



1. Перейдем к HTML части:

Основу меню у нас будет составлять список, созданный тэгом <ul>.

Каждая ссылка формируется через тэг <a>, при этом, у каждой из ссылок должен быть уникальный класс.

Кроме этого мы должны внутри каждой ссылки оставить пустой элемент <span></span>, который нам понадобится для создания эффекта, при котором одно изображение сменяет другое при наведении мыши.

<ul id="menu">
<li><a href="#" class="home">Home <span></span></a></li>
<li><a href="#" class="about">About <span></span></a></li>
<li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

2. Теперь перейдем к CSS стилям

Стиль для элемента #menu

Здесь мы сбрасываем все отступы, ставим стиль списка в положение none, ставим на фон большое изображение и прописываем значение ширины и высоты элемента, которые равны размеру того самого фонового изображения.

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

Стиль для элемента #menu span

Устанавливаем display:none чтобы по-умолчанию этот элемент был невидим. И добавляем свойство position:absolute, чтобы затем можно было точно в это место вставить новое изображение при наведении курсора мыши на ссылку.

#menu span {
display: none;
position: absolute;
}

Стиль для элемента #menu a

Ключевая особенность здесь в свойстве text-indent. Мы специально устанавливаем значение этого свойства в отрицательном диапозоне (-900%), чтобы текст был невидим.

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

Стиль для элемента #menu a:hover

Когда курсор мыши наводят на ссылку, фоновое изображение меняет расположение с верхнего угла на нижний.

#menu a:hover {
background-position: left bottom;
}

Стиль для элемента #menu a:hover span

Когда курсор мыши наводят на ссылку элемент span получает значение display:block.

#menu a:hover span {
display: block;
}

Стиль для элемента #menu .home

Здесь мы задаем ширину, высоту и фоновое изображение, конкретно для первого элемента навигации. На предыдущем шаге для всех элементов <a> мы уже задали значение позиционирования в postition:absolute. Теперь же для элемента с классом .home мы можем через свойства left и top задать конкретные значения того, где этот элемент должен быть расположен.

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}

Стиль для элемента #menu .home span

Здесь мы задаем ширину, высоту, фон и позицию для элемента внутри ссылки с классом .home (изображение, которое замещает начальное при наведении курсора мыши).

#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

Стиль для элемента #menu .about

Скопируйте свойства от элемента .home и переименуйте в .about. А теперь просто измените значения ширины (width), высоты (height), фона (background), позиции от левого края (left), и позиции от верхнего края (top) на те, которые видите ниже.

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}

#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

Стиль для элемента #menu .rss

Тоже самое проделываем для свойства элемента меню с классом .rss

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}

#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

В итоге стили, которые отвечают за работоспособность меню у Вас будут выглядеть так:

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

#menu span {
display: none;
position: absolute;
}

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

#menu a:hover {
background-position: left bottom;
}

#menu a:hover span {
display: block;
}

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}

#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}

#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}

#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Пример того, что получилось у меня Вы можете посмотреть на этой странице (http://ruseller.com/examples/cssmenu/menu.php).

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

Категория: CSS | Добавил: Денис (10.08.2008) | Автор: Евгений Попов
Просмотров: 386 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
[05.08.2008][Евгений Попов]
А вы делаете эти дизайнерские ошибки на своём сайте? (1)
[05.08.2008][Евгений Попов]
5 точек потенциального клиента, которые должен знать каждый бизнесмен. (0)
[05.08.2008][Евгений Попов]
5 причин, по которым люди выберут Ваш товар. (0)
[05.08.2008][Евгений Попов]
Как превратить Ваш сайт в магнит влияния на клиентов? (0)
[05.08.2008][Евгений Попов]
Электронная коммерция и электронный (онлайн) бизнес. В чём различия? (0)
[05.08.2008][Евгений Попов]
Наступило лучшее время для начала бизнеса в Сети. (0)
[05.08.2008][Евгений Попов]
Бесплатный хостинг для ведения бизнеса - забудьте! (0)
[05.08.2008][Евгений Попов]
Цель - это путь к вершине! (0)
[05.08.2008][HTML]
Как замаскировать тэг H1 (1)
[05.08.2008][HTML]
Урок: Как правильно использовать фаил robots.txt для запрета индексации фаилов и папок? (0)
Поиск
Друзья сайта
php5.ru
[17.08.2008][Видеоуроки]
Light Box 2 - создание слайдшоу на Вашем сайте (0)
[06.08.2008][Программы]
FileZilla - FTP клиент (0)
[16.08.2008][Видеоуроки]
Как проверить заполнены ли все поля формы (0)
[05.08.2008][Скрипты]
Движок форума PHPBB3 (3)
[17.08.2008][Видеоуроки]
Как создать 3D обложку быстро и бесплатно? (2)
[17.08.2008][Видеоуроки]
Как сделать шапку сайта, если ширина сайта задана в процентах? (3)
[17.08.2008][Видеоуроки]
Создаем меню для сайта через Интернет (0)
[08.08.2008][Видеоуроки]
Как создать форму обратной связи для сайта. (0)
[16.08.2008][Видеоуроки]
Как скрыть элемент сайта от посторонних глаз (0)
[17.08.2008][Видеоуроки]
Как избавиться от спама с помощью Google? (1)
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright © 2020