0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 1709 Просмотров
*

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 »
если без полупрозрачной рамки покругу и ссылки Портал телефонов, 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.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню

Автор s120367

Ответов: 0
Просмотров: 249
Последний ответ 03.06.2018, 13:02:55
от s120367
Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 414
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3581
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 6421
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 680
Последний ответ 12.07.2017, 21:09:01
от wectra