Блог старого компьютера

Блог старого компьютера


Главная Joomla Горизонтальное выпадающее меню на jquery для joomla

Горизонтальное выпадающее меню на jquery для joomla

13.12.2012 03:29 Администратор Joomla
Печать PDF
Сегодня будем делать простое, но довольно интересное выпадающее меню для joomla. Для того что сделать это меню вам не потребуется много времени и знаний, а результат будет довольно достойный. Так же вам не нужно будет что то устанавливать в joomla. Все что вам потребуется это создать нужные вложенные пункты меню в админке joomla и включить в модуле для меню их показ.

Далее вам необходимо будет добавить несколько строк в файл шаблона, и в файл стилей.

В файл шаблона добавляем скрипт который будет управлять нашими вложенными пунктами.

Вот он:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery.noConflict();
(function ($) {
$(function () {
$('.menu .parent').hover(
function () {
$('ul', this).slideDown(200);

},
function () {
$('ul', this).slideUp(200);
}
);

});
})(jQuery);
</script>

 Добавляем этот скрипт внутрь тега <head>. Возможно там у вас уже будет подгружена jquery библиотека, и от второй ее подгрузки лучше отказаться. Скрипт должен работать даже при условии  если вы используете библиотеки другого типа, так как в этот код я добавил неконфликтный режим. Далее необходимо добавить строчки в css файл.

Вот и они:

.menu li ul{
list-style:none;
margin:0px;
padding:0px;
display:none;
position:absolute;
}

.menu li ul li{
float:none;
margin:0px;
width:250px;
}

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

Немного доработав стили под себя у меня вышло вот такое вот довольно неплохое меню:

Надеюсь с css вы дружите и у вас выйдет ни чуть не хуже. Ну а если и нет, обращайтесь помогу.

Как и обещал небольшой архив неоформленного рабочего меню.

Комментарии  

 
0 #3 Administrator 22.04.2013 16:10
Цитирую Евгений:
А что дописать, чтобы при активном родительском пункте, всегда отображались дочерние?
Спасибо

Сейчас ответить на этот вопрос не готов, но сложного ничего нету. Необходимо просто просмотреть элементы и добавить css свойство.
Цитировать
 
 
0 #2 Евгений 18.04.2013 21:51
А что дописать, чтобы при активном родительском пункте, всегда отображались дочерние?
Спасибо
Цитировать
 
 
0 #1 Евгений 18.04.2013 21:05
Спасибо, секундное решение проблемы )
Цитировать
 

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


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?
 

Все материалы раздела