Joomla - заметки о CMS, сайтах и продвижении

Как же такое реализовать не применяя сторонних плагинов?

 

Да очень просто на самом деле...

Для начала определимся с типом меню, так как не каждый тип вывода позволяет создать многоуровневое меню. Наиболее удачным является тип меню Список а параметры начальный и последний уровень укажем 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>.

Пример описанного меню можно посмотреть тут.

Комментарии   

Slawa
0 #21 Slawa 08.03.2012 06:35
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
padding-top:0px;
=
padding:0 10px 0 10px;

Экономте пространство, товарищ
lottis
+2 #20 lottis 14.02.2011 10:03
Меню, что вы указали - не из лучших, прямо скажу :) Лучше напишите как прикрутить вместо стандартного не jquery
MAX
0 #19 MAX 16.12.2010 23:14
Я вставил код в css после сохранения на сайте от меню остались только заголовки, все пункты исчезли. В чём причина?
Ян
0 #18 Ян 07.12.2010 03:11
Забыли про min-width для ul.menu li a (для IE 7), кстати в примере меню этот атрибут есть.
Алик
0 #17 Алик 26.11.2010 18:10
Цитирую Эльвира:
Очень хочу сделать сайт-магазин, попробовала самостоятельно разобраться с joomla, ничего не получилось. Готова принять любую помощь.
Готов помочь
Иван
0 #16 Иван 12.08.2010 02:00
Супер!!! Отлично работает!

Тут много вопросов было...
Для тех кто только начинает, отвечу:
- В index.php и не в какие другие .php ничего вставлять не нужно! Это просто для наглядности с начала привели пример того что мы будем настраивать. Все только в css.
- Там в коде стоит top: 78px; (в начале) - это отступ сверху, обычно такой не нужен. Так что можете изменить под себя и поставить там 5рх или 0.
- Ещё там есть картинка для фона главных пунктов меню background-imag e: url(/../images/menu_sep.gif);
Она сама у вас на сайте не появится, так что нужно будет её нарисовать и положить в папку с картинками или в папку шаблона и указать ссылку на нее.

Спасибо за меню!!! Очень выручил!
Administrator
0 #15 Administrator 05.08.2010 10:11
Цитирую Shuhrat:
А где хранится этот код?

в css файлах шаблона - обычно это /templates/теку щий шаблон/css/temp late.css
Shuhrat
0 #14 Shuhrat 05.08.2010 07:06
А где хранится этот код?
Алексей
0 #13 Алексей 20.11.2009 09:32
Спасибо за пример. но есть некоторые проблемы с ие, ну вопервых меню не выпадает, а во вторых оно размещенно вертикально, display не помогает. не смог разобратся с css сайт, что вы дали как пример, мне именно такое меню подходит.
Андрей
0 #12 Андрей 08.10.2009 18:20
:-) В IE7 работает! для IE 6 скрипт как я понимаю нужен? УРА!!! Свершилось чудо, Благодарю!!!
Administrator
0 #11 Administrator 02.09.2009 10:12
Цитирую Pavel:
Я вот читал статью не один раз, но так и не понял.
Поменял добавил в template.css согласно Примера 2 http://www.htmlbook.ru/css/hover.html на стандартном шаблоне "rhuk_milkyway" версии 1.5.9. Но, так понимаю, надо еще что-то менять-добавлять в index.php шаблона ?
Поправьте, если не так, пожалуйста!!

По идее этого достаточно - тип меню - точно список? версия точно 1,5? суффикса у модуля точно нет?
Administrator
0 #10 Administrator 02.09.2009 10:11
Цитирую hunter:
объясните плиз по-подробнее: что делать с кодом в статье?? скопировать и вставить в файл шаблона или ??

Скопировать и вставить в файл css, с одним большим НО - это лишь основа и подправить под себя все равно нужно, соответсвенно необходимо минимальное знание css
hunter
0 #9 hunter 02.09.2009 10:01
объясните плиз по-подробнее: что делать с кодом в статье?? скопировать и вставить в файл шаблона или ??
Pavel
0 #8 Pavel 06.08.2009 00:46
Я вот читал статью не один раз, но так и не понял.
Поменял добавил в template.css согласно Примера 2 http://www.htmlbook.ru/css/hover.html на стандартном шаблоне "rhuk_milkyway" версии 1.5.9. Но, так понимаю, надо еще что-то менять-добавлят ь в index.php шаблона ?
Поправьте, если не так, пожалуйста!!
Administrator
0 #7 Administrator 06.07.2009 02:22
Цитирую sli:
> font-family:Grotic;

Gothic :-)

не совсем, это я с font-face баловался :-)
sli
0 #6 sli 06.07.2009 02:01
> font-family:Grotic;

Gothic :-)
Acden
0 #5 Acden 09.05.2009 13:08
В IE 7 меню на указанном сайте не видно - оно уходит за картинку.
OnLiner
+1 #4 OnLiner 25.04.2009 23:49
Цитирую Administrator:

ну все свое время.. как будет такая задача обязательно распишу... а просто так извиняйте пока времени нет


Жаль, если твое меню подкоректироват ь как описал выше ему б цены не было. Ну все равно СПАСИБО! Будем с этим думать. Как руки дойдут до реконструкции обязательно уведоми! :-*
Administrator
0 #3 Administrator 25.04.2009 23:43
Цитирую OnLiner:
А возможно расширить меню более 2-х уровней, т.е. скажем при наведении на "Услуги" вылезает "Сервис" а при наведении на "Сервис" вылезает "Сервис 1", "Сервис2" и также с другими пунктами? Если возможно то как код будет выглядеть?

И хотелось бы увидеть тоже самое в вертикальном исполнении.

:)

ну все свое время.. как будет такая задача обязательно распишу... а просто так извиняйте пока времени нет
OnLiner
0 #2 OnLiner 25.04.2009 23:34
А возможно расширить меню более 2-х уровней, т.е. скажем при наведении на "Услуги" вылезает "Сервис" а при наведении на "Сервис" вылезает "Сервис 1", "Сервис2" и также с другими пунктами? Если возможно то как код будет выглядеть?

И хотелось бы увидеть тоже самое в вертикальном исполнении.

:)

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


Защитный код
Обновить

Последние комментарии

  • Данное сообщение размещено здесь с помощью XRumer + XEvil 4.0 XEvil 4.0 - революционное приложение, способное ...

    Подробнее...

     
  • Данное сообщение размещено здесь с помощью XRumer + XEvil 4.0 XEvil 4.0 - революционное приложение, способное ...

    Подробнее...

     
  • В любом случае это будет инструкция, постараюсь конечно максимально полно, но инструкция как выявлять ...

    Подробнее...

     
  • Ок жду. у меня почти 120 сайтов из них 90 на джумле разных версий ) так что мне это важно поэтому ...

    Подробнее...

     
  • Да, это важная часть. Проблема в том что айболит видит не всё. То есть это мера необходимая, но ...

    Подробнее...

Вы смотрели