Чтобы подчеркнуть W3C правильный код и постное страниц, ни Flash, ни JavaScript, как правило, считается благоприятным. Многие (раскрывающемся) решения меню воспользоваться одной из этих двух. Есть ряд методов, можно использовать, чтобы получить более визуально привлекательным (выпадающее) меню, почти исключительно с использованием CSS и ограничения использования JavaScript, к минимуму.
Любое использование неупорядоченные (маркированные) списки для создания меню. Часто используемых решение выпадающего меню называется "Suckerfish". Это чистый CSS, очень худой, рубить бесплатно и так же, как 12 линий JavaScript, чтобы выручить несколько мелких проблем с IE6 и ниже. Вы можете посмотреть демо того, что может быть создан с Suckerfish. Более подробные руководства о Suckerfish техники, можно найти на htmldog.com и alistapart.com.
Suckerfish функции очень хорошо в сочетании с Joomla!.
Suckerfish В сочетании с расширенным меню модуля
Для того, чтобы Suckerfish работают хорошо, вам нужно ваше меню выводятся как хороший чистый список. Ну так уж случилось, что есть модуль там, чтобы сделать это. Его называют extended_menu, вы можете найти его здесь и в Джед.
Таким образом, захватить и установить модуль. Теперь давайте его настройки. Проще всего, если вы даете ему меню и модуль суффикс класса. Я использовал "Mainnav" (вы увидите в CSS ниже). Пару других параметров вам понадобится: - Стиль меню: список дерева - Расширение меню: Да
Так что ставьте меню, где вы хотите его, то в CSS. Это немного сложнее, он взял меня методом проб и ошибок, чтобы получить эффекты я хотела, но вы можете просто пропустить эту часть и использовать мои.
Для следующих, вы можете редактировать существующие template_css.css или создать новый файл CSS, имя его и включить в внутри <head>..</head> разделе.
#twocols{ /*the columns that gets dropped down over yours might be different*/ z-index:20; } #leftcol{ /*the columns that gets dropped down over yours might be different*/ z-index:10; } .moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme*/ position:absolute; top:187px; left:20px; z-index:100; font:0.9em Verdana, Arial, Helvetica, sans-serif; margin:0; padding:0; } #mainlevelmainnav,#mainlevelmainnav ul { float:left; list-style:none; line-height:1em; background:transparent; font-weight:700; margin:0; padding:0; } #mainlevelmainnav a { display:block; color:#f90; text-decoration:none; margin-right:15px; padding:0.3em; } #mainlevelmainnav li { float:left; padding:0; } #mainlevelmainnav li ul { position:absolute; left:-999em; height:auto; width:11em; font-weight:400; background:#36f; border:#00C 1px solid; margin:0; } #mainlevelmainnav li li { width:11em; } #mainlevelmainnav li ul a { width:11em; color:#fff; font-size:0.9em; line-height:1em; font-weight:400; } #mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{ left:-999em; } #mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul { left:auto; z-index:6000; } #mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover { background:#039 url(../images/soccerball.gif) 98% 50% no-repeat; }
Теперь, просто убедитесь, что у вас есть Z-индексов настроена правильно. И помните, чтобы г-индекс, элемент должен каким-то позиционирование, если не абсолютное, то относительное.
Не в последнюю очередь необходимо добавить JavaScript для IE в голову шаблон index.php (или JS-файл), он не любит: наведите.
<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
Будем надеяться, что следовать этому и Боба ваш дядя вы должны иметь действительный чистый падения капли для вашего меню.
В сочетании с Suckerfish умолчанию Joomla! Меню Модуль
Второй подход заключается в реализации меню списка использованием mod_mainmenu модуля, который поставляется с Joomal 1,5. Я играл с "Suckerfish" и CSS, чтобы сделать эту работу. Это отлично работать в IE 7, а также Netscape.
1. Создайте меню с следующей иерархии:
Меню 1.
- Меню 1 Подменю 1.
- Меню 1 Подменю 2.
- Меню 1 Sub меню 3.
2. Убедитесь, что параметры, чтобы установить:
• Меню Стиль установлен в список.
• Всегда показывать пунктов подменю имеет значение Да.
• Меню класса суффикс установлен в Сан - - Вы можете выбрать у вас есть, но тогда не забудьте изменить его в CSS и JS файлов.
3. Вставьте этот кусок JS в шаблон тег <head> index.php, или в файл JavaScript, который вызывается из index.php
/* ********* drop down menu Java script code - start **********/ <script type=”text/javascript”><!–//–><![CDATA[//><!– // don’t need this line if using .JS file sfHover = function() { var sfEls = document.menusan.getElementsByTagName(”LI”); for (var j=0; j<sfEls.length; j++) { sfEls[j].onmouseover=function() { this.className+=” sfhover”; } sfEls[j].onmouseout=function() { this.className=this.className.replace(new RegExp(” sfhover\\b”), “”); } } } if (window.attachEvent) window.attachEvent(”onload”, sfHover); //–><!]]></script> // don’t need this line if using .JS file /* ********* drop down menu Java script code – end **********/
4. Вот соответствующий CSS
Здесь опять же, либо существующие template_css.css (из шаблона), либо создать новый файл CSS, имя его и включить его между ... раздел index.php. Третий вариант может быть, что вы добавляете .... здесь следующие CSS> ....<!-- код сценарий и поставить это в голову раздел вашего index.php.
Никогда не ставьте код сценария частей (CSS, Java и т.д.) непосредственно в коде разделе файлы. Вы потеряете ваш XHTML-действия!
/****************** Dropdown Menu styling starts here **************/ .menusan { /* use these params to positions your menu */ position: relative; left: 10px; } .menusan, .menusan li, .menusan li ul { /* all lists */ padding: 0; margin: 0; list-style: none; } .menusan li a { display: block; width: 10em; color:#FFFFFF ; background-color:#BC031F; border:2px solid #BC031F; text-decoration:none; } .menusan li { /* all list items */ float: left; width: 10em; /* width needed or else Opera goes nuts */ border-bottom:1px solid #ccc; } .menusan li ul { /* second-level lists */ position: absolute; width: 10em; left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */ } .menusan li a:hover { border:2px solid #8C7AD6; background-color:#8C7AD6; color:#fff; } .menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */ left: auto; /* change is to 10px, 20px, etc for indenting the sub menue */ } /* **************** Dropdown Menu styling end here ***************/
5. Сохранить все, и вы должны быть хорошо идти
6. Трюк
Вы можете использовать одно меню, чтобы создать несколько раскрывающиеся меню меню. Вот как это сделать. Просто создайте меню в следующей иерархии, и вы будете иметь 2 выпадающего меню, меню 1 и меню 2.
Меню 1.
- Меню 1 Подменю 1.
- Меню 1 Подменю 2.
- Меню 1 Sub меню 3.
Меню 2.
- Меню 2 Подменю 1.
- Меню 2 Подменю 2.
- Меню 2 Sub меню 3.
Возможно, вам придется играть с CSS немного выработать позиции второго меню и т.д.
--- Это не работа на Chrome Браузер 5,0
