Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Подсветка активной ссылки в меню

Автор: Marlik 14.8.2012, 00:25

Доброго времени суток, есть менюшка, при нажатии пункта меню(ссылка), ссылка должна остаться активной, a:active не срабатывает, гуглю, туплю и все никак, может кто встречался.

Код


#menu{
 width: 810px;
 margin: 10px 0 0 0; 
 padding: 0 0; 
 font-size: 20px;
 text-decoration: none;
 font: Arial, Verdana, Helvetica, sans-serif; 
 float: left;  
}

 #menu a, a:link {
 color: #333333;
 font-size: 20px;
 text-decoration: none;
 font: Arial, Verdana, Helvetica, sans-serif;
      }
   
#menu a:hover {
 color: #1f5299;
 font-size: 20px;
 text-decoration: none;
 font: Arial, Verdana, Helvetica, sans-serif;
}

#menu a.active {
 color: #1f5299; 
}

Код


<div id="menu">
<table width="100%" align="center" valign="middle">
<tr>
<td width="47%"><a href="index.html"><h12 id="logo">Company</h12></a></td>
<td><a href="#">PRODUCTS</a></td>
<td><a href="#">ABOUT US</a></td>
<td><a href="#">BLOG</a></td>
<td><a href="#">FORUM</a></td>
</td>
</table>
</div>

Спасибо.

Автор: ksnk 14.8.2012, 01:25

Цитата(Marlik @ 14.8.2012, 00:25

)

#menu a.active {

может

Код


#menu a:active {
...

Автор: Marlik 14.8.2012, 01:52

Вот спасибо!!! Только все равно не пашет... (((

Автор: IBS 14.8.2012, 10:28

А что в вашем понимании "оставаться активной"? может вам visited надо?

Автор: Marlik 14.8.2012, 11:41

Да нет не visited, при наведении(hover) и нажатии на ссылку должен поменятся цвет ссылки и ссылка должна остаться активной(active). Это же пункт меню. То есть, есть несколько пунктов меню и страницы к которым они привязаны, нажал на ссылку получил страницу, а сама ссылка показывает цветом на какой странице ты находишься. Спасибо.

Автор: IBS 14.8.2012, 11:53

Тут visited ближе всего, мне кажется ) Ну а вообще только средствами css такого не сделать

Автор: ksnk 14.8.2012, 12:04

Цитата(Marlik @ 14.8.2012, 11:41

)

нажал на ссылку получил страницу

Нажал на ссылку, броузер перешел и получил ДРУГУЮ страницу?

Автор: Marlik 14.8.2012, 12:10

Да так, и должна подсвечиваться та ссылка(то есть быть активной), на странице которой мы находимся.(надеюсь правильно сформулил) Я вот думаю как бы не пришлось яваскриптить.

Добавлено через 9 минут и 35 секунд

Цитата(IBS @ 14.8.2012, 11:53)

Тут visited ближе всего, мне кажется ) Ну а вообще только средствами css такого не сделать

visited не нужен, это же меню сайта!!! Максимум hover. Да скорее всего придется использовать другой способ. Убивает только то, что в стандарте css есть такая фича: active, а вот почему не работает, хз...

Автор: IBS 14.8.2012, 12:23

active - это момент когда ты удерживаешь ЛКМ на ссылке. Практически не заметно, как правило, т.к. это довольно быстрое действие )

Автор: Marlik 14.8.2012, 12:32

Вот спасибо, век живи век учись. Я кстати думал, что active это когда на ссылку нажал, она и осталась подсвеченной. Раньше как-то не встречался с этим, ну вот в ТЗ пункт четвертый:

1.    Site has fixed width 1024px
2.    Top bar (dark color strip) has fixed position
3.    Text  ‘Company’ is link to home page (‘index.html’)
4.    Nav menu items have a hover state and active state with color( #1f5299)
5.    Click on nav menu item should change page title (‘ABOUT US’) to corresponding menu item name.

Спасибо.

Автор: IBS 14.8.2012, 14:55

Ну в ТЗ скорее всего как раз имели ввиду то, что вы говорите(тут лучше уточнить), просто в css active - это не оно

Автор: tenmet 20.8.2012, 18:23

Вот такой вариант есть на css, это если обычное меню.
Записываем css:

Код


.active {
  color:black;}

html:

на странице "Контакты"

Код


<a href="index.html" >Главная</a>
<a href="contact.html" class="link active">Контакты</a>

на странице "Главная"

Код


<a href="index.html" class="link active">Главная</a>
<a href="contact.html" >Контакты</a>

ну и т.д