Помощь студентуСтатьиМои статьиCSS меню для начинающих
09 Декабря 2024, Понедельник
10:52
>>> Качественная веб-разработка <<<
10:52
Меню сайта
>Г Л А В Н А Я

>Ф А Й Л Ы

>С Т А Т Ь И

>Р Е Ф Е Р А Т Ы

>Ф О Р У М

>О Т З Ы В Ы

>Т Е С Т Ы

>F l a s h И Г Р Ы

>Ф О Т О Ш О П


Советуем...
Шпора по матану Интегралы, Ряды
Очень хорошая шпора по Математическому анализу. Удобно сделана: скачал, распечатал, разрезал. Почти все темы по интегралам и рядам. Делал для себя, поэтому сделана хорошо. формат .doc

Выдвигается контент при нажатии на кнопку
Выезжает определенная информация при нажатии на кнопку. БЕЗ ява скриптов.

Пример смотрите, нажав справа в блоке Пользователь "Доп. инф-а"



Механика, колебания и волны, молекулярная физика - Савельев И.В.
Очень хороший учебник по физике, все подробно и понятно описывается, все темы по Механике, Колебаниям и Молекулярке. Советую качать тем, кто начал учить только за день до экзамена.

Последовательности Паскаль
Найти число последовательности, у которого количество одинаковых цифр максимально.


Опрос
Зацените дизайн сайта
Всего ответов: 382

Сотрудничество
Поставьте себе на сайт и сообщите мне


код кнопки:



Статьи
Главная » Статьи » Мои статьи

CSS меню для начинающих

Фон для меню

Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:

Графические кнопочки

Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop’ом:

  1. Создаем новый файл размером этак 144×58px. (размер ссылки для первого элемента в меню)
  2. Наполняем графическим содержимым сей пункт меню (у меня это лишь надпись выполненная забавным шрифтом):
  3. Далее увеличим размер полотна (canvas size) в два раза:
  4. И дорисуем внешний вид элемента меню для реализации события hover
      
    Как сия конструкция будет работать? Да очень просто – ссылке мы явно указываем размер 144×58px, а но событие mouseover перемещаем фоновое изображение вверх:
  5. Создадим новый файл с произвольным размером и текстом – это будет наша подсказка к ссылке
  6. Повторим все предыдущие пункты для создания всех пунктов меню, в результате анаших манипуляций у нас должен получиться вот такой набор изображений:

HTML код

Закончили строить из себя дизайнеров, пора начинать кодить – создадим не нумерованный список – <ul>:

  • элементу <ul> присвоеим id=”menu”
  • каждой ссылке <a> присвоим уникальное имя класса
  • Внутрь тэга <a> закинем пустой тэг <span> (понадобиться для реализации подсказок к ссылкам)
1.<ul id="menu">
2.<li><a href="#" class="home">Home <span></span></a></li>
3.<li><a href="#" class="about">About <span></span></a></li>
4.<li><a href="#" class="rss">RSS <span></span></a></li>
5.</ul>

 

CSS код

#menu
Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative . Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.

01.#menu {
02.    list-style: none;
03.    padding: 0;
04.    margin: 0;
05.    width: 774px;
06.    height: 210px;
07.    background: url(images/menu-bg.jpg) no-repeat;
08.    position: relative;
09.}

#menu span
Для элементов span параметр display выставляем в none (по умолчанию не будут отображаться). Так же выставляем position как absolute.

1.#menu span {
2.    display: none;
3.    position: absolute;
4.}

#menu a
Для ссылок нам необходимо спрятать текст, для этого параметру text-indent присваиваем негативное значение (-900%), и текст будет скрыт.

1.#menu a {
2.    display: block;
3.    text-indent: -900%;
4.    position: absolute;
5.    outline: none;
6.}

#menu a:hover
Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:

1.#menu a:hover {
2.    background-position: left bottom;
3.}

#menu a:hover span
Так же по событию mouseover необходимо отобразить подсказку

1.#menu a:hover span {
2.    display: block;
3.}

#menu .home
Теперь нам необходимо правильно расставить элементы меню. Для начала укажем размер элемента и фоновое изображение, а затем займемся позиционированием, будем изменять параметры left и top пока не почувствуем морального удовлетворения от внешнего вида меню:

1.#menu .home {
2.    width: 144px;
3.    height: 58px;
4.    background: url(images/home.gif) no-repeat;
5.    left: 96px;
6.    top: 96px;
7.}

#menu .home span
Теперь проведем подобную операцию для всплывающей подсказки

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

#menu .about

Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.

01.#menu .about {
02.    width: 131px;
03.    height: 51px;
04.    background: url(images/about.gif) no-repeat;
05.    left: 338px;
06.    top: 97px;
07.}
08.#menu .about span {
09.    width: 40px;
10.    height: 12px;
11.    background: url(images/about-over.gif) no-repeat;
12.    left: 44px;
13.    top: 54px;
14.}

#menu .rss

Повторим для .rss

01.#menu .rss {
02.    width: 112px;
03.    height: 47px;
04.    background: url(images/rss.gif) no-repeat;
05.    left: 588px;
06.    top: 94px;
07.}
08.#menu .rss span {
09.    width: 92px;
10.    height: 20px;
11.    background: url(images/rss-over.gif) no-repeat;
12.    left: 26px;
13.    top: -20px;
14.}

Всё в одном

01.#menu {
02.    list-style: none;
03.    padding: 0;
04.    margin: 0;
05.    width: 774px;
06.    height: 210px;
07.    background: url(images/menu-bg.jpg) no-repeat;
08.    position: relative;
09.}
10.#menu span {
11.    display: none;
12.    position: absolute;
13.}
14.#menu a {
15.    display: block;
16.    text-indent: -900%;
17.    position: absolute;
18.    outline: none;
19.}
20.#menu a:hover {
21.    background-position: left bottom;
22.}
23.#menu a:hover span {
24.    display: block;
25.}
26.#menu .home {
27.    width: 144px;
28.    height: 58px;
29.    background: url(images/home.gif) no-repeat;
30.    left: 96px;
31.    top: 73px;
32.}
33.#menu .home span {
34.    width: 86px;
35.    height: 14px;
36.    background: url(images/home-over.gif) no-repeat;
37.    left: 28px;
38.    top: -20px;
39.}
40.#menu .about {
41.    width: 131px;
42.    height: 51px;
43.    background: url(images/about.gif) no-repeat;
44.    left: 338px;
45.    top: 97px;
46.}
47.#menu .about span {
48.    width: 40px;
49.    height: 12px;
50.    background: url(images/about-over.gif) no-repeat;
51.    left: 44px;
52.    top: 54px;
53.}
54.#menu .rss {
55.    width: 112px;
56.    height: 47px;
57.    background: url(images/rss.gif) no-repeat;
58.    left: 588px;
59.    top: 94px;
60.}
61.#menu .rss span {
62.    width: 92px;
63.    height: 20px;
64.    background: url(images/rss-over.gif) no-repeat;
65.    left: 26px;
66.    top: -20px;
67.}

Это всё, протестировать меню можете тут, а скачать пример тут.



Источник: http://anton.shevchuk.name/html-and-css/web20-css-menu/
Категория: Мои статьи | Добавил: DiP_admin (16 Августа 2009) | Автор: Дмитрий E W
Просмотров: 3649
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Разделы новостей
Мои статьи [24]
Учебные статьи [9]
Заработок [0]
ВЕБ-мастеру [0]
Online-сервисы [0]
Интересное [0]

Статистика

Яндекс.Метрика


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

Все пользователи

Яндекс цитирования Rambler's Top100

Сайт работает с 2008 года