Jump to content
  • 0

помогите с css меню


redfox1986
 Share

Question

я напроч запутался в иерархии css вобщем есть у меня меню при навидении на блок меню выпадает подменю, так вот подменю должжно быть разной ширины для разных пунктов меню

ссылка на пример http://jsfiddle.net/p6LHn/1/

вот код css


/**Меню css**/
ul.ldd_menu {
margin: 0px;
padding: 0;
display: block;
height: 50px;
background-color: #0051A1;
list-style: none;
font-family: "Trebuchet MS", sans-serif;
border-top: 1px solid #3474C6;
border-bottom: 1px solid #3474C6;
border-left: 10px solid #0051A1;
-moz-box-shadow: 0px 3px 4px #007BC2;
-webkit-box-shadow: 0px 3px 4px #007BC2;
-box-shadow: 0px 3px 4px #007BC2;
}
ul.ldd_menu a {
text-decoration: none;

}
ul.ldd_menu > li {
float:left;
position:relative;
}
ul.ldd_menu > li > span {
float: left;
color: #fff;
background-color: #0051A1;
height: 50px;
line-height: 50px;
cursor: default;
padding: 0px 20px;
text-shadow: 0px 0px 1px #fff;
border-right: 1px solid #3474C6;
border-left: 1px solid #0049A1;
}
ul.ldd_menu .ldd_submenu {
position:absolute;
z-index: 2;
top: 50px;
display: none;
opacity: 0.9;
left: 0px;
font-size: 10px;
background: #0051A1;
border-top: 1px solid #3474C6;
-moz-box-shadow: 0px 3px 4px #0051A1 inset;
-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
-box-shadow: 0px 3px 4px #0051A1 inset;
}

a.ldd_subfoot{
background-color: #f0f0f0;
color: #444;
display: block;
clear: both;
padding: 15px 20px;
text-transform: uppercase;
font-family: Arial, serif;
font-size: 12px;
text-shadow: 0px 0px 1px #fff;
-moz-box-shadow: 0px 0px 2px #777 inset;
-webkit-box-shadow: 0px 0px 2px #777 inset;
-box-shadow: 0px 0px 2px #777 inset;
}
ul.ldd_menu ul {
list-style: none;
float: left;
border-left: 1px solid #2A6DC3;
margin: 20px 0px 10px 30px;
padding: 10px;
}
li.ldd_heading {
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color: #69C3FF;
text-shadow: 0px 0px 1px #B03E23;
padding: 0px 0px 10px 0px;
}
ul.ldd_menu ul li a {
font-family: Arial, serif;
font-size: 10px;
line-height: 20px;
color: #fff;
padding: 1px 3px;
}
ul.ldd_menu ul li a:hover {
-moz-box-shadow: 0px 0px 2px #2A6DC3;
-webkit-box-shadow: 0px 0px 2px #2A6DC3;
box-shadow: 0px 0px 2px #2A6DC3;
background: #007BC2;
}
/**конец Меню css**/

вот сам код в документе


<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Благоустройство дачи</span>
<div class="ldd_submenu">
<ul>
<li><a href="#">Дача своими руками</a></li>
<li><a href="#">Вода, Водопровод и водоочистка</a></li>
<li><a href="#">Постройки</a></li>
<li><a href="#">Печи, Камины</a></li>
<li><a href="#">Инструменты</a></li>
<li><a href="#">Советы дачникам</a></li>
</ul>

<a class="ldd_subfoot" href="#"></a>
</div>
</li>
<li>
<span>Сад и огород</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Фрукты и ягоды</li>
<li><a href="#">Клубника</a></li>
<li><a href="#">Крыжовник</a></li>
<li><a href="#">Малина</a></li>
<li><a href="#">Смородина</a></li>
</ul>
<ul>
<li class="ldd_heading">Овощи</li>
<li><a href="#">Кабачки</a></li>
<li><a href="#">Перец</a></li>
<li><a href="#">Огурцы</a></li>
<li><a href="#">Морковь</a></li>
<li><a href="#">Картофель</a></li>
<li><a href="#">Зелень и травы</a></li>
</ul>
<ul>
<li class="ldd_heading">Деревья и кустарники</li>
<li><a href="#">Яблоня</a></li>
<li><a href="#">Малина</a></li>
<li><a href="#">Крыжовник</a></li>
</ul>
<ul>
<li class="ldd_heading">Цветы на даче</li>
<li><a href="#">Нарцисс</a></li>
<li><a href="#">Гибискус</a></li>
<li><a href="#">Флоксы</a></li>
<li><a href="#">Лилейники</a></li>
<li><a href="#">Петунии</a></li>
</ul>
<ul>
<li class="ldd_heading">Комнатные растения</li>
<li><a href="#">Нарцисс</a></li>
<li><a href="#">Гибискус</a></li>
<li><a href="#">Флоксы</a></li>
<li><a href="#">Лилейники</a></li>
<li><a href="#">Петунии</a></li>
</ul>
<ul>
<li class="ldd_heading">Делимся опытом</li>

