выделить меню навигации для текущей страницы - PullRequest
Новая
       2

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

20 голосов
/ 07 января 2011

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

alt text

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

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

Ответы [ 11 ]

35 голосов
/ 23 апреля 2014

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>
27 голосов
/ 07 января 2011

Вы можете установить идентификатор тела страницы на некоторое значение, которое представляет текущую страницу.Затем для каждого элемента в меню вы устанавливаете класс, специфичный для этого пункта меню.А внутри вашего 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="page1".

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

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

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

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

3 голосов
/ 23 ноября 2012

Мне кажется, что вам нужен текущий код как этот ".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;
}
1 голос
/ 10 апреля 2013

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();
1 голос
/ 04 апреля 2013 
<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>
0 голосов
/ 19 сентября 2018

JavaScript: 

<script type="text/javascript">
    $(function() { 
        var url = window.location;
        $('ul.nav a').filter(function() {
            return this.href == url;
        }).parent().parent().parent().addClass('active');
    });   
</script>

CSS: 

.active{
    color: #fff;
    background-color: #080808;
}

HTML: 

<ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"><i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
                                </li>
                                <li>
                                    <?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
                                </li>
                          </ul>
                     </li>
</ul>
0 голосов
/ 06 октября 2013

Пожалуйста, посмотрите на следующее:

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

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

2.) sub кнопки меню не видны до тех пор, пока не нажата top меню

Вот что нужно для работы:

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>

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

<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="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">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="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
        </li>
    </ul>
</nav>

JQuery является новым для меня, любая помощь будет принята с благодарностью :) подменю var; 

$('.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);
});
0 голосов
/ 15 августа 2013

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

Вставьте в свой CSS-документ: 

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

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

Im Ваша 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>
0 голосов
/ 07 января 2011

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

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

0 голосов
/ 07 января 2011

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

a:active{
font-weight: bold;
}

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

Страница:
...