LINUX.ORG.RU

меню

 


0

1

Есть исxодный вариант меню:

http://jsfiddle.net/Wp9XL/

Ключевой момент - li:hover ul {} стиль содержит z-index: -1; только в таком варианте у меня нет линии между пунктом верхнего уровня «Second» и его вложенным ul при наличии верхней границы у этого блока, там, где блок выступает за пределы пункта «Second».

Но с этим z-index -1 если класс .clear показать, убрав display: none; меню второго уровня проваливается под его содержимое.

Есть идеи как и границу затереть между пунктом меню верхнего уровня и его вложенным блоком меню и этот вложенный блок расположить над тем что идёт ниже меню?

<ul class="mainmenu">
    <li>First</li>
    <li class="dir">
        Second
        <ul>
            <li>Second .1</li>
            <li>Second .2</li>
            <li>Second .3</li>
        </ul>                
    </li>
    <li>Third</li>
</ul>
<div class="clear">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
</div>
ul.mainmenu {
    font: 20px Arian,sans-serif;
    padding: 5px;
}
li {
    padding: 2px 5px;  
    display: block;        
}
ul.mainmenu>li {
    float: left;
    display: block;
    margin-right: 30px;
    cursor: pointer;
    position: relative;
    border-left-width: 10px;
}
ul.mainmenu>li.dir:hover {
    border: 1px solid #ddd;
    border-bottom: none;
    margin: -1px 29px 0 -1px;
}
ul.mainmenu>li:hover {
    margin-top: -3px;
    border-top: 3px solid black;
    background: white;
}
li>ul {
    display: none;
    float: left;
    position: absolute;            
    top: 27px;
    left: -1px;            
}
li:hover ul {
    display: block;
    border: 1px solid #ddd;
    background: white;
    z-index: -1;
}
li ul li {
    clear: both; 
    margin: 0;    
    white-space:nowrap; 
}
li ul li:hover {
    border-left: 3px solid black; 
    margin-left: -3px;        
}
.clear {
  clear: both;
  display: none;
}
★★

А использовать jquery не хотите? Могу пошарить по своим исходникам, там есть годные кусочки.

sudo-s ()
Ответ на: комментарий от r_asian

Если ты имеешь в виду внешний вид табов, а именно - активный таб не имеет нижней границы, то это не то, там ul в котором показываются «корешки» табов имеет border-bottom, при таком подходе у меня в меню полоса ниже активного элемента меню верхнего уровня будет растянута на всю ширину ul самого верхнего уровня. А мне нужна граница для блока подменю.

Reaper ★★ ()
Ответ на: комментарий от sudo-s

Покажите. Хотелось бы обойтись, конечно, средствами только CSS, там у вас с отключенными скриптами меню функционирует?

Reaper ★★ ()
Ответ на: комментарий от Reaper

Нет, только со скриптами, ибо само позиционирование описывается скриптом.

function getOffsetRect(elem) 
	{
	    var box = elem.getBoundingClientRect()
	    var body = document.body
	    var docElem = document.documentElement
	    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
	    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
	    var clientTop = docElem.clientTop || body.clientTop || 0
	    var clientLeft = docElem.clientLeft || body.clientLeft || 0
	    var top  = box.top +  scrollTop - clientTop
	    var left = box.left + scrollLeft - clientLeft
	    return { top: Math.round(top), left: Math.round(left) }
	}
	$(document).ready(function()
{
	$(".top_menu li").hover
	(function()
	{
		var bro=navigator.appName;
		var ss; var tt; var xx=0;
		var br=getOffsetRect(this);
		var ss=br.left;
		var tt=br.top;
		//$(this).attr({style:""});
		if (bro=="Microsoft Internet Explorer") {/*alert('УМРИ')*/$(".fly", this).attr({ style: "left: "+(ss+0)+"px; top: "+(tt+32)+"px;"});
												$(".fly-2", this).attr({ style: "left: "+(ss+($(".fly").width()))+"px; top: "+(tt+32)+"px;"});	
												$(".fly", "a").attr({style:"color:white"});
												$(".fly-2", "a").attr({style:"color:white"});
												}
		else {$(".fly", this).attr({ style: "left: "+(ss+0)+"px; top: "+(tt+34)+"px; "});
				//alert ( $(".fly-2").attr("width") );
				
				$(".fly-2", this).attr({ style: "left: "+(ss+($(".fly").width()))+"px; top: "+(tt+34)+"px;"});	
			};
		$(".fly", this).show();//fadeIn("fast");
		$(".fly-2", this).show();
		
	},
	
	function()
	{
	$(".fly", this).hide();//fadeOut("fast");
	$(".fly-2", this).hide();//fadeOut("fast");
	//$(this).attr({style: "border:none; padding:2px"});
	//$("li" ,this).attr({style: "background-color:#00FF00"});
	}
	);
	
	$(".fly", this).hover(function()
	{
		$(".fly", this, "a").attr({style: "color:white;"});
	})
	}
);

