Теоретически - гуглите по запросу "выпадающее меню на CSS", качать готовые модули я не вижу смысла, лучше в шаблоне прописать.
...Например:
http://jemand.ru/gorizontalnoe-vypadayushhee-menyu-na-css/Практически - при помощи
Dragonfly скопируйте CSS с нужного вам шаблона. На примере Autumn - это строки 7287-7248 из template.css :
/* =============== TOPMENU ================= */
div#topmenu {
position: relative;
border-top: 0px dotted #000;
border-bottom: 0px dotted #000;
}
div#topmenu.navbar {
margin-bottom: 0;
}
div#topmenu .navbar-inner {
padding-left: 0px;
padding-right: 0px;
min-height: 34px;
border: 0;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
}
div#topmenu.navbar ul.nav {
margin: 0;
}
div#topmenu.navbar .nav > li > a {
padding: 45px 14px 22px 14px;
border-right: 3px solid #fff;
}
div#topmenu div.moduletable {
margin: 0;
}
div#topmenu .nav-collapse {
text-transform: none;
font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
letter-spacing: 0px;
}
div#topmenu.navbar .nav > .active > a,
div#topmenu.navbar .nav > .active > a:hover,
div#topmenu.navbar .nav > .active > a:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
div#topmenu {
background: none;
background-color: transparent;
}
div#topmenu.navbar .nav > li > span.separator {
float: none;
padding: 8px 14px;
text-decoration: none;
display: block;
border-right: 0px solid #bbb;
}
div#topmenu.navbar .nav > li > span.nav-header {
display: block;
padding: 8px 14px;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-transform: uppercase;
border-right: 0px solid #bbb;
}
Вставляете их себе. После этого берете соответствующий HTML код и вставляете в index.php своего шаблона.
Интересуют нас следующие контейнеры: <div id="topmenu" class="navbar"> <div class="navbar-inner">
В них вставляем Joomla запрос к БД на получение позиции. Что то вроде:
<?php if($this->countModules('position-1')) : ?>
<div id="topmenu" class="gainlayout">
<jdoc:include type="modules" name="position-1" style="xhtml" />
<div class="clr"></div>
</div>
<?php endif; ?>
Адаптируем код, лишнее выкидываем, нужное добавляем, проверяем соответствие классов и ID в стиле и коде, и так далее.
Тут нужно посидеть над этим, ничего не поделать.
http://www.joomla-create.net/item/hormenu.htmlЕсли не хочется - можно конечно скачать модуль меню, но без понимания того как он работает, вероятность получить то что хочется меньше.
Что бы пояснить конкретнее мне пришлось бы сделать это полностью.
...Хотя, настроение у меня сегодня хорошее, так что я может даже попробую, но если вышлете мне свой шаблон, потому что в стандартном Yoo_showroom нет верхнего горизонтального блока, а сам я его делать точно не буду.
08.09.2021, 21:13:03