VPF::Создание меню с использованеим jQuery в joomla 1.5

Raf4

Дата 7.5.2013, 09:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.5.2013

Репутация: нет
Всего: нет

Привет всем! Сверстал я макет для сайта и решил попробовать сделать из этого шаблон для Joomla 1.5. Возникла проблема с выводом меню, которых у меня два, верхнее горизонтальное и левое.Оба меню используют jQuery. Верхнее выпадающее, а левое аккордеон. Облазил множество сайтов с статьями по созданию шаблонов, но что-то не получается у меня сдружиться с php. Вопрос у меня пока по левому меню. Вот (к примеру)html код:

Код


<div class="container">
                   <ul class="menu collapsible">
                        <li><a href="#">Социально-экономический паспорт района</a>
                            <ul class="acitem">
                                <li><a href="#">Схема территориального планирования</a></li>
                                <li><a href="#">Программы развития района</a></li>
                                <li><a href="#">Итоги социально-экономического развития</a></li>
                                <li><a href="#">Предприятия района</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Земельно-правовые и имущественные отношения</a>
                            <ul class="acitem">
                                <li><a href="#">Пункт меню 1</a></li>
                                <li><a href="#">Пункт меню 2</a></li>
                              
                            </ul>
                        </li>
                        <li><a href="#">Противодействие коррупции</a>
                            <ul class="acitem">
                                <li><a href="#">Пункт меню 1</a></li>
                                <li><a href="#">Пункт меню 2</a></li>
                                <li><a href="#">Пункт меню 3</a></li>
                                <li><a href="#">Пункт меню 4</a></li>
                                <li><a href="#">Пункт меню 5</a></li>
                                <li><a href="#">Пункт меню 6</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Антитеррористическая и экологическая безопасность</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ЖКХ</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Образование</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Муниципальные образования района</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Деятельность Пенсионного фонда РФ</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ГО и ЧС</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Подведомтсвенные учреждения</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Средство массовой информации</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Реестр должностей муниципальной службы</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Ссылки</a>
                            <ul class="acitem">
                                <li><a href="#">Ссылка 1</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div id="FonVert2"></div>
               </div>

далее css:

Код


div.container {
   /*outline:1px solid #cc0000;*/
   width:229px;
   float:left;
   margin-left:1px;
   margin-top:13.5px;
   margin-bottom:10px;
   padding-bottom:-1px;
   background:url(../images/FonVertMenu_06.png) repeat-y;
}
   
ul.menu, ul.menu ul {
  list-style-type:none;
  width: 194px;
  font-style:oblique;
  font-size:12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  /*padding-top:20px;*/
  padding:0;
}

ul.menu a {
  display: block;
  text-decoration: none;
  outline:none;
  margin-top:1px;
}

ul.menu li {
  margin-top: -12px;
  margin-left:17px;
}

ul.menu li a, ul.menu ul.menu li a {   
 /* padding: 0.5em;*/
  margin-top:13px;
  color: #000;
  width:194px;
  height:34px;
  background:url(../images/closedvert.png) no-repeat;
  padding-left:8px;
  
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {
  color:#FFF;
  background:url(../images/openvert.png) no-repeat;
  width:194px;
  height:34px;
}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
  background: url(../images/accor_03.png) no-repeat;
  width:194px;
  height:34px;
  color: #000;
  margin-top:13px;
  margin-left:-17px;
   
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
  background:url(../images/accorop.png) no-repeat;
  color:#000;
  width:194px;
  height:34px;
  margin-left:-17px;
 
}

ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
  text-decoration: none;
  background:url(../images/openvert.png) no-repeat;
  color: #faddde;
  width:194px;
  height:34px;
  
}

ну и js:

Код


jQuery.fn.initMenu = function() {  
    return this.each(function(){
        var theMenu = jQuery(this).get(0);
        jQuery('.acitem', this).hide();
        jQuery('li.expand > .acitem', this).show();
        jQuery('li.expand > .acitem', this).prev().addClass('active');
        jQuery('li a', this).click(
            function(e) {
                e.stopImmediatePropagation();
                var theElement = jQuery(this).next();
                var parent = this.parentNode.parentNode;
                if(jQuery(parent).hasClass('noaccordion')) {
                    if(theElement[0] === undefined) {
                        window.location.href = this.href;
                    }
                    jQuery(theElement).slideToggle('normal', function() {
                        if (jQuery(this).is(':visible')) {
                            jQuery(this).prev().addClass('active');
                        }
                        else {
                            jQuery(this).prev().removeClass('active');
                        }    
                    });
                    return false;
                }
                else {
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                        if(jQuery(parent).hasClass('collapsible')) {
                            jQuery('.acitem:visible', parent).first().slideUp('normal', 
                            function() {
                                jQuery(this).prev().removeClass('active');
                            }
                        );
                        return false;  
                    }
                    return false;
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                    jQuery('.acitem:visible', parent).first().slideUp('normal', function() {
                        jQuery(this).prev().removeClass('active');
                    });
                    theElement.slideDown('normal', function() {
                        jQuery(this).prev().addClass('active');
                    });
                    return false;
                }
            }
        }
    );
});
};  
jQuery(document).ready(function() {jQuery('.menu').initMenu();});

В HTML варианте конечно всё работает замечательно.
Но так как ещё не знаток php вывел таким простым способом это меню:

Код


<div class="container"> <jdoc:include type="modules" name="left" style="-1" />
             <div id="FonVert2"></div>
</div>

На самом же сайте получается что стили то подключились правильно, а вот раздвигается меню стандартами Joomla, т.е. аккордеон не работает. Где мне делать нужные и какие настройки: в админке Joomla или в кодах что-то менять. (js кстати у меня подключен в php). Спасибо!
P.S.:Перерыл немало сайтов, подобную информацию не нашел.... какая должна быть последовательность вывода такого меню на сайт вообще не ясно.
P.s.S.: Обращаюсь уже на третий форум, почему-то нигде толком не объяснили как правильно делать ((( smile

Urfin

Дата 7.5.2013, 10:16 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

1. Не работает потому что на самом деле js не подключен. Там есть тонкости в подключении - надо найти файл, где js подключаются. Есть там такой - он отвечает за "шапку". Что еще может быть, - кеш не обновился. Перезапустите браузер/комп.
Ну и зачем вам 1.5 когда 3 уже в природе имеется. И в ней уже во всю используется jQuery. В старых версиях есть дыры, например для рассылки спама через ваш сайт. В новых версиях эти дыры фиксят.

Этот ответ добавлен с нового Винграда - http://vingrad.com

Raf4

Дата 7.5.2013, 10:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.5.2013

Репутация: нет
Всего: нет

js подключен так:

Код


<script type="text/javascript" src="/templates/<?php echo $this->template?>/js/scriptmenu.js"></script>

Ну выводы в том, что он работает я сделал из того, что в этом файле по мимо меню аккордеон, есть правила для выпадающего горизонтального меню и для ротатора баннеров. И то и другое работает (горизонтальное меню я прописал пока что как было в html). А на счет версии joomla, так как это не личный сайт, а организации, которой сайт предоставлялся бесплатно вышестоящей организацией, поэтому про обновление ничего не могу сказать... пока что есть, на том и приходится работать. Кэш чистил и т.п. тоже делалось.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| PHP: Общие вопросы \| Следующая тема »