Делаем активными ссылки в меню - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Делаем активными ссылки в меню

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Делаем активными ссылки в меню

Выделение активных ссылок в меню с помощью jQuery




При переходе по ссылке в меню на следующую страницу её пункт будет активным, при добавлении индивидуального стиля активности кнопка или ссылка будет выделяться, указывая Ваше положение соответственно навигации в меню. Подобным эффектом активности обладает меню стандартного шаблона, как правило редко кого устраивают стандарты и появляется желание внести индивидуальное отличие в дизайн. Обычно сторонние менюшки не оснащены возможностью выделять ссылку на открытую страницу, теперь Вы сможете изменить ситуацию не подстраивая селекторы стороннего меню под стандартные, системные. Ниже будут предложены несколько вариантов, в них существует определённая схожесть и основное отличие, это способ установки адресов ссылок. Адрес ссылки может быть указан как:
1. Полный адрес страницы = http://delaisait.ucoz.ru/html/html-redactor.html
2. Сокращённый адрес = /html/html-redactor.html
3. Сокращённый адрес без слэша = html/html-redactor.html
4. Адрес с якорем = http://delaisait.ucoz.ru/html/html-redactor.html#bottom
Соответственно будут рассмотрены варианты скриптов для выделения активности ссылок в меню, для работы скрипта понадобится библиотека jQuery, по умолчанию она уже есть на всех сайтах системы uCoz. Поэтому выберите себе подходящий скрипт и усовершенствуйте возможности Вашего меню эффектом активности. Кто не смог разобраться, не отчаивайтесь, подробнее опишите о вашей ситуации в стандартной форме комментариев, если Вы хотите изложить своё мнение, используйте форму комментариев ВКонтакте.





Пример меню с ссылками внутри элемента

Начнём с того что ссылки меню обычно имеют родительский элемент, это своеобразный блок в который помещены сами ссылки. Обычно родителю присвается имя селектора которое может быть описано как класс
(class="имя селектора") или идентификатор (id="имя селектора"). Предположим что ссылки находятся в элементе списка, теге <li>, а сам элемент списка находится блоке маркированного списка <ul> которому присвоено имя селектора как классу <ul class="dsLinkActive">. В результате мы получаем простенькую менюшку состоящую из 3 пунктов, выглядеть она может так:



<ul class="dsLinkActive">
<li><a href="#">Пункт меню 1</a></li>
<li><a href="#">Пункт меню 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>



Добавляем стили меню

Чтобы меню "как нибудь выглядело" нужно опираясь на основной селектор тега <ul> (class="dsLinkActive") примень свойства CSS3 как стили. Сильно не будем разворачивать фантазию и обойдёмся минимализмом, придадим ссылкам меню помимо обычного вида ещё один вид, в состоянии при наведении на ссылку курсора мыши, например вот так:



<style>
ul.dsLinkActive {
padding: 0;
margin: 0;
list-style: none;
}
ul.dsLinkActive li {
float: left;
}
ul.dsLinkActive li a {
display: block;
padding: 5px;
margin-right: 1px;
color: #FFF;
background-color: #000;
text-decoration:none;
}
ul.dsLinkActive a:hover {
color: #000;
background-color: #FFF;
}
</style>
</head>
<body style="background-color:Silver;">
<ul class="dsLinkActive">
<li><a href="#">Пункт меню 1</a></li>
<li><a href="#">Пункт меню 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>


В подключенном состоянии меню со стилями будет выглядеть вот так:




Добавляем в меню стили для класса активности

У нас получилось меню со стилями имеющее 2 состояния каждому из которых создан отдельный вид, теперь нам осталось создать стили для селектора в состоянии активности ссылки, именно ссылаясь на них скрипт будет отображать вид ссылки соответствующей загруженной странице. Так же не будем нагромождать воображение и обойдёмся минимумом, вид селектора применим в виде класса (class="имя селектора"), а в качестве имени селектора будем использовать current (.current). При добавлении в стили это будет выглядеть так (выделено красным):



<style>
ul.dsLinkActive {
padding: 0;
margin: 0;
list-style: none;
}
ul.dsLinkActive li {
float: left;
}
ul.dsLinkActive li a {
display: block;
padding: 5px;
margin-right: 1px;
color: #FFF;
background-color: #000;
text-decoration:none;
}
ul.dsLinkActive a:hover {
color: #000;
background-color: #FFF;
}
ul.dsLinkActive li a.current {
background: red;
color:green;
}
</style>
</head>
<body style="background-color:Silver;">
<ul class="dsLinkActive">
<li><a href="#">Пункт меню 1</a></li>
<li><a href="#">Пункт меню 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
</ul>



Меню с активными ссылками в работе



Подключаем скрипт активной ссылки

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


Вариант первый, адрес к страницам прописан полностью:

http://delaisait.ucoz.ru/script/demo/2013/active-link/demoActive.html

Если у Вас в ссылках меню адрес прописан так, применяйте такой скрипт:



<script>
$(function() {
$('.dsLinkActive a').each(function() {
var thisTab = window.location.href;
var thislink = $(this).attr('href');
if(thisTab == thislink){$(this).addClass('current');}
});
});
</script>


Вариант второй, адрес к страницам прописан сокращённо:

/script/demo/2013/active-link/demoActive.html

Если в ссылках адрес к страницам указан так, применяйте такой скрипт:



<script>
$(function() {
$('.dsLinkActive a').each(function() {
var pathname = window.location.pathname;
var thislink = $(this).attr('href');
if(thislink == pathname){$(this).addClass('current');}
});
});
</script>


Вариант третий, адрес к страницам указан в сокращённом виде + дополнительно была произведена экономия на слеше ( / ), будьте внимательны, если не понимаете подобного подхода, не пытайтесь применять такой вид записи адресов. На сайтах системы uCoz понадобится добавление тега <base> вот такого вида:
<base href="http://delaisait.ucoz.ru/" />, но лучше не путать себя и так не делать. Вид адреса в сокращении и без слеша выглядит так:

script/demo/2013/active-link/demoActive.html

Но если Вам нужен скрипт активности ссылок именно для такой ситуации то он выглядит так:



<script>
$(function() {
$('.dsLinkActive a').each(function() {
var pathname = window.location.pathname;
var thislink = $(this).attr('href');
if("/" + thislink == pathname){$(this).addClass('current');}
});
});
</script>


Вариант четвёртый, применяется в случаях наличия ссылок якорей:

http://delaisait.ucoz.ru/html/html-redactor.html#bottom

Для активности ссылок меню при наличии якорей устанавливайте такой:



<script>
$(function() {
$('.dsLinkActive a').each(function() {
var thisTab = window.location.href;
var thisTabHahs = window.location.hash;
var thislink = $(this).attr('href');
if(thisTab == thislink || thisTab == thislink + thisTabHahs){$(this).addClass('current');}
});
});
</script>









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2171 | Добавил: IZOTOP | Рейтинг: 5.0/2
    | Теги: active link menu, активность ссылок, link active, активные ссылки

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]