Выподающее меню

Levhik

Осваиваюсь на форуме
13
0 / 0

Выподающее меню

« : 23.08.2010, 21:56:30 »

подскажите пожалуйста новичку как можно сделать такое меню как на скрине ниже?

Записан

iluho

Давно я тут
605
50 / 4
Гламурный КабанчеГ

Re: Выподающее меню

« Ответ #1 : 23.08.2010, 22:07:35 »

это так называемые "табы". попробуйте копать по названию. по английски tabs модулей много таких

Записан

Милый и порядочный! Верьте мне во всем!

iluho

Давно я тут
605
50 / 4
Гламурный КабанчеГ

Re: Выподающее меню

« Ответ #2 : 23.08.2010, 22:08:51 »

http://extensions.joomla.org/search?q=tab

посмотрите, может что понравится

Записан

Милый и порядочный! Верьте мне во всем!

danik.html

Живу я здесь
2650
353 / 4

Re: Выподающее меню

« Ответ #3 : 23.08.2010, 22:09:59 »

если без полупрозрачной рамки покругу и ссылки Портал телефонов, MP3 ... то на чистом css(и пинками для ие) и стандартным модулем mod_mainmenu. Новичек врядли осилит.

Записан

【Мегапак Virtuemart】:
• метатеги (description,keywords)
• заголовки (title)
• красивые алиасы (чпу) без тормозов и дублей!

Levhik

Осваиваюсь на форуме
13
0 / 0

Re: Выподающее меню

« Ответ #4 : 23.08.2010, 22:23:29 »

Цитата: danik.html от 23.08.2010, 22:09:59

если без полупрозрачной рамки покругу и ссылки Портал телефонов, MP3 ... то на чистом css(и пинками для ие) и стандартным модулем mod_mainmenu. Новичек врядли осилит.

я осилю. просто скажите через списки <ul> это реально сделать? Там надо что бы список 1-го уровня был одной ширины(110px) тогда все остальные подменю тоже такой ширины стают. А мне надо телефоны, mp3, фото, GPS... имели один backgraund. А осталные - беленький фон с ободочком как и там.

Записан

danik.html

Живу я здесь
2650
353 / 4

Re: Выподающее меню

« Ответ #5 : 23.08.2010, 22:48:03 »

на ul можно сделать, но либо без полупрозрачной каемки(можно просто зеленый бордюр) либо с ней, но фиксированной ширины.
ul.menu > li{
float: left;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #fff;
border: 3px solid #0f0;
border-bottom: none;
}
ul.menu > li > ul{
display: none;
overflow: hidden;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #fff;
border: 3px solid #0f0;
}
ul.menu > li:hover > ul{
display: block;
}
ul.menu > li > ul > li{
float: left;
}

вот css-набросок. border-radius нужно продублировать для -moz- и -webkit- и border-radius.htc . если в планах есть ие6( менее 7 % юзеров по liveinternet статистике) то нужен еще iehover.htc

Записан

【Мегапак Virtuemart】:
• метатеги (description,keywords)
• заголовки (title)
• красивые алиасы (чпу) без тормозов и дублей!

Levhik

Осваиваюсь на форуме
13
0 / 0

Re: Выподающее меню

« Ответ #6 : 24.08.2010, 01:47:16 »

в общем вот что у меня получилось. При наведении мышки на меню появляется такое серенькое меню:

вот код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" dir="ltr" >
<head>

<style type="text/css">
#top-menu ul{
	list-style: none;
}

#top-menu > ul > li{
	float: left;
}

#top-menu ul.menu-nav > li{
	overflow:visible;
	width: 110px;
}

#top-menu ul.menu-nav > li > a{
	background-color:blue;
	color:white;
	display:block;
	height:40px;
}

#top-menu ul.menu-nav > li > ul {
	width: 350px;
	display:none;
}

#top-menu ul.menu-nav > li:hover > ul {display:block}

#top-menu ul.menu-nav > li > ul > li {
	background-color: silver;
	width: 150px;	
	float: left;
}

#top-menu ul.menu-nav > li > ul > li  > a{
	font-style: italic;
	padding-left: 5px;
}

