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

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

  • chhek

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

    Spritz 11 декабря 2008 г. 9:26

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

    CSS:
    ul#menu { width: 100%; height: 43px; background: url("img/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", 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("img/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }
  • phpdude

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

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

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

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

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

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

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