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

Тема в разделе "Wordpress", создана пользователем Urch, 21 авг 2013.

Модераторы: Sorcus
  1. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    Делаю сайт на вп. Нужно чтобы в зависимости от страницы сайта менялось фоновое изображение кнопки.

    Например:

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

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

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214

    через 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 к которому его подключаете...Не перед, а После!
     
  3. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    не сработало...
    <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;
    }
     
  4. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    <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;
    }
    Во первых вот так, во вторых бекграунд стоит нормально указать
     
  5. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    а если у каждой кнопки разный бэкграунд?
     
  6. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    И в чем проблема?

    <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;
    }
     
  7. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    вместо nav у меня navig сделал все с id для li и нечего не вышло :conf:
     
  8. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    ну... я ж не вижу чего вы там наделали, давайте код меню и скрипта, посмотрим что там не так...
     
  9. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    HTML:
    <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");
    }
     
  10. ws256

    ws256

    Регистр.:
    15 июл 2009
    Сообщения:
    259
    Симпатии:
    63
    Зачем так сложно?
    Стандартная функция меню wp генерирует много данных. Пример:
    HTML:
    <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.