Июл 29

Раскрывающееся меню в Joomla 1.5 своими руками


Стандартное меню Joomla 1.5 не имеет функции раскрывающее меню. Но что делать если заказчик хочет чтобы меню было раскрывающееся? Сейчас рассмотрим как создать раскрывающееся меню и при этом не использовать дополнительных модулей. Для начала определимся с типом меню, так как не каждый тип вывода позволяет создать многоуровневое меню. Наиболее удачным является тип меню Список, а параметры начальный и последний уровень укажем 0 и 2 соответсвенно. И так идем в админ панели Joomla 1.5 в менеджер модулей, ищем mod_mainmenu (Главное меню обыяно называеться), заходим в него и выставляем параметры как на картинке. Настройки mod_mainmenu После чего идем на сайт, обновляемся, жмем правой кнопкой и выбираем исходный код. Ищем в коде блок mod_mainmenu, начинается обычно дивом div moduletable_menu. и видим примерно такой же код как ниже. Вот такой код нам сформировала Joomla, после того как мы выбрали нужные нам параметры.

[php]
<UL class="menu">
<LI class="item60">
<A href="http://fofonred.ru" mce_href="http://fofonred.ru"><SPAN>Главная</SPAN></A>
</LI>
<LI class="item53">
<A href="/ocompany.html" mce_href="/ocompany.html"><SPAN>О компании</SPAN></A>
</LI>
<LI class="item54">
<A href="/portfolio.html" mce_href="/portfolio.html"><SPAN>Портфолио</SPAN></A>
</LI>
<LI class="parent item58">
<A href="/price.html" mce_href="/price.html"><SPAN>Цены</SPAN></A>
<UL>
<LI class="item63">
<A href="/uslugi/uslugi.html" mce_href="/uslugi/uslugi.html"><SPAN>Услуги</SPAN></A>
</LI>
</UL>
</LI>
</UL>

[/php]

Теперь нам нужно написать CSS файлик для нашей менюшки.

[php]ul.menu {
position: absolute;
top: 78px;
left: 172px;
list-style-type: none;
padding:0;
margin:0;

}
ul.menu li {
float: left;
list-style-type: none;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
padding-top:0px;
background-image: url(../images/menu_sep.gif);
background-position: right top;
background-repeat: no-repeat;
position:relative;
}

ul.menu a {
display: block;
height: 22px;
padding: 0 10px;
overflow: hidden;
color: #7a7a7a;
font-family:Grotic;
font-style:bold;
font-size: 11px;
text-transform: uppercase;
text-decoration:none;
padding-top:3px;
}
ul.menu li.active a, ul.menu li a:hover {
color:#E8A03D;
}
ul.menu li a, ul.menu li.active ul li a {
color:#7a7a7a;
}

ul.menu li ul {
display:none;
position:absolute;
top:2em;
left:0;
padding:0px 0px 7px;
margin:0px 0px 7px;
background-color:white;
opacity:0.75;

}
ul.menu li:hover ul {
display:block;
}
ul.menu li:hover ul li a{
height:auto;
}[/php]

Вот как бы пример в кратце, основа заложена. Применяйте фантазию и все получиться. Что не понятно отписываемся в комментарии. Всем удачи!

FofonRed.ru

автор FofonRed \\ теги:

2 Пингов к “Раскрывающееся меню в Joomla 1.5 своими руками”

  1. Продвижение статей для поднятия позиций | FofonRed Blog Говорит:

    […] Раскрывающееся меню в Joomla 1.5 своими руками […]

  2. Блогу 1 год | FofonRed Blog Говорит:

    […] визуальных закладнок в Opera и Mozilla Firefox с Яндекс Бар. Раскрывающееся меню в Joomla 1.5 своими руками Трастовые сайты для поднятия ТиЦ и PR, часть первая. Acer […]


5 комментариев к “Раскрывающееся меню в Joomla 1.5 своими руками”

  1. 1. ИльяNo Gravatar Говорит:

    Скажите пожалуйста, а как использовать этот HTML на блогах? К примеру на blogger? Пожалуйста напишите на почту, очень нужно.

  2. 2. FofonRedNo Gravatar (49 comments.) Говорит:

    Тут написано как делать горизонтальное меню, по аналогии можно и это меню туда закинуть.

  3. 3. АлексNo Gravatar Говорит:

    Не работает Ваше меню в IE 6 и ниже. А копия этой статьи на нескольких сайтах есть.

  4. 4. FofonRedNo Gravatar (49 comments.) Говорит:

    Копия это когда скопировал и вставил, здесь другой случай 8)

  5. 5. АлексейNo Gravatar (2 comments.) Говорит:

    Очень полезная информация, огромное спасибо!

Написать ответ