Грамотная подсветка активного пункта меню

[Torawhite]

Здравствуйте!

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

1. Использованный скрипт, подсвечивает пункты вместе с пунктом главной страницы, который должен сниматься при переходе в другой раздел.

2. Если вставить в пункт "главная страница" картинку (в данном случае белый квадрат), то подсветка пункта не работает, а при наведении псевдокласс hover работает без проблем.

3. Если прописываю в браузере адрес без "www" то подсветка слетает - браузер сам не дописывает "www" почему-то, у другх сайтов пробовал - прописывает.

Возможно, вопросы совсем глупые, но я новичок в этом. прошу помочь.

Спасибо!

Сам сайт, так проще смотреть http://www.torawhite.ru/

<!--Блок меню--><div id="top_nav">	<nav id="menu">		<a title="Главная страница" href="http://www.torawhite.ru/" target="_self" id="home"></a>		<a href="http://www.torawhite.ru/magazine/" target="_self" id="magazine">ЖУРНАЛ</a>		<a href="http://www.store.torawhite.ru/" target="_self" id="market">МАРКЕТ</a>		<a href="http://www.torawhite.ru/more/" target="_self" id="more">ЕЩЕ</a>	</nav>	<!--Блок формы поиска-->	<form>		<input name="header_search" type="search" placeholder="ПОИСК" id="search">	</form>	<!--Блок регистрации-->	<div id="registration">		<a href="http://www.torawhite.ru/more/contacts.php" target="_self" id="enter">ВОЙТИ</a>		<a href="#" target="_blank" title="Личный кабинет" id="user"></a>		<a href="#" target="_blank" title="Регистрация" id="add"></a>	</div></div>

<script>$(function () {                                 $('#menu a').each(function () {             var location = window.location.href         var link = this.href                        var result = location.match(link);           if(result != null) {                            $(this).addClass('active');            }    });});</script>

/*Стили навигации*/#top_nav {	position: fixed;	top: 140px;	margin-left: auto;	margin-right: auto;	height: 40px;	width: 1216px;	background-color: #2d2d2d;	z-index: 100;	}#menu {	position: absolute;	display: table;	width: 268px;	height: 30px;	left: 0px;	bottom: 5px;	}#menu a {	display: table-cell;	text-align: center;	vertical-align: middle;	background-size: contain;	border-right: 1px solid #FFFFFF;	cursor: pointer;	font: bold 14px ProximaNova-Reg, Verdana;	text-decoration: none;	color: #FFFFFF;	}#menu a:hover {	background-color: #BF1238;	}.active {	background-color: #BF1238;	}#home {	background: url(http://www.torawhite.ru/images/home.svg) no-repeat;	width: 30px;	}#magazine {	width: 90px;	} #market {	width: 84px;	}#more {	width: 60px;    }/*Стили формы запроса*/#search {	position: absolute;	right: 300px;	bottom: 5px;	width: 616px;	height: 30px;	border: none;	font: 14px ProximaNova-Reg;	text-align: center;	border-radius: none;	}/*Стили блока регистрации*/#registration {	position: absolute;	display: table;	height: 30px;	width: 139px;	bottom: 5px;	right: 0px;	}#registration a {	display: table-cell;	text-align: center;	vertical-align: middle;	background-size: contain;		cursor: pointer;	font: 14px ProximaNova-Reg, Verdana;	text-decoration: none;	background-color: #12BF2D;	color: #FFFFFF;	}#enter {	width: 76px;	height: 30px;	border-left: 1px solid #FFFFFF;	border-right: 1px solid #FFFFFF;    }#user {	background: url(http://www.torawhite.ru/images/user.svg) no-repeat;	width: 30px;	height: 30px;	border-right: 1px solid #FFFFFF;    }#add {	background: url(http://www.torawhite.ru/images/add.svg) no-repeat;	width: 30px;	height: 30px;    }#registration a:hover {	background-color: #007212;;	background-size: contain;	}

[afdw]

Это нужно делать на сервере.

[Aleksandr.L]

2. Если вставить в пункт "главная страница" картинку (в данном случае белый квадрат), то подсветка пункта не работает, а при наведении псевдокласс hover работает без проблем.

 

Прочитай про каскадность и про то как работает сокращенное свойство background.

#home {    background: url(http://www.torawhite.ru/images/home.svg) no-repeat;    width: 30px;}