</ul>
<ul>
<li class="ldd_heading">Болезни и вредители</li>

</ul>
<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
</div>
</li>
<li>
<span>Меню №3</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Заголовок №1</li>
<li><a href="#">Ссылка №1</a></li>
<li><a href="#">Ссылка №2</a></li>
<li><a href="#">Ссылка №3</a></li>
<li><a href="#">Ссылка №4</a></li>
<li><a href="#">Ссылка №5</a></li>
</ul>
<ul>
<li class="ldd_heading">Заголовок №2</li>
<li><a href="#">Ссылка №1</a></li>
<li><a href="#">Ссылка №2</a></li>
<li><a href="#">Ссылка №3</a></li>
<li><a href="#">Ссылка №4</a></li>
<li><a href="#">Ссылка №5</a></li>
</ul>
<ul>
<li class="ldd_heading">Заголовок №3</li>
<li><a href="#">Ссылка №1</a></li>
<li><a href="#">Ссылка №2</a></li>
<li><a href="#">Ссылка №3</a></li>
<li><a href="#">Ссылка №4</a></li>
<li><a href="#">Ссылка №5</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
</div>
</li>
</ul>

как я понял за подменю блок отвечает class="ldd_submenu"

если к примеру сделать так


ul.ldd_menu .ldd_submenu {
position:absolute;
z-index: 2;
top: 50px;
[b]width: 180px;[/b]
display: none;
opacity: 0.9;
left: 0px;
font-size: 10px;
background: #0051A1;
border-top: 1px solid #3474C6;
-moz-box-shadow: 0px 3px 4px #0051A1 inset;
-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
-box-shadow: 0px 3px 4px #0051A1 inset;
}

то тогда у всех подменю будет ширина 180 пикселей

если сделать так



ul.ldd_menu .ldd_submenu {
position:absolute;
z-index: 2;
top: 50px;
[b]width: 180px;[/b]
display: none;
opacity: 0.9;
left: 0px;
font-size: 10px;
background: #0051A1;
border-top: 1px solid #3474C6;
-moz-box-shadow: 0px 3px 4px #0051A1 inset;
-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
-box-shadow: 0px 3px 4px #0051A1 inset;
}
ul.ldd_menu .ldd_submenu2 {
position:absolute;
z-index: 2;
top: 50px;
[b]width: 480px;[/b]
display: none;
opacity: 0.9;
left: 0px;
font-size: 10px;
background: #0051A1;
border-top: 1px solid #3474C6;
-moz-box-shadow: 0px 3px 4px #0051A1 inset;
-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
-box-shadow: 0px 3px 4px #0051A1 inset;
}

а в документ вставить


<div class="ldd_submenu">
....
бла бла бла

<div class="ldd_submenu2">

...
бла бла бла

то первый блок будет 180пикселей а второй получается меньше но не 480 как надо, в чем проблемма, никак непойму иерархию этого кода

да вот еще код в документе


<script type="text/javascript">
$(function() {
var $menu = $('#ldd_menu');
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate(300,function(){
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>

Помогите понять как расширить последующие блоки подменю меню

Edited by redfox1986
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Лезть в ваш код совсем неохота. Если коротко, то тянущийся дроп сделать достаточно легко, ведь блоки на абсолюте и так тянутся по содержимому.

Допустим структура дропа такая


<div class="drop">
<ul>
<li class="ldd_heading">Заголовок №1</li>
<li><a href="#">Ссылка №1</a></li>
<li><a href="#">Ссылка №2</a></li>
<li><a href="#">Ссылка №3</a></li>
<li><a href="#">Ссылка №4</a></li>
<li><a href="#">Ссылка №5</a></li>
</ul>
</div>

В данном случае - флотаете влево улку. На лишки - флоат-лефт+видс100%. На ссылку дисплеи блок + ваитспеис-ноуврап.

Должно работать)

Link to comment
Share on other sites

  • 0

если честтно то ничего не понял, вот еще тока заметил что если на сайте http://jsfiddle.net/ в примерах делать и прописать <div class="ldd_submenu" style="width: 460px"> то вроде все работает, а вот на сайте самом не хочет ( да еще блок когда выдвигается под ним яндекс директ, и получается что ссылка яндекс директ и все объявления накладываются поверх выезжаюшего меню, хоть я и поставил z-index / это надо заключить яндекс директ в див ? чтобы ненакладывалась ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy