Помощь Как сделать умное меню?

[Urch]

Делаю сайт на вп. Нужно чтобы в зависимости от страницы сайта менялось фоновое изображение кнопки.

Например:

Главная О нас Контакты
Наша копания занимается...

Главная О нас Контакты
icq...skyp:...

 

[Denis_Pi]

Делаю сайт на вп. Нужно чтобы в зависимости от страницы сайта менялось фоновое изображение кнопки.

Например:

Главная О нас Контакты
Наша копания занимается...

Главная О нас Контакты
icq...skyp:...

через javascript

<script type="text/javascript">
try{
var el=document.getElementById('navi').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>

где navi - это айди в котором находится меню,

act - класс который будет присваиваться активной ссылке....

З.Ы. Пробел перед act - по хорошему обязателен!
Скрипт должен располагаться сразу после дива с id к которому его подключаете...Не перед, а После!

 

[Urch]

через javascript

<script type="text/javascript">
try{
var el=document.getElementById('navi').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>

где navi - это айди в котором находится меню,

act - класс который будет присваиваться активной ссылке....

З.Ы. Пробел перед act - по хорошему обязателен!
Скрипт должен располагаться сразу после дива с id к которому его подключаете...Не перед, а После!

не сработало...
<li id="o-nas">О нас</li>
<script type="text/javascript">
try{
var el=document.getElementById('o-nas').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>


CSS:
#o-nas{
background-mage: onas.png;
}
.act{
background-mage: onas_a.png;
}

 

[Denis_Pi]

не сработало...
<li id="o-nas">О нас</li>
<script type="text/javascript">
try{
var el=document.getElementById('o-nas').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>

<div id="o-nas">
<div class="nav">

<ul>
<li><a href="/">О нас</a></li>

<li><a href="#">Контакты</a></li>

</ul>
</div>

</div>
<script type="text/javascript">
try{
var el=document.getElementById('o-nas').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>

CSS:
.nav a{
background-mage: onas.png;
}
.nav a.act{
background-mage: onas_a.png;
}
Во первых вот так, во вторых бекграунд стоит нормально указать

 

[Urch]

а если у каждой кнопки разный бэкграунд?

 

[Denis_Pi]

а если у каждой кнопки разный бэкграунд?

И в чем проблема?

Спойлер

<div id="o-nas">
<div class="nav">

<ul>
<li><a class="knopka1" href="/">О нас</a></li>

<li><a class="knopka2" href="#">Контакты</a></li>

</ul>
</div>

</div>
<script type="text/javascript">
try{
var el=document.getElementById('o-nas').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>

CSS:
.nav a.knopka1{
background-mage: knopka1.png и тд;
}

.nav a.knopka2{
background-mage: knopka2.png и тд;
}
.nav a.act{
background-mage: onas_a.png;
}

 

[Urch]

вместо nav у меня navig сделал все с id для li и нечего не вышло

 

[Denis_Pi]

вместо nav у меня navig сделал все с id для li и нечего не вышло

ну... я ж не вижу чего вы там наделали, давайте код меню и скрипта, посмотрим что там не так...

 

[Urch]

<div id="top-menu">
<div class="navig">
  <ul>
  <li id="main"><a href="/">Главная</a></li>
  <li id="about"><a href="/about">О нас</a></li>
  </ul>
</div>
</div>
<script type="text/javascript">
try{
var el=document.getElementById('top-menu-l').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el.href){
el.className += ' act';
};
};
}catch(e){}
</script>

#o-nas{
    background-image: url("img/onas.png");
}
.navig li#o-nas a.act{
    background-image: url("img/act-onas.png");
}

 

[ws256]

Зачем так сложно?
Стандартная функция меню wp генерирует много данных. Пример:

<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2575 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-12268" id="menu-item-12268">

current - выбранная страница
ну и у каждого элемента свое ID

Создайте произвольное меню и лепите что хотите в css.