ФорумРазработкаКлиентская сторонаВерстка и оформление → "Подсветка" активной части меню

"Подсветка" активной части меню

  • chhek

    Сообщения: 61 Репутация: N Группа: Кто попало

    Spritz 10 декабря 2008 г. 22:26

    Вот ссылка - http://bitby.net/appelsin/, горизонтальное меню, нужно по-дефолту - горит только пункт "Главная" при переходе на "Новость" тоже самое…как сделать чтобы на переходе на соответсвующую часть "подсвечивалась" соответствующий пункт?
    Вот html код:
    <ul id=&quot;menu&quot; style=&quot;position: relative; z-index: 0;&quot;>
    <li><a href=&quot;http://bitby.net/appelsin&quot; target=&quot;_self&quot; title=&quot;sample&quot; class=&quot;current&quot;>Главная</a></li>
    <li><a href=&quot;http://bitby.net/appelsin/articles.php&quot; target=&quot;_self&quot; title=&quot;sample&quot;> Новости</a></li>
    <li><a href=&quot;http://bitby.net/appelsin/&quot; target=&quot;_self&quot; title=&quot;sample&quot;>Продукция</a></li>
    <li><a href=&quot;#&quot; target=&quot;_self&quot; title=&quot;sample&quot;>О нас</a></li>
    <li><a href=&quot;#&quot; target=&quot;_self&quot; title=&quot;sample&quot;>Вакансии</a></li>
    </ul>

    CSS:
    ul#menu { width: 100%; height: 43px; background: url(&quot;img/menu-bg.gif&quot;) top left repeat-x; font-size: 0.8em; font-family: &quot;Lucida Grande&quot;, Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
    ul#menu li { display: block; float: left; margin: 0 0 0 5px; height:43px;}
    ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
    ul#menu li a:hover { color: #333; }
    ul#menu li a.current{ color: #FFF; background: url(&quot;img/current-bg.gif&quot;) top left repeat-x; padding: 5px 15px 0; }
  • phpdude

    Сообщения: 26614 Репутация: N Группа: в ухо

    Spritz 10 декабря 2008 г. 22:35, спустя 9 минут 10 секунд

    тебе с помощью пхп надо отслеживать какой у тебя пункт активный и вставлять ему class=&quot;current&quot;
    Сапожник без сапог
  • Verty

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 17 декабря 2008 г. 12:54, спустя 6 дней 14 часов 18 минут

    Воспользуйся PHP либо JS.
    Если JS:
    Поставь событие при клике на меню, которое будет изменять класс или стиль. А также воспользуйся jquery для запуска функции при полной загрузки документа.

Пожалуйста, авторизуйтесь, чтобы написать комментарий!