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>

Метки: , ,

Комментарии (17) на “CSS меню для Joomla!”

  1. Сергей:

    А куда конкретно добавлять «чтобы сделать такое меню выпадающим добавляем следующий css» ? В template.css ?

  2. admin:

    Да, можно в template.css

  3. Тимур:

    На сайте разработчика написано, что ссылку на csshover.htc надо задавать относительно html файла, а не css. Подскажите пожалуйста как вы реализовали привязку данного файлика, если можно поподробней. Третий день бьюсь.

  4. Якудза:

    Хочу предложить вариант меню без картинок, только ксс, но без поддержки ИЕ
    http://webdevel.pp.ua/archives/36

  5. Якудза:

    Ебаные вертикальные иконки в каптче, они горизонатльные, а не вертикальные!

  6. Оксана:

    Все работает, только не получается вывести стиль h3 из общей кучи для вертикального меню. и как убрать большой отсуп слева?

  7. admin:

    хе-хе

  8. Елена:

    В IE6 при загрузке станицы выдает ошибку an error has occured in the script on the page. Работаю на Денвере, пробовала разные варианты подключения csshover. Что нужно исправить, чтоб работало?

  9. admin:

    Че-то уже не помню, но по-моему у меня та же фигня.
    Забейте на ie6 — вбейте еще один гвоздь в его гроб

  10. Трампупус:

    Большое спасибо за такую инфу уже 2 недели бьюсь оказывается все анмного проще чем я намутил! Может еще вопросами завалю)

  11. Все хорошо все отлично работает в горизонтальном меню, очень бы хотелось только узнать как бы мне так выровнять подменю по левому краю, так чтобы родитель остался по центру. Меню реализовано на этом сайте: http://www.tamimc.info, буду очень благодарен за ответ.

  12. sad:

    Спасибо, друг. То, что нужно, без понтов. А ие6 пора на покой

  13. twilight:

    Автор, а кодировку в заголовке документов (демо) указывать не комильфо или религия не позволяет?

  14. admin:

    спасибо, поправил

  15. Андрей:

    интересно, просидел 2 часа пытаясь подключить HTC, чтобы исправить :hover для IE6… но ни черта не выходит. IE-Tester выдаёт ошибку при загрузке страницы: an error has occurred in the script on this page. Сам файл htc 100% подключается к index.html… но в ie6 не работает.

    :hover можно исправить ещё и просто JS кодом… и JQuery кодом… но сидел и мучал страницу из принципа. С локальным сервером и без него. Вывод: Какие же всё-таки козлы его сделали)

    Ps. капча у вас на сайте — жуткая. смените. написано, чтоб «вертикально» иконки выставили… а на самом деле ждёт «горизонтально». + при возврате «назад» после 1-го не правильного ввода… не обновляет картинки… из-за чего любая комбинация (даже «правильная») не действует.

  16. чуть не забыл — что бы все работало назначте меню суффикс класа -menu1, ну а остальное как в статье автора

  17. admin:

    Насчет ие6 они не козлы, просто он очень старый, он сто лет назад умел такое, что сейчас только в других появилось. Забейте на него, дайте ему умереть. Не поддерживайте его. Вообще лучше ie ниже 9 не поддерживать. Сейчас это — зло.

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

Перед отправкой формы:
Human test by Not Captcha