CSS меню

remlin · November 3, 2010

Здравствуйте. Сделал меню на css с использованием списка Ul. Подскажите механизм, как в зависимости от открытой в данный момент ссылки меню, сделать ее активной (подсветить другим цветом например.), чтобы в каждой web-странице не прописывать активное меню, например как здесь:

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

Если напримев у меня 20 меню, то мне тогда придется в 20 web-страницах прописывать активное меню (class="item_active"). что очень неудобно.

Спасибо.

CoDy · November 3, 2010

Можно так попробовать, но это при условии, что страници генерируются динамически и есть доступ к скриптам.

Надеюсь из кода все будет понятно.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251">
	<title></title>
	<style type="text/css">
	  // стили для активного меню
	  .menu_1 #menu_1,
	  .menu_2 #menu_2,
	  .menu_3 #menu_3,
	  .menu_4 #menu_4{
		font-weight:bold;
	  }
	</style>
  </head>
  <!-- Имя класса соответствует, идентификатору активного меню -->
  <body class="menu_2">
  <ul>
	<li id="menu_1">Меню</li>
	<li id="menu_2">Меню</li>
	<li id="menu_3">Меню</li>
	<li id="menu_4">Меню</li>
  </ul>
  </body>
</html>

psywalker · November 3, 2010

JS тебе в помощь.

remlin · November 4, 2010

Спасибо.. вот тут еще пример нашел, похожий на пример Cody: http://www.yashmanov-av.ru/post.php?id=8

Edited November 4, 2010 by remlin

Justnewone · November 4, 2010

Вам надо будет передавать скриптом идентификатор активного пункта, класс или id. Не спец по js, но вероятно можно составить таблицу соответствия урл и активности пунктов меню, и проделывать выбор активного класса на стороне клиента, но это уже от безисходности, чтоли...

Vind · November 4, 2010

используй javascript

-O-J-A- · November 5, 2010

Вот делал работу, подобное было:

<div id="menuDiv"> 
<a class="m" href="">Главная</a> 
<a class="m" href="">Услуги</a> 
<a class="m" href="">Помощь</a> 
</div> 

<script type="text/javascript">try { var nl=document.getElementById('menuDiv').getElementsByTagName('a'); var found=-1; var url=document.location.href+'/'; var len=0; for (var i=0;i<nl.length;i++){ if (url.indexOf(nl[i].href)>=0){ if (found==-1 || len<nl[i].href.length){ found=i; len=nl[i].href.length; } } } if (found>=0){ nl[found].className='ma'; } } catch(e){}</script> 

</div>

m - неактивный класс.

ma - активный

Edited November 5, 2010 by -O-J-A-

Sign In

CSS меню

Question

remlin

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

CoDy

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

remlin

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Vind

Link to comment

Share on other sites

-O-J-A-

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information