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

maksua

  • Осваиваюсь на форуме
  • 44
  • 0 / 0
Стыдно и больно говорить, но уже третий день бьюсь над созданием "Графического CSS-меню", чтобы человеку находящемуся на странице например "Портфолио" выводилась картинка активного меню, то есть не чёрного а оранжевого цвета a:active!
Но почему-то это не срабатывает! При наведении на пункты меню картинка меняется, значит a:hover работает, а вот уже перейдя по ссылке функция  a:active не срабатывает!

Вот нашёл на одном сайте статью как это пошагово делать, но не получается АКТИВНАЯ ссылка
Вот: http://www.codenet.ru/webmast/html/css-menu/
Знатоки, помогите!

*

Efanych

  • Глобальный модератор
  • 4659
  • 638 / 0
  • Меняю свою жизнь на 360°!
Попробуйте
li#current a
Создание сайтов, шаблонов, помощь в решении проблем.
*

maksua

  • Осваиваюсь на форуме
  • 44
  • 0 / 0
Спасибо за мгновенный ответ, но куда именно li#current a вставлять?
*

Efanych

  • Глобальный модератор
  • 4659
  • 638 / 0
  • Меняю свою жизнь на 360°!
Туда же, куда вы a:active хотели вставить
Создание сайтов, шаблонов, помощь в решении проблем.
*

maksua

  • Осваиваюсь на форуме
  • 44
  • 0 / 0
"Efanych", я вставил как ты и советовал li#current a в место a:active , но не помогло:

Ребята, помогите мне решить этот вопрос, с меня пиво *DRINK*:

вот исходный код:

Код
		<ul id="navbar">
<li class="about"><a href="#" title="О компании">О компании<span>&nbsp;</span></a></li>
<li class="facility active"><a href="#" title="Услуги">Услуги<span>&nbsp;</span></a></li>
<li class="portfolio"><a href="#" title="Портфолио">Портфолио<span>&nbsp;</span></a></li>
<li class="vacancy"><a href="#" title="Вакансии">Вакансии<span>&nbsp;</span></a></li>
<li class="faq"><a href="#" title="Частые вопросы">Частые вопросы<span>&nbsp;</span></a></li>
</ul>




Код
#navbar {
position: absolute;
top: 35%;
left: 50%;
margin: 0 0 0 -265px;
padding: 0;
background: url(../img/nav-bg.gif) no-repeat 0 0;
width: 536px;
height: 93px;
}
#navbar li {
position: relative;
margin: 0;
padding: 0;
top: 50px;
list-style: none;
float: left;
height: 29px;
}
#navbar li a {
display: block;
position: absolute;
top: 0;
left: 0;
font: 15px/29px "Arial Narrow";
text-decoration: none;
white-space: nowrap;
color: #666666;
height: 29px;
overflow: none;
}
#navbar li a:hover {
color: #ff6600;
}
#navbar li a span {
cursor: pointer;
display: block;
position: absolute;
float: left;
top: 0;
left: 0;
background-position: 0 0;
background-repeat: no-repeat;
height: 29px;
}
#navbar li a:hover span {
background-position: 0 -29px;
}
#navbar li.active a span {
background-position: 0 -29px;
}
#navbar li.about, #navbar li.about a , #navbar li.about a span {
width: 110px;
}
#navbar li.about a span {
background-image: url(../img/n1.gif);
}
#navbar li.facility, #navbar li.facility a , #navbar li.facility a span {
width: 101px;
}
#navbar li.facility a span {
background-image: url(../img/n2.gif);
}
#navbar li.portfolio, #navbar li.portfolio a , #navbar li.portfolio a span {
width: 108px;
}
#navbar li.portfolio a span {
background-image: url(../img/n3.gif);
}
#navbar li.vacancy, #navbar li.vacancy a , #navbar li.vacancy a span {
width: 103px;
}
#navbar li.vacancy a span {
background-image: url(../img/n4.gif);
}
#navbar li.faq, #navbar li.faq a , #navbar li.faq a span {
width: 114px;
}
#navbar li.faq a span {
background-image: url(../img/n5.gif);
}
*

Efanych

  • Глобальный модератор
  • 4659
  • 638 / 0
  • Меняю свою жизнь на 360°!
Что это за меню? В Joomla класс автоматически присваивается активному пункту. А у вас что за меню?
Создание сайтов, шаблонов, помощь в решении проблем.
*

maksua

  • Осваиваюсь на форуме
  • 44
  • 0 / 0
Что это за меню? В Joomla класс автоматически присваивается активному пункту. А у вас что за меню?
Вот по этому примеры пытался себе сделать меню: http://www.codenet.ru/webmast/html/css-menu/
А меню хотелось  с шариками, как на этом сайте http://stroyban.com.ua/
Я у себя всё сделал и шарики вывел, при наведении синий шарик меняется на красный, а вот как его заставить быть активным когда активен посещаемый пункт меню, ума не приложу!
Как такое реализовать, помогите
*

wfedin

  • Завсегдатай
  • 1277
  • 102 / 0
Попробуйте
li#current a
а почему свойство через # пытаетесь для класса прописать?
*

maksua

  • Осваиваюсь на форуме
  • 44
  • 0 / 0
Re: Нужен совет по графическому CSS-меню!
« Ответ #10 : 03.10.2011, 17:48:57 »
li.active, li.current - не помогает?
Вроде нет не помогает, но может я что-то не то делаю, не знаю вот и прошу совета!

а почему свойство через # пытаетесь для класса прописать?
Свойство через #, это я содрал вот с этого ФАКа http://www.codenet.ru/webmast/html/css-menu/
А что данное представление свойств через # является не правельным и на что-то влияет?

*

wfedin

  • Завсегдатай
  • 1277
  • 102 / 0
Re: Нужен совет по графическому CSS-меню!
« Ответ #11 : 03.10.2011, 18:06:14 »
Если меню создаёте через стандартный модуль меню, тогда в стилях у вас куча мусора, работает
#navbar ul li.active {background: url("../images/картинка.png") scroll no-repeat 0 0 transparent;}

или

#navbar ul li.active а

Я бы на вашем месте переписал его в соответствии с http://joomlaforum.ru/index.php/topic,163850.0.html
*

Taatshi

  • Глобальный модератор
  • 4967
  • 464 / 1
  • Верстаем и немножко кодим. Обращайтесь ;)
Re: Нужен совет по графическому CSS-меню!
« Ответ #12 : 03.10.2011, 23:26:29 »
.menu_top li.active {нужный шарик))}

_top - суффикс класса меню
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню

Автор s120367

Ответов: 0
Просмотров: 244
Последний ответ 03.06.2018, 13:02:55
от s120367
Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 411
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3570
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 6412
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 676
Последний ответ 12.07.2017, 21:09:01
от wectra