Изменение вида страницы при переходе по пунктам меню

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем nikanors, 20.02.2014.

  1. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Подскажите, как можно реализовать такую вещь:
    ----------------------------------------------------------
    Сайт визитка фирмы.
    Расположение блокв очень простое.

    1.Над header-oм в верхнем левом углу - лого (узображение).
    2.Header
    3.Под Header-ом находится топ-меню (основной цвет черный).
    Нужно чтобы при нажатии на пункты меню (фон активного меню становится белым - реализовано!) менять цвет фона топ-меню, цвет фона footer и менять изображение лого
     
  2.  
  3. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Масса способов. Можно реализовать средствами JavaScript:
    если у элементов есть ID - можно воспользоваться "голым" JS:
    Код (PHP):
    1. document.getElementById("name-of-element").click(function() {
    2.     document.getElementById("logo").src="../images/logo2.png";
    3.     document.getElementById("menu-main").style.backgroundColor = '#ff0000';
    4.     document.getElementById("footer").style.backgroundColor = '#ff0000';
    5. });


    Если ID нет - лучше не выкобениваться и подключить библиотеку jQuery :) :
    Код (PHP):
    1. $(document).ready(function() {
    2.     $("click-element").click(function() {
    3.         $(".logo").css("background", "url('../images/logo2.png')");
    4.         $(".menu-main").css("background", "#ff0000");
    5.         $(".footer").css("background", "#ff0000");
    6.     });
    7. });
     
    Последнее редактирование: 21.02.2014
  4. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    A как прописывается код? В index.php. Но как именно указать конкретный элемент?
    можете пояснить на примере:
    вот так генерится меню:
    Код (PHP):
    1. <!--  Topmenu  -->
    2. <div  id="topmenu">
    3.   ▼<ul class="menu">
    4.        ► <li class="item-110 parent">...</li>
    5.        ▼  <li class="item-111 cuрent active deepeр paрent">
    6.                <a href="/index.php/produkti">Produkti</a><ul>...</ul> </li>
    7.         ► <li class="item-112 parent">...</li>
    8.         ► <li class="item-113 parent">...</li>
    9.         ► <li class="item-147 parent">...</li>
    10.         ► <li class="item-148">...</li>
    11.         ► <li class="item-149">...</li> </ul>


    вот на активную вкладку "item-111 и надо повесить тригеры
    ------------------------------------------

    а вот CSS:
    Код (PHP):
    1. /** Topmenu **/
    2. #topmenu {
    3.     margin: auto;
    4.     width: 1000px;
    5.     padding-left: 0px;
    6.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    7.     font-weight: 500;
    8.     font-size: 9pt;
    9.     color: #fff;
    10.     background:   linear-gradient(#153828, #173124, #088958);
    11.     overflow: auto;
    12. }
    13. #topmenu ul {
    14.        float: right;
    15.     padding: 0;
    16.     padding-top: 8px;
    17.     padding-bottom: 0px;   
    18.     margin: 0;
    19.     list-style: none;
    20. }
    21. #topmenu li.active {
    22.     background:  linear-gradient(gray, white, white, white);
    23.     color: #000;
    24.    border-top-right-radius: 6px;
    25.     border-top-left-radius: 6px;
    26.     border-bottom-left-radius: - 6px;
    27.     margin-bottom: 0px;
    28. }
    29. #topmenu li.active a {
    30.        padding-top: 2px;
    31.     padding-bottom: 3px;
    32.     color: #5F5F5F;
    33.     font-weight: 600;
    34. }
    35. #topmenu a {
    36.        display: block;
    37.     color: #fff;
    38.     padding-top: 0px;
    39.     padding-bottom: 0px;
    40.     padding-left: 11px;
    41.     padding-right: 11px;
    42.     margin-left: 10px;
    43.     margin-right: 10px;
    44.     margin-bottom: 1px;
    45.     text-decoration:none;
    46.     text-transform: uppercase;
    47. }
    48. #topmenu a:hover {
    49.        color: #c1c1c1;
    50.     text-decoration: none;
    51. }
    52. #topmenu li {
    53.        float: left;
    54.     border-left: 1px solid #565656;
    55. }
    56. #topmenu li:first-child {
    57.         border-left: 0px solid #000000;
    58. }

    пробовал так:
    Код (html):
    1. $(document).ready(function() {
    2.     $("div#topmenu .item-113 parent").click(function() {
    3.         $("#logo").css("background", "url('../images/powered_by.png')");
    4.         $("#topmenu").css("background", "#ff0000");
    5.         $("#copyright").css("background", "#ff0000");
    6.     });
    7. });

    но если честно, сути не понимаю
     
    Последнее редактирование: 22.02.2014
  5. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    http://htmlacademy.ru/ - учить мат часть, это дается на первых минутах курса.
     
  6. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Товарищ, что Вы делаете?? :)
    Это же JavaScript, а не CSS))) Скрипты подключаются на страницу через вставку формата:
    Код (PHP):
    1. <script type="text/javascript">
    2. ...код...
    3. </script>

    Самое простое - откройте файл шаблона index.php (templates/{название-шаблона}/index.php) и вставьте скрипт в область между тегами <head> и </head>.
    Если используете вариант с jQuery - не забудьте туда же вписать подключение самого файла библиотеки:
    Код (PHP):
    1. <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
     
    nikanors нравится это.
  7. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Вы как обычно, в своем "менторском" репертуаре. Не хотите помогать, не помогайте!
    Но форум сделан именно для этого. Здесь собираются именно неспециалисты.
    Кое какие основы я знаю.
    Непонятно, как прицепить тригеры изменения оформления на конкретный элемент меню, который находится в классе
    А именно <li class="item-111
     
  8. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо вам за ответ. Я так и делал, там же подключил библиотеку.
    Только взял готовую из другого шаблона и закинул в папку шаблона.
    Но не могу понять, как правильно указать нужные элементы. Пробовал по разному:
    Код (PHP):
    1. /** 1 **/
    2. $(document).ready(function() {
    3.     $("item-113").click(function() {
    4.         $(".logo").css("background", "url('../images/logo2.png')");
    5.         $(".topmenu").css("background", "#ff0000");
    6.         $(".copyright").css("background", "#ff0000");
    7.     });
    8. });
    9. /** 2 **/
    10. $(document).ready(function() {
    11.     $("item-113").click(function() {
    12.         $("logo").css("background", "url('../images/logo2.png')");
    13.         $("topmenu").css("background", "#ff0000");
    14.         $("copyright").css("background", "#ff0000");
    15.     });
    16. });
    17. /** 3 **/
    18. $(document).ready(function() {
    19.     $("item-113").click(function() {
    20.         $("#logo").css("background", "url('../images/logo2.png')");
    21.         $("#topmenu").css("background", "#ff0000");
    22.         $("#copyright").css("background", "#ff0000");
    23.     });
    24. });
    25. /** 4 **/
    26. <script type="text/javascript">
    27. document.getElementByClass("item-113").click(function() {
    28.     document.getElementById("logo").src="../images/logo2.png";
    29.     document.getElementById("topmenu").style.backgroundColor = '#ff0000';
    30.     document.getElementById("copyright").style.backgroundColor = '#ff0000';
    31. });
    32. /** 5 **/
    33. jQuery(document).ready(function() {
    34.      jQuery("item-113").click(function() {
    35.          jQuery('.logo').css("background", "url('../images/powered_by.png')");
    36.          jQuery('.topmenu').css("background", "#ff0000");
    37.          jQuery('.copyright').css("background", "#ff0000");
    38.     });
    39. });


    может проблема в синтаксисе или неправильном указании начального элемента "item-113"....
     
    Последнее редактирование: 21.02.2014
  9. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    Можете прочитать все мои сообщения: http://joomla-support.ru/search.php?searchid=680269

    Я Вам желаю добра и просто реально проще освоить знакомство с HTML+CSS, и потом уже не совершать мелкие ошибки (вставка JS кода в CSS код):

    0_8b15c_3adff3e6_orig.png

    Все это бесплатно и понятно на 99%

    [!]
     
    nikanors нравится это.
  10. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Снова вы туда же... Ну неужели вы думаете, я не искал решения и не изучал вопрос...
    Просто я не могу понять сути, что у меня не работает ..... !?
    Или не могу получить элемент с помощью Jquery, или не работает селектор на элементе.....
    так генерится меню:
    Код (PHP):
    1. <!--  Topmenu  -->
    2. <div  id="topmenu">
    3.   ▼<ul class="menu">
    4.        ► <li class="item-110 parent">...</li>
    5.        ▼  <li class="item-111 cuрent active deepeр paрent">
    6.                <a href="/index.php/produkti">Produkti</a><ul>...</ul> </li>
    7.         ► <li class="item-112 parent">...</li>
    8.         ► <li class="item-113 parent">...</li>
    9.         ► <li class="item-147 parent">...</li>
    10.         ► <li class="item-148">...</li>
    11.         ► <li class="item-149">...</li> </ul>

    вот фрагмент кода в index.php
    Код (PHP):
    1. <?php
    2. <head>
    3.   <jdoc:include type="head" />
    4.   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    5.   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    6.   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
    7.   <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script>
    8.   <?php if (($this->countModules('position-15') && $slides == 2) || ($slides == 1)): ?>
    9.   <!-- Slides Scripts -->
    10.   <?php if ($loadjquery): ?>
    11.   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    12.   <?php endif; ?>
    13.   <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/slides.js"></script>
    14.   <script type="text/javascript">
    15.     jQuery(document).ready(function(){
    16.       jQuery('#slides').slides({
    17.         play: 5000,
    18.         pause: 2500,
    19.         hoverPause: true<?php if ($slideseffect == 1): ?>,
    20.         effect: 'fade',
    21.         crossfade: true,
    22.         fadeSpeed: 500<?php endif; ?>
    23.       });
    24.     });
    25.     jQuery(document).ready(function() {
    26.       jQuery("#slides").hover(function() {
    27.           jQuery(".slides_nav").css("display", "block");
    28.         },
    29.           function() {
    30.           jQuery(".slides_nav").css("display", "none");
    31.         });
    32.  
    33.     });
    34. $(document).ready(function() {
    35.     $("div#topmenu .item-113 parent").click(function() {
    36.         $("#logo").css("background", "url('../images/powered_by.png')");
    37.         $("#topmenu").css("background", "#ff0000");
    38.         $("#copyright").css("background", "#ff0000");
    39.     });
    40. });
    41.   </script>
    42.   <?php endif; ?>
    43. </head>


    что я делаю не так?
     
    Последнее редактирование: 22.02.2014
  11. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    nikanors, не понимаю, что Вам не понятно. Такой вот каламбур :)
    Давайте на пальцах объясню...

    ПРИМЕР:

    КАК В ТЕОРИИ
    Есть 3 кнопки.
    При нажатии на кнопку первый раз - цвет фона меняется на красный.
    При повторном нажатии цвет фона меняется на исходный.

    КАК В РЕАЛЕ
    Код (html):
    1. <html>
    2.  
    3. <head>
    4. ...
    5. <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>  
    6. <script type="text/javascript">
    7. $(document).ready(function() {
    8.     $(".menu-top ul li a").click(function() {
    9.         var link_bg = $(this).css("background");
    10.         var menu_img = $(".logo img").attr("src");
    11.         if (menu_img == "1.png") {
    12.             $(".logo img").attr("src","2.png");
    13.             $(this).css("background", "#ff0000");
    14.         } else {
    15.             $(".logo img").attr("src","1.png");
    16.             $(this).css("background", "#555");
    17.         }
    18.     });
    19. });
    20. </script>
    21. ...
    22. </head>
    23.  
    24. <body>
    25.  
    26. <div class="logo">
    27.     <img src="images/logo_1.png" />
    28. </div>
    29.  
    30. <div class="menu-top">
    31.     <ul class="menu">
    32.         <li class="item-101">
    33.             <a href="one-page.html"></a>
    34.         </li>
    35.         <li class="item-102">
    36.             <a href="two-page.html"></a>
    37.         </li>
    38.         <li class="item-103">
    39.             <a href="three-page.html"></a>
    40.         </li>
    41.     </ul>
    42. </div>
    43.  
    44. </body>
    45.  
    46. </html>

    Логика такая!
    Может где и ошибся, давно не возился с JS...
     
    Последнее редактирование: 22.02.2014
  12. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    все верно...
    на примерах все работает. А у меня нет! И не могу понять что не так
    Руководствовался этим:
    http://anton.shevchuk.name/javascript/jquery-for-beginners/
    Как получить элемент с помощью jQuery?

    $(“#header”) – получение элемента с id=”header”
    $(“h3″) – получить все <h3> элементы
    $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
    $(“ul li”) – получить все <li> элементы из списка <ul>
    $(“ul li:first”) – получить только первый элемент <li> из списка <ul>

    в моем варианте, посмотрите что написано неверно. Мой код последний в блоке "head"
     
  13. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    фу....!!! Заработало вот в таком варианте:
    Код (html):
    1. jQuery(document).ready(function() {
    2.     jQuery("li.item-113").click(function() {
    3.         jQuery("#logo").css("background", "url('../images/powered_by.png')");
    4.         jQuery("#topmenu").css("background", "#ff0000");
    5.         jQuery("#copyright").css("background", "#ff0000");
    6.     });
    7. });


    Всем большое спасибо!
     
    Последнее редактирование: 22.02.2014
  14. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    У Вас библиотека подключается, только если переменная $loadjquery вернула TRUE.
    Что это за переменная и когда она что возвращает в Вашем шаблоне я не знаю... Попробуйте убрать условие IF для подключения библиотеки.

    Код (html):
    1. $(document).ready(function() {
    2.     $("#topmenu ul li a").click(function() {
    3.         $("#logo").css("background", "url('../images/powered_by.png')");
    4.         $("#topmenu").css("background", "#ff0000");
    5.         $("#copyright").css("background", "#ff0000");
    6.     });
    7. });
     
  15. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо Вам Александр! Все работает!

    Но засада!
    Нажатие мыши на пункт меню, включает обработчик события и вызывает смену оформления но кратковременно (1 сек).
    Как сделать так, чтобы после селектора .click сохранялись полученные изменения?
    Не подскажите, где копать....!?
     
    Последнее редактирование: 22.02.2014
  16. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Если изменения на странице не сохраняются, значит отрабатывает ещё какой-то скрипт.

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

    Открываете Firefox Firebug (пр.кл.мыши на странице - "Инспектировать элемент с помощью FIrebug), переходите на вкладку Сценарий и жмёте Ctrl + F5.
    Далее смотрите какие скрипты подключены на текущей странице.

    P.S.: кстати, по поводу кода, наверное, логичнее было бы так:
    Код (PHP):
    1. $(document).ready(function() {
    2.     $(".menu-top ul li a").click(function() {
    3.         var menu_img = $(".logo img").attr("src");
    4.         if (menu_img == "1.png") {
    5.             $(".logo img").attr("src","2.png");
    6.             $(this).css("background", "#ff0000");
    7.         } else {
    8.             $(".logo img").attr("src","1.png");
    9.             $(this).css("background", "#555");
    10.         }
    11.     });
    12. });
     
    Последнее редактирование: 22.02.2014
  17. Offline

    nikanors Недавно здесь

    Регистрация:
    01.02.2014
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Частично вы правы.
    Но в моем случае замена оформления происходит у обьектов(#logo- лого в лэйере, #topmenu - меняет фон полосы меню, #copyright - меняет фон полосы внизу страницы), которые не являются элементами пункта меню, на который происходит клик.
    Пробовал по разному.
    Пытался смотреть сценарии работы скриптов через FB.
    Ставил свой скрипт в область элемента, переносил в "body", в самый низ документа.
    Пытался переопределить порядок выполнения js скриптов, т.е. расставить порядок вывода js файлов. Что-то типа:
    Код (PHP):
    1. function hook_js_alter(&$javascript) {  
    2.     $javascript['misc/jquery.js']['weight'] = 0;
    3.     $javascript['script.js']['weight'] = 1;
    4. }
    не получилось ...
    Не хотелось бы сдаваться, но сам не могу понять, как увидеть тот обработчик, который сбрасывает мой js скрипт.
    Склоняюсь к тому, чтобы сделать еще один шаблон с измененным .css и по клику на пункте меню менять оформление таким образом
     
    Последнее редактирование: 23.02.2014
  18. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Склоняйтесь лучше к тому, чтобы самостоятельно верстать "чистые" шаблоны или пользоваться платными шаблонами с поддержкой пользователей и адекватной документацией от разработчика.
    А копаться в куче скриптов, часть которых вообще непонятно что делают - себе дороже, это просто не рентабельная трата времени.
     

Поделиться этой страницей

Загрузка...