Горизонтальное выпадающее меню для joomla1.5

В одном из предыдущих постов, я описал как сделать с помощью mootools вертикальное выпадающее меню для joomla 1.5

Однако подумав немного головой (в процессе работы над данным постом) я понял, что mootools там совершенно ни при чем, и , в том случае он является, как говорится «лишней сущностью», потому что реализация того типа выпадающего меню легко решаются с помощью CSS.

А вот в этом посте — я таки разобрался как делается реальное выпадающее меню с применением эффектов mootools, правда пока только горизонтальное. 

Демо

Значит так.

1. Настройки модуля.

  • В модуле mod_mainmenu устанавливаем стиль меню «список».
  • Всегда показывать вложенные подпункты — «да».
  • Раскрывать меню — «да»

2. JavaScript

<script language="JavaScript" type="text/javascript">

window.addEvent('domready', function() {
        $$('ul.menu li.parent').each(function( liparent ){
        var list = liparent.getElement('ul');
        var mySlide = new Fx.Slide(list).hide();
        liparent.addEvents({
        'mouseover': function(){
	mySlide.stop();
	mySlide.slideIn();
        },
        'mouseleave': function(){
        mySlide.stop();
	mySlide.slideOut();
        }
        });
        })
});

</script>

Этот код заточен под стандартные css-классы (parent, menu) которые joomla 1.5 присвоит элементам mod_mainmenu, поэтому если вы добавляли к меню суффикс класса меню, то надо будет изменить яваскрипт в соответствии с вашим — это место я выделил розовым цветом.

3. CSS

 <style type="text/css">
     div.moduletable/*_ваш_суффикс_модуля*/{
       position: relative;
       height: 30px;  /* высота меню */
     }
     ul,li{
       padding:0;
       margin:0;
     }
     ul.menu{
       clear:both;
      position:absolute;
     }
     ul.menu li{
       float:left;
       list-style: none;
       text-align: center;
       background-color: #FFDEAD;
       width: 100px;
     }

     li.parent{
       clear:right;
     }
     li.parent ul{
       float:left;
       display:block;
     }
     ul.menu li ul li{
	display:block;
	float:none;
	clear:both;

     }
     ul.menu li ul li a{
       display: block;
     }

 </style>

Необязательные вещи я выделил синим цветом, поскольку у каждого внешний вид будет свой. А вот красивым розовым — отмечен очень важный момент. Я тут так и не смог вкурить, как бы ловко сделать так, чтобы от ширины выпадающих пунктов меню не зависела ширина родительского. В общем, поскольку нормального решения не нашлось — пришлось сделать все пункты одинаковой ширины. Так что если, кто сообразит как решить эту проблему — пишите.

Ну, честно, говоря, там еще есть несколько «костылей», со всякими position:relative, которые я не очень люблю, но то в мозилле не работает, то в эксплорере.

Метки: , ,

Комментарии (12) на “Горизонтальное выпадающее меню для joomla1.5”

  1. Дмитрий:

    А где располагаются эти файлы JavaScript и CSS , что бы их отредактировать?

  2. admin:

    скрипт можете вставить прямо в файл index.php, например, сразу после тега <body>, который находится в используемом вами шаблоне (в папке templates). А css — либо в template.css, который находится там же в шаблоне в папке css (только без тегов <style>) — либо с тегами в index.php

  3. Оксана:

    Скрипт работает, только как убрать отсуп после меню, в которм есть вложенное подменю?

  4. в IE7 не работает

  5. admin:

    Возможно. Налепил я конечно там. Вот здесь — http://spacomputers.ru — доделывал css, сам скрипт не помню — вроде такой же остался

  6. алекс:

    народ у меня не работает подскажите плиз в чем дело!

  7. admin:

    Скорее всего потому что все-таки что-то я сделал криво.

  8. дмитрий:

    зато честно и откровенно ))

  9. Создала по вашему описанию выпадающее меню — всё прекрасно работает, но у меня на сайте стоит поиск, и при нажатии на кнопку поиска раскрываются все пункты выпадающего меню, причём, смещенные.
    Что делать?
    Так же загружала на сайт модули с выпадающими меню, и снова такая же проблема — модуль поиска при нажатии на кнопку раскрывает все пункты меню, мешая читать сообщение от модуля поиска

  10. admin:

    надо взглянуть на сайт

  11. Доктор:

    Сделал все, через CSS? но блин у меня розовая обводка выпадающего меню, как цвет изменить?

  12. admin:

    f12 — откроет вам инструменты разработчика, найдите свой элемент и посмотрите его стили, где, что, откуда.

Добавить комментарий

Перед отправкой формы:
Human test by Not Captcha