Выделите меню навигации для текущей страницы

На странице с некоторыми ссылками навигации я хочу, чтобы ссылка на текущую страницу подсвечивалась так:

alt text

Ссылка " Атрибуты HTML" выделена (выделена полужирным шрифтом), так как эта ссылка займет одну из текущей страницы.

Я знаю, что это может быть реализовано вручную (просто освещено в соответствии с ссылкой, но есть ли какой-то умный способ: выделить правильную ссылку динамически и автоматически?

Ответы

Ответ 1

Вы можете установить для идентификатора тела страницы значение, представляющее текущую страницу. Затем для каждого элемента в меню вы устанавливаете класс, специфичный для этого пункта меню. И внутри вашего CSS вы можете настроить правило, которое выделит пункт меню специально...

Это, вероятно, не имеет большого смысла, поэтому вот пример:

<body id="index">
<div id="menu">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

В файле page1.html вы должны установить id тела: id="page1".

Наконец, в вашем CSS есть что-то вроде следующего:

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

Вам нужно будет изменить идентификатор для каждой страницы, но CSS остается тем же, что важно, поскольку CSS часто кэшируется и может потребовать принудительного обновления для обновления.

Это не динамический, но это один из методов, который просто сделать, и вы можете просто include меню html из файла шаблона с помощью PHP или аналогичного.

Ответ 2

CSS

.topmenu ul li.active a, .topmenu ul li a:hover {
    text-decoration:none;
    color:#fff;
    background:url(../images/menu_a.jpg) no-repeat center top;
}

JavaScript:

<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function() {
        // this will get the full URL at the address bar
        var url = window.location.href;

        // passes on every "a" tag
        $(".topmenu a").each(function() {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
                //for making parent of submenu active
               $(this).closest("li").parent().parent().addClass("active");
            }
        });
    });        
</script>

Код HTML:

<div class="topmenu">
    <ul>
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="NewsLetter.aspx">Newsletter</a></li>
        <li><a href="#">Forms</a></li>
        <li><a href="#">Mail</a></li>
        <li><a href="#">Service</a></li>
        <li style="border:none;"><a href="#">HSE</a></li>
        <li><a href="#">MainMenu2</a>
           <ul>
              <li>submenu1</li>
              <li>submenu2</li>
              <li>submenu3</li>
          </ul>
       </li>
    </ul>
</div>

Ответ 3

Мне кажется, что вам нужен текущий код как этот ".menu-current css", я спрашиваю тот же код, который работает как шарм, вы могли бы попробовать что-то вроде этого, возможно, еще какая-то конфигурация

a:link, a:active {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: darkblue;
    text-decoration: none;
}

a:hover {
    color: blue;
    text-decoration: underline;
}

div.menuv {
    float: left;
    width: 10em;
    padding: 1em;
    font-size: small;
}


div.menuv ul, div.menuv li, div.menuv .menuv-current li {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 5px;
    font-weight: normal;
}

div.menuv ul ul {
    padding-left: 12px;
}

div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
    display: block;
    text-decoration: none;
    padding: 2px 2px 2px 3px;
    border-bottom: 1px dotted #999999;
}

div.menuv a:hover, div.menuv .menuv-current li a:hover {
    padding: 2px 0px 2px 1px;
    border-left: 2px solid green;
    border-right: 2px solid green;
}

div.menuv .menuv-current {
    font-weight: bold;
}

div.menuv .menuv-current a:hover {
    padding: 2px 2px 2px 3px;
    border-left: none;
    border-right: none;
    border-bottom: 1px dotted #999999;
    color: darkblue;
}

Ответ 4

<script id="add-active-to-current-page-nav-link" type="text/javascript">
    function setSelectedPageNav() {
        var pathName = document.location.pathname;
        if ($("nav ul li a") != null) {
            var currentLink = $("nav ul li a[href='" + pathName + "']");
            currentLink.addClass("active");
        }
    }
    setSelectedPageNav();
</script>

Ответ 5

Css-классы здесь

<style type="text/css">
.mymenu
{
    background-color: blue;
    color: white;
}
.newmenu
{
    background-color: red;
    color: white;
}
</style>

Сделайте свой HTML следующим, установите url как id

  <div class="my_menu" id="index-url"><a href="index-url">Index</a></div>
  <div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>

Здесь напишите javascript, поместите этот javascript после HTML-кода.

    function menuHighlight() {
       var url = window.location.href;
       $('#'+tabst).addClass('new_current');
    }
    menuHighlight();

Ответ 6

Я обычно обрабатывал бы это на стороне сервера (это означает PHP, ASP.NET и т.д.). Идея заключается в том, что когда страница загружается, серверная сторона контролирует механизм (возможно, устанавливая значение CSS), который отражается в полученном HTML-клиенте, который видит клиент.

Ответ 7

Попробуйте использовать

a:active{
font-weight: bold;
}

в вашем файле css.

Ответ 8

Вы можете использовать Javascript для анализа вашего DOM и выделить ссылку с той же меткой, что и первые теги h1. Но я думаю, что это overkill =)

Было бы лучше установить var, который содержит заголовок вашей страницы, и использовать его для добавления класса по соответствующей ссылке.

Ответ 9

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

В вашем документе CSS insert:

.current,
nav li a:hover {
   /* styles go here */
   color: #e00122;
   background-color: #fffff;
}

Это приведет к тому, что состояние наведения элементов списка будет иметь красный текст и белый фон. Прикрепите этот класс тока к любой ссылке на "текущей" странице и отобразите те же стили.

Вставьте свой HTML-код:

<nav>
   <ul>
      <li class="current"><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
   </ul>
</nav>

Ответ 10

Обратите внимание на следующее:

Вот что работает:

1.) Кнопки верхнего меню видны и выделяются правильно

2.) кнопки меню не отображаются до тех пор, пока не будет нажата кнопка верхняя

Вот что нужно:

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

Смотрите код здесь: http://jsbin.com/ePawaju/1/edit

или здесь: http://www.ceramictilepro.com/_6testingonly.php#

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

Нужно ли мне помещать этот script в раздел главы? Где лучшее место?

<div class="left">
<nav class="vmenu">
    <ul class="vnavmenu">
        <li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
        </li>
    </ul>
    <ul class="Top1 navBarTextSize">
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub1</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub2</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub3</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub4</a>
        </li>
    </ul>
    <ul class="vnavmenu">
        <li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
        </li>
    </ul>
    <ul class="Top2 navBarTextSize">
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">1sub1</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">2sub2</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">3sub3</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">4sub4</a>
        </li>
    </ul>
</nav>

JQuery для меня новичок, любая помощь будет очень признательна:)   var submenu;

$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');

$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {

    if (elems == 1) {
        if (!visible) $refClass.slideDown('fast');
    }

    elems--;
});

if (visible) $('#breadcrumbs-pc').animate({
    'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
    'margin-top': '5rem'
}, 100);
});