#top-menu ul.menu-nav > li > ul > li  > ul{
		clear: both;
}

#top-menu ul.menu-nav > li > ul > li  > ul > li > a{
	padding-left: 10px;
	display: block;
	margin: 3px 0;
}
</style>
	
</head>
<body>

<div id="top-menu">
				<ul class="menu-nav">
					<li class="parent item28">
						<a href="#"><span>Протеиновые коктейли</span></a>

							<ul>
								<li class="parent item55">	
									<a href="#"><span>по категориям</span></a>
									<ul>
										<li class="item56">
											<a href="#"><span>сывороточный протеин</span></a>
										</li>
											
										<li class="item57">

											<a href="#"><span>казеин</span></a>
										</li>
											
										<li class="item58">
											<a href="#"><span>яичный</span></a>
										</li>
									</ul>
								</li>
									
								<li class="parent item59">

									<a href="#"><span>по брендам</span></a>
									<ul>
										<li class="item60">
												<a href="#"><span>OLIMP</span></a>
										</li>
											
										<li class="item61">
											<a href="#"><span>MAMUT</span></a>

										</li>
											
										<li class="item62">
											<a href="#"><span>NATURAL</span></a>
										</li>
									</ul>
								</li>
							</ul>
						</li>

											
						<li class="item29">
							<a href="#"><span>Возможности</span></a>
						</li>
											
						<li class="item18">
							<a href="#"><span>Новости</span></a>
						</li>
						
						<li class="item30">
							<a href="#"><span>Сообщество</span></a>

						</li>
					</ul>
</div>
</body>
</html>

все работает как надо, вот только не нравится как серый бэкграунд тображается. хотелось чтобы было так:

как вариант можно поставить путой блок с со стилем clear: both; но я не знаю как это в Joomla можно сделать.

Записан

danik.html

Живу я здесь
2650
353 / 4

Re: Выподающее меню

« Ответ #7 : 24.08.2010, 12:01:44 »

#top-menu ul.menu-nav > li > ul {
   width: 350px;
   display:none;
   background-color: silver;
   overflow: hidden;
}

для ие6 еще нужно zoom: 1;
благодаря overflow: hidden (zoom: 1) блок будет охватывать все плавающие дочерние элементы.

Записан

【Мегапак Virtuemart】:
• метатеги (description,keywords)
• заголовки (title)
• красивые алиасы (чпу) без тормозов и дублей!

Levhik

Осваиваюсь на форуме
13
0 / 0

Re: Выподающее меню

« Ответ #8 : 24.08.2010, 20:33:12 »

усе работает. осталось хаки прописать. начиная с ie6.

Записан

убрать из меню заголовки h3 Автор nexter	Ответов: 19 Просмотров: 8332	03.02.2020, 18:49:47 от durte
При добавлении нового пункта меню не отображается содержимое Автор Denko	Ответов: 2 Просмотров: 3593	16.01.2020, 18:40:55 от Denko
Не нажимается пункт меню на мобильной версии Автор Sensession	Ответов: 7 Просмотров: 5193	04.01.2020, 16:45:27 от xpank
Не отображаются пункты в меню Автор physic	Ответов: 20 Просмотров: 23533	20.09.2019, 16:54:01 от beliyadm
Как в ARI Ext Menu добиться работы параметра "Показать в меню"? Автор vasmed	Ответов: 1 Просмотров: 3880	01.03.2019, 11:12:18 от vasmed

Выподающее меню - Joomla 1.5: Вопросы по работе с меню

Новости Joomla

WT Set elements v.1.0.0: плагин поля для RadicalMart

IWS.BY VK app widget - Виджет приложения ВКонтакте для Joomla

SW JProjects v.2.5.0 - компонент каталога цифровых проектов на Joomla

Levhik

Выподающее меню

iluho

Re: Выподающее меню

iluho

Re: Выподающее меню

danik.html

Re: Выподающее меню

Levhik

Re: Выподающее меню

danik.html

Re: Выподающее меню

Levhik

Re: Выподающее меню

danik.html

Re: Выподающее меню

Levhik

Re: Выподающее меню

Похожие темы