Горизонтальное выпадающее меню для 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, которые я не очень люблю, но то в мозилле не работает, то в эксплорере.

подобные записи

• Выпадающее меню на joomla 1.5 без гемороя
• CSS меню для Joomla!
• Чем открыть файл .jpa / Компонент бэкапа для joomla 1.5
• Облако тегов для Joomla1.5
• Как убрать в joomla-копирайт, значок, логотип и тд.

Метки: joomla, выпадающее меню

Запись опубликована 15.02.2010 в 10:02 пп и размещена в рубрике joomla. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.