0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 5125 Просмотров
*

ilunium

  • Новичок
  • 3
  • 0 / 0
Здравствуйте.
Появился вопрос по стилизации меню.

Задача в том, что бы при наведении на какой-либо пункт, ему задавался СВОЙ собственный фон, отличный от других. В какую сторону копать?

Для наглядности, обрисую.

Имеем меню:


То есть если навести на пункт2 то получим


При наведении на пункт3 получим
*

ilunium

  • Новичок
  • 3
  • 0 / 0
Re: Меню. Стиль для каждого пункта
« Ответ #1 : 23.07.2010, 19:06:56 »
Не могли бы Вы рассказать, в какую сторону капать, с небольшим примером, мыслей нет не каких >:(
*

volod3000

  • Захожу иногда
  • 379
  • 51 / 0
  • Чтобы ничего не делать, нужно многое сделать.
Re: Меню. Стиль для каждого пункта
« Ответ #2 : 23.07.2010, 19:43:38 »
Вот почитай, а дальше необходим учебник по CSS и терпение.
Мало открыть человеку глаза,
большинство еще просит указать дорогу
и ждет волшебного пенделя.
*

ilunium

  • Новичок
  • 3
  • 0 / 0
Re: Меню. Стиль для каждого пункта
« Ответ #3 : 23.07.2010, 21:08:54 »
Спасибо за ответы!
С учебником по CSS дружу постоянно, т.к. не профессионал, а любитель. Написать такую менюшку могу, а вот не получается прикрутить к Джу. А вот как разукрасить каждый пункт, одной меню не понял. Снизу привёл код меню, который работает в текущий момент. Происходит замена фона  при наведении, а как установить уникальный фон для каждого пункта меню при наведении? От чего отталкиваться

Код
ul#mainlevel-nav {
list-style: none;
padding: 0;
margin-top: 0px;
}

ul#mainlevel-nav li {
float: left;
border-left: 1px solid #dbdbdb;
display: block;
background: url('../images/navta.png') repeat;
width: auto !important;
font-size: 16px;
font-weight: bold;
text-transform: none;
line-height: 30px;
white-space: nowrap;
}

ul#mainlevel-nav a:link, ul#mainlevel-nav a:visited {
padding-left: 15px;
padding-right: 15px;
color: #FFFFFF;
text-decoration: none;
}

ul#mainlevel-nav a:hover {
display: block;
background: url('../images/navth.png') repeat;
width: auto !important;
font-size: 16px;
font-weight: bold;
text-transform: none;
line-height: 30px;
white-space: nowrap;
}
*

volod3000

  • Захожу иногда
  • 379
  • 51 / 0
  • Чтобы ничего не делать, нужно многое сделать.
Re: Меню. Стиль для каждого пункта
« Ответ #4 : 23.07.2010, 23:59:38 »
Грубо так :

а           - отображение при загрузке
a:hover  - отображение при наведение
a:visited - отображение после нажатия
Мало открыть человеку глаза,
большинство еще просит указать дорогу
и ждет волшебного пенделя.
*

OLEGA85

  • Осваиваюсь на форуме
  • 18
  • 1 / 0
Re: Меню. Стиль для каждого пункта
« Ответ #5 : 03.09.2013, 15:38:44 »
Зависит от того какой у вас тип меню, привязку делайте по ItemID
Можно по подробнее как сделать привязку по ItemID?
« Последнее редактирование: 03.09.2013, 16:35:53 от OLEGA85 »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Выподающее меню

Автор aspidy

Ответов: 3
Просмотров: 3961
Последний ответ 20.01.2015, 10:11:26
от aspidy
Yootheme planet + flashxml флеш поверх выпадающего меню

Автор maxsim

Ответов: 2
Просмотров: 4961
Последний ответ 10.10.2013, 19:05:55
от Germanius
Выпадающее меню на Joomla

Автор zeus07

Ответов: 10
Просмотров: 12379
Последний ответ 17.09.2013, 14:27:49
от Doc
Как реализовать меню Joomla 1.5.26 + шаблон yoo_flux 1.5.0?

Автор OLEGA85

Ответов: 0
Просмотров: 5163
Последний ответ 03.09.2013, 18:50:23
от OLEGA85
Точки перед пунктами меню

Автор rk3dnp

Ответов: 6
Просмотров: 11936
Последний ответ 01.09.2013, 16:39:53
от beliyadm