fly - основное меню, fly2 - вложенное

sudo-s ()

Но с этим z-index -1 если класс .clear показать, убрав display: none; меню второго уровня проваливается под его содержимое.

Поставь на ul.mainmenu>li { z-index: 1; }, а во втором уровне z-index: -1 убери. ССЗБ же.

Deleted ()
Ответ на: комментарий от sudo-s

Ясно, спасибо. Всё же без js меню должно функционировать, хоть я и придерживаюсь точки зрения, что маргиналы должны страдать. )

Reaper ★★ ()

Кстати, если можно, то li>ul { top: 100% }, а не 27px.

Deleted ()
Ответ на: комментарий от Reaper

У меня в обоих случаях одинаково. Возможно, это из-за разных шрифтов у нас с тобой.

У меня есть мысль впихать после заголовка («Second») div (на одном уровне со внутренним ul) и напичкать его позиционированием и белым фоном, чтобы он наехал на часть верхнего бордера, но пока что-то выходит не совсем так, как я ожидаю %)

Deleted ()
Ответ на: комментарий от Deleted

Попробуй так:

<ul class="mainmenu">
    <li>First</li>
    <li class="dir">
        Second
        <div class="wuzzah"></div>
        <ul>
            <li>Second .1</li>
            <li>Second .2</li>
            <li>Second .3</li>
        </ul>                
    </li>
    <li>Third</li>
</ul>

<div class="clear">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
</div>
ul.mainmenu {
    font: 20px Arian,sans-serif;
    padding: 5px;
}
li {
    padding: 2px 5px;  
    display: block;        
}
ul.mainmenu>li {
    float: left;
    display: block;
    margin-right: 30px;
    cursor: pointer;
    position: relative;
    border-left-width: 10px;
    z-index: 1;
}
ul.mainmenu>li.dir:hover {
    border: 1px solid #ddd;
    border-bottom: none;
    margin: -1px 29px 0 -1px;
}
ul.mainmenu>li:hover {
    margin-top: -3px;
    border-top: 3px solid black;
    background: white;
}
li>ul {
    display: none;
    position: absolute;            
    top: 100%;
    left: -1px;
}
li:hover ul {
    display: block;
    border: 1px solid #ddd;
    background: white;
}
li ul li {
    clear: both; 
    margin: 0;    
    white-space:nowrap; 
}
li ul li:hover {
    border-left: 3px solid black; 
    margin-left: -3px;        
}
.clear {
  clear: both;
}
.wuzzah {
	bottom: -1px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 2;
	background: #FFF;
	height: 1px;
}
Deleted ()
Ответ на: комментарий от Deleted

Если, конечно, у тебя есть возможность дёргать исходник.

Deleted ()
Ответ на: комментарий от sudo-s

Вот это значительно ближе к нужному. Position: absolute смущает. Главное меню оно же для всех страниц и оно довольно высокое (с дочерними сабменю). Такой подход потребует на каждой странице заботиться о том, чтобы контент позиционировать абсолютно.

Reaper ★★ ()
Ответ на: комментарий от Deleted

O! Выглядит как то, что надо, спасибо (всем).

p.s. да точно, отличное решение.

Reaper ★★ ()
Последнее исправление: Reaper (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.