Вход

Просмотр полной версии : Выделение активного пункта меню. Нужен совет!


kirian222
16.10.2013, 19:13
Доброго времени суток, форумчане!
Я нуб в java, нужен совет!
Как в этот скрипт добавить border-color и color (цвет текста). Получилось добавить только background.
<script>
onload = function ()
{for (var lnk = document.links, j = 0; j < lnk.length; j++)
if (lnk [j].href == document.URL)lnk [j].style.background = '#bba26c';}
</script>
Ну очень нужно (другого варианта выделения активного меню просто не нашел нигде).
Заранее благодарен!!!

danik.js
16.10.2013, 19:16
Ну очень нужно (другого варианта выделения активного меню просто не нашел нигде).

a) Выделение пункта должно происходить на сервере
б) Выделение пункта обычно делается присвоением особого класса, чаще всего active и прописыванием стилей в файле css.

kirian222
16.10.2013, 19:51
Да пробовал я и active и current и selected.
Ничего не получается.
Только в данном скрипте есть положительные движения.
Активный пункт меню выделяется, но только прописанный фон, а хотелось бы добавить к фону в скрипт border и color.
Есть варианты решения?

danik.js
16.10.2013, 20:02
css:
.active{
background: #bba26c;
color: red;
border-color: blue;
}

lnk[i].className += ' active';

sphere89
16.10.2013, 20:05
Воспользуйтесь jQuery :)

danik.js
16.10.2013, 20:08
sphere89, это сарказм?

sphere89
16.10.2013, 20:14
sphere89, это сарказм?

Это совет новичку, намного проще работать с jQuery, чем с нативным JS.

kirian222
16.10.2013, 20:14
css:
.active{
background: #bba26c;
color: red;
border-color: blue;
}

lnk[i].className += ' active';

Только что попробовал. Ничего глухо как на кладбище.
Может что в кодах не так!?
HTML.
<ul class="menu">
<li><a href="/index">Главная</a></li>
<li><a href="/index/uslugi/0-7">Услуги</a></li>
<li><a href="/index/nedvizhimost/0-9">Недвижимость</a></li>
<li><a href="/index/contacts/0-6">Контакты</a></li>
<li><a href="/index/zajavka/0-8">Оставить заявку</a></li>
</ul>
<div class="clear"></div>

CSS.
menu, .menu ul {
padding : 0;
list-style : none;
}
.menu {
position : relative;
width : 994px;
height : 39px;
margin : 0 auto;
}
.menu a:hover {
background : #bba26c;
border-color : #888 #777 #bba26c #555;
color : #fff;
}
.menu ul li.active,
.menu ul li a:hover {
background : #bba26c;
border-color : #888 #777 #bba26c #555;
color : #fff;
}

