Как же такое реализовать не применяя сторонних плагинов?
Да очень просто на самом деле...
Для начала определимся с типом меню, так как не каждый тип вывода позволяет создать многоуровневое меню. Наиболее удачным является тип меню Список а параметры начальный и последний уровень укажем 0 и 2 соответсвенно.
Теперь мы получили код ul-li-ul с которым и будем работать
Так выглядит HTML код формируемый Joomla.
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;
}
А так CSS.
Впрочем это еще не все... нужно победить IE6, который как обычно что то да не понимает, в данном случае он не понимает свойство hover, так как оно применено не к тэгу <a>.
Пример описанного меню можно посмотреть тут.
padding-right:10px;
padding-bottom:0px;
padding-top:0px;
=
padding:0 10px 0 10px;
Экономте пространство, товарищ
Тут много вопросов было...
Для тех кто только начинает, отвечу:
- В index.php и не в какие другие .php ничего вставлять не нужно! Это просто для наглядности с начала привели пример того что мы будем настраивать. Все только в css.
- Там в коде стоит top: 78px; (в начале) - это отступ сверху, обычно такой не нужен. Так что можете изменить под себя и поставить там 5рх или 0.
- Ещё там есть картинка для фона главных пунктов меню background-imag e: url(/../images/menu_sep.gif);
Она сама у вас на сайте не появится, так что нужно будет её нарисовать и положить в папку с картинками или в папку шаблона и указать ссылку на нее.
Спасибо за меню!!! Очень выручил!
в css файлах шаблона - обычно это /templates/теку щий шаблон/css/temp late.css
По идее этого достаточно - тип меню - точно список? версия точно 1,5? суффикса у модуля точно нет?
Скопировать и вставить в файл css, с одним большим НО - это лишь основа и подправить под себя все равно нужно, соответсвенно необходимо минимальное знание css
Поменял добавил в template.css согласно Примера 2 http://www.htmlbook.ru/css/hover.html на стандартном шаблоне "rhuk_milkyway" версии 1.5.9. Но, так понимаю, надо еще что-то менять-добавлят ь в index.php шаблона ?
Поправьте, если не так, пожалуйста!!
не совсем, это я с font-face баловался
Gothic
Жаль, если твое меню подкоректироват ь как описал выше ему б цены не было. Ну все равно СПАСИБО! Будем с этим думать. Как руки дойдут до реконструкции обязательно уведоми!
ну все свое время.. как будет такая задача обязательно распишу... а просто так извиняйте пока времени нет
И хотелось бы увидеть тоже самое в вертикальном исполнении.
:)
RSS лента комментариев этой записи