FofonRed Blog

Стандартное меню Joomla 1.5 не имеет функции раскрывающее меню. Но что делать если заказчик хочет чтобы меню было раскрывающееся? Сейчас рассмотрим как создать раскрывающееся меню и при этом не использовать дополнительных модулей.

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

После чего идем на сайт, обновляемся, жмем правой кнопкой и выбираем исходный код. Ищем в коде блок mod_mainmenu, начинается обычно дивом div moduletable_menu.
и видим примерно такой же код как ниже. Вот такой код нам сформировала Joomla, после того как мы выбрали нужные нам параметры.

<ul class="menu">
 <li class="item60">
  <a href="http://joomla15.ru" mce_href="http://joomla15.ru"><span>Главная</span></a>
 </li>
 <li class="item53">
  <a href="/catalogue.html" mce_href="/catalogue.html"><span>Каталог</span></a>
 </li>
 <li class="item54">
  <a href="/contacts.html" mce_href="/contacts.html"><span>Контакты</span></a>
 </li>
 <li class="parent item58">
  <a href="/service.html" mce_href="/service.html"><span>Услуги</span></a>
  <ul>
   <li class="item63">
    <a href="/service/service.html" mce_href="/service/service.html"><span>Сервис</span></a>
   </li>
  </ul>
 </li>
</ul>

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

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;
}

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

Popularity: 57% [?]

Еще можно почитать вот эти посты:

• Трастовые сайты для поднятия ТиЦ и PR, часть первая.
• Акция «Обзор за постовой»
• Трастовые сайты для поднятия ТиЦ и PR, часть третья.
• Трастовые сайты для поднятия ТиЦ и PR, часть вторая.
• Acer Aspire 5315 — чистка клавиатуры и радиатора

автор FofonRed \\ теги: раскрывающееся меню