CSS меню для Joomla!

Таки разобрался я наконец, как сделать выпадающее меню для joomla 1.5 на css. Безо всяких там (как бы) яваскрипт.

Фактически, говорить о том, что это какое-то уникальное меню для джумлы нельзя. Потому, что это просто аналог классического suckerfish-menu под html генерируемый данной cms.

Значит дело обстоит так:

Демо
Если мы выберем в модуле mod_mainmenu тип меню – список, а всегда показывать вложенные пункты меню – флажок да, то Джумла сгенерит нам код примерно следующего содержания:

<div class="moduletable_menu">
					<h3>Main Menu</h3>
    <ul class="menu">
        <li id="current" class="parent active item1"><a href="#"><span>Home</span></a>
            <ul>
                <li class="parent item27"><a href="#"><span>1 Уровень</span></a>
                    <ul>
                        <li class="item54"><a href="#"><span>2 Уровень</span></a></li>
                        <li class="item55"><a href="#"><span>2 Уровень</span></a></li>
                    </ul>
                </li>
                <li class="item53"><a href="#"><span>1 Уровень</span></a></li>
            </ul>
        </li>
    </ul>
</div>

Различия тут могут быть только в названии модулей, которые могут разниться в случае разных суффиксов (а ставить их желательно).

Теперь, чтобы  сделать такое меню выпадающим добавляем следующий css

<style>
.moduletable_menu *{ /* тут еще и H3 попадает под раздачу */
  padding:0;
  margin:0;
}
.moduletable_menu ul.menu {
  width:200px;               /* ваша ширина меню*/
  border:1px solid #ccc;     /* для красоты */
  background-color: #FFCC66; /* для красоты */
}
.moduletable_menu ul.menu li{
  display:block;
  position: relative;
}
.moduletable_menu ul.menu li a{
  display:block;
  border:1px solid #ddd;     /* для красоты */
  padding:5px;               /* для красоты */
}
.moduletable_menu ul.menu li ul{
  display:none;
  position:absolute;
  width:200px;                /* ваша ширина меню*/
  top: 5px;                   /* отступ сверху */
  left: 200px;                /* ваша ширина меню*/
  background-color: #FFCCFF;  /* для красоты */
  white-space:nowrap;         /* для красоты */
 }

.moduletable_menu ul.menu li:hover ul{
  display:block;
  z-index:2;
}
.moduletable_menu ul.menu li:hover ul li ul{
  display:none;
}
.moduletable_menu ul.menu li:hover ul li:hover ul{
  display:block;
  z-index:3;
  background-color: #CCFF99;    /* для красоты */
}
</style>

Работает почти везде, за исключением, как вы уже наверное догадались, ie6. Это все из-за того что ослик не поддерживает псевдо-класса :hover, ни для каких элеметнов, кроме тэга <a>.

Но мир не без добрых людей. Нашлись деятели – огромный им респект – которые написали чудо-скрипт, научающий 6 эксплорер понимить разные псевдоклассы – :hover, :active и :focus

Вот этот файл

Подключается в css он следующим образом:

body {
behavior:url(«путь_к_файлу»);
}

и еще маленький хак для 6 эксплорера который не по-своему отображает padding :

.moduletable_menu ul.menu li ul{
-left:93px;
}
Горизонтальное css-меню:

---

Демо
Проделываем те же самые операции, что и в предыдущем случае с вертикальным меню. Модуль mainmenu, тип меню – список, Всегда показывать вложенные подпункты – да.
Вот примерно такой будет сгенерирован код. Здесь я напишу css для двух уровней вложенности, а можно и дальше делать (наверное) – хотя я лично в этом не вижу никакого смысла.

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

<div class="moduletable_menu">
<div class="moduletable">
<ul class="menu">
<li id="current" class="active item1"><a href="#"><span>Главная</span></a></li>
<li class="parent item11"><a href="#"><span>Новости</span></a>
<ul>

<li class="parent"><a href="#"><span>Пункт 1</span></a>
      <ul>
      <li><a href="#"><span>1</span></a></li>
      <li><a href="#"><span>2</span></a></li>
      </ul>

</li>
<li class="item19"><a href="#"><span>Пунтк 2</span></a></li>
</ul>
</li>
<li class="item12"><a href="#"><span>Прочая хрень</span></a></li>
</ul>
</div>

И css для данного меню будет выглядеть примерно так. С хаками для эксплорера конечно же.

<style>

	body {
		behavior:url("csshover.htc");
	}

     div.moduletable{
       position: relative;
       height: 30px;  /* высота меню */
     }
     ul,li{
       padding:0;
       margin:0;
     }
     ul.menu{
       clear:both;
      position:absolute;
     }
     ul.menu li a{
        height:20px;
        display: block;
        border:1px solid #CCc;
     }
     ul.menu li a:hover{
       background-color: #ccc;
     }
     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:none;
     }
     li.parent:hover ul{
       display: block;
     }
/* второй уровень вложенности */
             li.parent ul li ul{
               position: absolute;
               float:left;
               margin-left:100px;
               margin-top: -20px;
/* костыль для ie7 */
               *margin-left:0;
               *margin-top:0;
             }
             li.parent:hover ul li ul{
               display: none;
             }

             li.parent:hover ul li:hover ul{
               display: block;
             }

     ul.menu li ul li{
	display:block;
	float:none;
	clear:both;

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

</style>

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

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

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

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