.menu a:hover ul li a {
line-height : 35px;
height : 35px;
float : none;
}
.menu ul li a {
background : #bba26c;
border-color : #888 #777 #444 #555;
border-radius : 0 0 0 0;
color : #000000;
line-height : 1px;
transition : 1.5s;
}
.menu ul {
position : absolute;
top : 37px;
left : 0;
height : 0;
overflow : hidden;
}
.menu li {
float : left;
position : relative;
background : transparent;
}
.menu li a {
width : 138px;
height : 37px;
margin-left : 3px;
background : #E6C98A;
border-radius : 6px 6px 0 0;
display : block;
text-align : center;
line-height : 35px;
border : #8a8686 solid 1px;
border-bottom-color : #fff;
color : #000000;
text-decoration : none;
font-size : 12px;
font-weight : bold;
transition : 0.6s;
}
.menu ul li {
width : 100%;
opacity : 0;
transition : 0.5s;
}
.menu li:hover ul li {
opacity : 1;
}
.menu li:hover ul li a {
line-height : 35px;

sphere89
16.10.2013, 20:16
Подключите после всего вашего кода тег <script></script> содержащий в цикле в теле условия эту строку lnk[i].className += ' active';

kirian222
16.10.2013, 20:20
Подключите после всего вашего кода тег <script></script> содержащий в цикле в теле условия эту строку lnk[i].className += ' active';

Нифига не получается. Не хочет он выделятся.

рони
16.10.2013, 20:58
kirian222,
:-?
Возможно ли такое на javascript (http://javascript.ru/forum/misc/38520-vozmozhno-li-takoe-na-javascript.html)

danik.js
16.10.2013, 21:00
Там в css не .menu ul li, a .menu li
<!DOCTYPE html>
<ul class="menu">
<li><a href="/index">Главная</a></li>
<li><a href="/index/uslugi/0-7">Услуги</a></li>
<li><a href="/index/nedvizhimost/0-9">Недвижимость</a></li>
<li><a href="/index/contacts/0-6">Контакты</a></li>
<li><a href="/index/zajavka/0-8">Оставить заявку</a></li>
</ul>
<div class="clear"></div>

<style>
menu, .menu ul {
padding : 0;
list-style : none;
}
.menu {
position : relative;
width : 994px;
height : 39px;
margin : 0 auto;
}
.menu a:hover {
background : #bba26c;
border-color : #888 #777 #bba26c #555;
color : #fff;
}
.menu li.active,
.menu li a:hover {
background : #bba26c;
border-color : #888 #777 #bba26c #555;
color : #fff;
}

.menu a:hover ul li a {
line-height : 35px;
height : 35px;
float : none;
}
.menu ul li a {
background : #bba26c;
border-color : #888 #777 #444 #555;
border-radius : 0 0 0 0;
color : #000000;
line-height : 1px;
transition : 1.5s;
}
.menu ul {
position : absolute;
top : 37px;
left : 0;
height : 0;
overflow : hidden;
}
.menu li {
float : left;
position : relative;
background : transparent;
}
.menu li a {
width : 138px;
height : 37px;
margin-left : 3px;
background : #E6C98A;
border-radius : 6px 6px 0 0;
display : block;
text-align : center;
line-height : 35px;
border : #8a8686 solid 1px;
border-bottom-color : #fff;
color : #000000;
text-decoration : none;
font-size : 12px;
font-weight : bold;
transition : 0.6s;
}
.menu ul li {
width : 100%;
opacity : 0;
transition : 0.5s;
}
.menu li:hover ul li {
opacity : 1;
}
.menu li:hover ul li a {
line-height : 35px;
}
</style>
<script>
(function(){
var links = document.querySelectorAll('.menu a');
for (var i = 0, link; link = links[i]; i++) {
if (link.href == document.URL)
link.className += ' active';
}
})()
</script>

рони
16.10.2013, 21:09
danik.js,
осталось выяснить что есть activeURL

danik.js
16.10.2013, 21:24
осталось выяснить что есть
Это недонажатый пару раз Ctrl+Z :)

Deff
17.10.2013, 02:50
kirian222

<style>
ul.menu li a{
background-color : transparent;
border-color : transparent;
}
ul.menu a.active,
ul.menu a:hover {
color: #fff!important;
background-color : #bba26c!important;
border-color : #888 #777 #bba26c #555!important;
}
</style>
<ul class="menu">
<li><a href="http://forumdts.org/search.php?action=show_24h">Главная</a></li>
<li><a href="/index/uslugi/0-7">Услуги</a></li>
<li><a href="/index/nedvizhimost/0-9">Недвижимость</a></li>
<li><a href="/index/contacts/0-6">Контакты</a></li>
<li><a href="/index/zajavka/0-8">Оставить заявку</a></li>
</ul>
<div class="clear"></div>
<script>
(function(){
var links = document.querySelectorAll('.menu a');
for (var i = 0, link; link = links[i]; i++) {
link.className = link.className.replace(/\s*active\s*/ig,'');
//alert(link.href+'\n'+document.URL.split('#')[0]);
if (link.href.split('#')[0] == document.URL.split('#')[0]){
link.className += ' active';
}
}
})()