.active {    background-color: #BF1238;}

3. Если прописываю в браузере адрес без "www" то подсветка слетает - браузер сам не дописывает "www" почему-то, у другх сайтов пробовал - прописывает.

 

Сделай 301-й редирект.

 

1. Использованный скрипт, подсвечивает пункты вместе с пунктом главной страницы, который должен сниматься при переходе в другой раздел.

 

У меня все нормально подсвечивает.

Edited December 8, 2014 by Aleksandr.L

[Torawhite]

 

2. Если вставить в пункт "главная страница" картинку (в данном случае белый квадрат), то подсветка пункта не работает, а при наведении псевдокласс hover работает без проблем.

 

Прочитай про каскадность и про то как работает сокращенное свойство background.

#home {    background: url(http://www.torawhite.ru/images/home.svg) no-repeat;    width: 30px;}

.active {    background-color: #BF1238;}

3. Если прописываю в браузере адрес без "www" то подсветка слетает - браузер сам не дописывает "www" почему-то, у другх сайтов пробовал - прописывает.

 

Сделай 301-й редирект.

 

1. Использованный скрипт, подсвечивает пункты вместе с пунктом главной страницы, который должен сниматься при переходе в другой раздел.

 

У меня все нормально подсвечивает.

 

Спасибо большое! С каскадированием разобрался, сделал по-другому. Редирект тоже сделал, а вот скрипт всё же подсвечивает два раздела, выставляет класс .active обеим ссылкам:https://yadi.sk/i/PdFGZXFMdG9Kk

[Aleksandr.L]

http://javascript.ru/forum/jquery/47556-snova-pro-vydelenie-aktivnykh-punktov-2.html

[Torawhite]

http://javascript.ru/forum/jquery/47556-snova-pro-vydelenie-aktivnykh-punktov-2.html

Спасибо! Но у меня последний вариант скрипта в той теме не работает - подсвечивает только при переходе в раздел "еще", причём все разделы сразу. Скрипт присваивает класс .active блоку nav #menu:

https://yadi.sk/i/4la_P316dGjeT

 

В скрипте менял только наименование идентификатора и класса:

<script>$(function () {                             	    $('#menu a').each(function () {    	        var location = window.location.href 	        var link = this.href                	        var result = location.match(link);  	 	        if(result != null) {                	            $(this).parent().addClass('active');    	        } else {	            $(this).parent().removeClass('active');    	        }	    });	    $('.active').size() == 2 && $('.active').eq(0).removeClass('active')	});</script>

Скорее всего, скрипт не работает из-за того, что написан под ненумерованный список меню, а у меня меню представлено в виде блока nav с вложенными ссылками:

<nav id="menu">		<a title="Главная страница" href="http://torawhite.ru/" target="_self" id="home">■</a>		<a href="http://torawhite.ru/magazine/" target="_self" id="magazine">ЖУРНАЛ</a>		<a href="http://store.torawhite.ru/" target="_self" id="market">МАРКЕТ</a>		<a href="http://torawhite.ru/more/" target="_self" id="more">ЕЩЕ</a>	</nav>

[Aleksandr.L]

$(function () {                                $('#menu a').each(function () {         var location = window.location.href      var link = this.href                     var result = location.match(link);  		      if(result != null) {                       $(this).addClass('active');         }   });});

Все же работает. Вот пример: http://rghost.ru/59537853

[Torawhite]

$(function () {                                $('#menu a').each(function () {         var location = window.location.href      var link = this.href                     var result = location.match(link);  		      if(result != null) {                       $(this).addClass('active');         }   });});

Все же работает. Вот пример: http://rghost.ru/59537853

 

Этот скрипт работает, но не убирает подсветку с главной (где квадрат), при переходе в другой раздел. Убирает только когда переходишь в раздел "маркет", но там домен третьего уровня, видимо, поэтому снимает. Сейчас на странице подсветка убирается, но только потому, что я убрал ячейку с квадратом (главная страница) в отдельный блок и изменил таблицу стилей для главной страницы, то есть там по умолчанию фон залит на главной. Можете фаербагом посмотреть.

[Aleksandr.L]

Этот скрипт работает, но не убирает подсветку с главной (где квадрат), при переходе в другой раздел. Убирает только когда переходишь в раздел "маркет", но там домен третьего уровня, видимо, поэтому снимает. Сейчас на странице подсветка убирается, но только потому, что я убрал ячейку с квадратом (главная страница) в отдельный блок и изменил таблицу стилей для главной страницы, то есть там по умолчанию фон залит на главной. Можете фаербагом посмотреть.

 

Да какая разница какого уровня домен? Ты можешь свой квадрат вставить псевдо-элементом и не задавать background-color через селектор #menu a?

[Torawhite]

 

Этот скрипт работает, но не убирает подсветку с главной (где квадрат), при переходе в другой раздел. Убирает только когда переходишь в раздел "маркет", но там домен третьего уровня, видимо, поэтому снимает. Сейчас на странице подсветка убирается, но только потому, что я убрал ячейку с квадратом (главная страница) в отдельный блок и изменил таблицу стилей для главной страницы, то есть там по умолчанию фон залит на главной. Можете фаербагом посмотреть.

 

Да какая разница какого уровня домен? Ты можешь свой квадрат вставить псевдо-элементом и не задавать background-color через селектор #menu a?

 

Я не совсем понимаю ход ваших мыслей. Квадрат я вставил символом, как текст, он должен быть там постоянно, меняется только его фон.. Если всё оставить, как было раньше, то скрипт присваивает класс .active ему постоянно, то есть фон заливает другим цветом. Как поможет здесь квадрат, вставленный, как псевдоэлемент (узнал о их существовании впервые, от вас), из полезного тут только :after и :before, но как их привязать к этой не пойму, мало опыта.

[Aleksandr.L]

Torawhite, ты можешь сделать как на этом примере? Все же прекрасно работает.

[Torawhite]

Torawhite, ты можешь сделать как на этом примере? Все же прекрасно работает.

Сделал, посмотрите. Выделяет сразу два раздела

[Aleksandr.L]

$(function () {   var location = window.location.href;   $('#menu a').each(function() {      var link = this.href;      if(link == location) {                         $(this).addClass('active');          }   });});

Ну по идее вот так должно работать

[Switch74]

тут несколько нюансов:

1. а если будут переданы get параметры?

2. ну или банально в конце не будет "/" или будет "index.html"

3. https и www тоже можно учитывать (но это должно быть автоматом, если на серверной стороне все правильно) 

[Torawhite]

$(function () {   var location = window.location.href;   $('#menu a').each(function() {      var link = this.href;      if(link == location) {                         $(this).addClass('active');          }   });});

Ну по идее вот так должно работать

 

Спасибо. Да, так работает, но убирает подсветку, если перейти на вложенный каталог, то есть http://torawhite.ru/more/contacts.php уже не подсвечивает. предыдущий вариант всегда подсвечивал главную. но работал со вложенными каталогами.

тут несколько нюансов:

1. а если будут переданы get параметры?

2. ну или банально в конце не будет "/" или будет "index.html"

3. https и www тоже можно учитывать (но это должно быть автоматом, если на серверной стороне все правильно) 

Понимаю, но неужели нет рабочего скрипта под это. Ведь на многих сайтах это реализовано и работает

[Switch74]

это как правило реализовывается другими средствами

если доработать текущий скрипт, то все должно работать:

брать нужно без доменного имени желательно т.к. по сути http://site.ru, http://www.site.ru/, https://site.com - это все может быть одна и та же страница

так же не нужно учитывать параметры после ? и # и возможно имя файла как в вашем случае (но иногда эти параметры как раз и указывают на разные страницы)

так же возможно у вас могут иметься подкаталоги, например /market/tv/ - это означает, что мы находимся в разделе магазин, в категории телевизоры, при этом получается в меню "Маркет" должен продолжать подсвечиваться

так же у вас есть нюанс, что в меню ссылки не однотипные, есть ссылка на субдомен - возможно это тоже потребуется учитывать в скрипте, т.е. делать дополнительную проверку (я бы посоветовал использовать однотипные ссылки и файловую структуру)

теперь по логике:

берем две переменные:

location - строка из адресной строки без домена и ключей, можно сказать даже только название директории из корня (если в адресной строке http://site.ru/market/tv/, то берем /market)

href - обычно в ссылках указывается путь на страницы нашего ресурса без доменного имени, что-то вроде /market/ (достаточно убрать последний слэш)

и сравнивать location и href

второй вариант - оставить в location = site.ru/market/tv/

а href привести к типу: site.ru/market/ можно добавлять к адресу домен, можно удалять протокол

дальше ищется через location.match(href), но с оговоркой, что если location != href, то главную не подсвечиваем

[Torawhite]

это как правило реализовывается другими средствами

если доработать текущий скрипт, то все должно работать:

брать нужно без доменного имени желательно т.к. по сути http://site.ru, http://www.site.ru/, https://site.com - это все может быть одна и та же страница

так же не нужно учитывать параметры после ? и # и возможно имя файла как в вашем случае (но иногда эти параметры как раз и указывают на разные страницы)

так же возможно у вас могут иметься подкаталоги, например /market/tv/ - это означает, что мы находимся в разделе магазин, в категории телевизоры, при этом получается в меню "Маркет" должен продолжать подсвечиваться

так же у вас есть нюанс, что в меню ссылки не однотипные, есть ссылка на субдомен - возможно это тоже потребуется учитывать в скрипте, т.е. делать дополнительную проверку (я бы посоветовал использовать однотипные ссылки и файловую структуру)

теперь по логике:

берем две переменные:

location - строка из адресной строки без домена и ключей, можно сказать даже только название директории из корня (если в адресной строке http://site.ru/market/tv/, то берем /market)

href - обычно в ссылках указывается путь на страницы нашего ресурса без доменного имени, что-то вроде /market/ (достаточно убрать последний слэш)

и сравнивать location и href

второй вариант - оставить в location = site.ru/market/tv/

а href привести к типу: site.ru/market/ можно добавлять к адресу домен, можно удалять протокол

дальше ищется через location.match(href), но с оговоркой, что если location != href, то главную не подсвечиваем

Спасибо. Но для меня это сложновато, на данном этапе моё ознакомление с java - начальное, чтобы мне это самому написать, потребуется пройти ознакомительный курс и долго биться, так как даже люди, которые хорошо знакомы с программированием не могут так сразу выдать код, думал, этот скрипт не слишком сложный, но оказалось, это не так

[Yazon_Nile]

http://htmlforum.ru/index.php?showtopic=52346