Цитата:
|
Aetae, либо ночь на дворе, либо: "Остановка всплытия" - кроссбраузерно, а остальное нет... Хотя в моем случае по-моему все равно откуда и куда двигаться... пора спать, завтра выложу результат =\
|
Octane,
Вы это имели ввиду? if($(event.target.nodeName).parent('ul').hasClass('menu')){alert('Нажали на меню')}
вместо alerta делаем вызов по умолчанию, в противном случае, выключаем менюшку? |
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
body {background: #424A51;}
.block {position:absolute;top:20%;left: 40%;width: 200px;height: 50px;}
.block a {border: 1px solid #DDD;color: #FFF;display: block;text-align: center;text-decoration:none;width: 140px;height: 20px;}
.block img {border: 1px solid #DDD; width: 140px;height: 50px;}
</style>
<script type="text/javascript">
$(function(){
$('.block').each(function(){
$(this).find('img').hide();
$(this).find('a').mouseover(function(){
$(this).next('img').show();
});
$(document).click(function(e){
(e.target.nodeName != $('.block img').get(0).tagName) && $(this).find('img').hide();
});
});
});
</script>
<div class="block">
<a href="#" rel="">link</a>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" />
</div>
|
monolithed, не пойдет
$("body").click(function(event) {
if($(event.target.nodeName).parents('ul').hasClass('menu') || event.target.className == 'menu'){
//открываем меню, сделав еще1 клик
} else {
//закрываем меню
}
});
пока рабочий вариант только этот, но, если нужно открыть меню по клику, то приходится делать 2 клика, а если открыть нужно при наводке, то сначала делаем клик, потом немного теребим мышку и вуаля... в общем бред. Как вариант, сделать иначе: //conf - options
if(conf.event == 'click') {
$("body").click(function(event) {
if($(event.target.nodeName).parents('ul').hasClass('menu') || event.target.className == 'menu'){
//открываем меню, без какого-либо event
} else {
//закрываем меню
}
});
} else {
//юзаем обычный hover для работы с вложенностью
}
|
Цитата:
|
monolithed,
потому что, если $(this).find('a').mouseover(function(){
заменить на $(this).find('a').click(function(){
картинка не откроется вообще |
Цитата:
Код простейший же: <!DOCTYPE html>
<meta charset="UTF-8">
<title>Menu</title>
<style>
body {
font: 14px/24px sans-serif;
}
.nav {
height: 24px;
background: #ccc;
zoom: 1; /* IE7 clear fix */
}
.nav:after {
display: block;
overflow: hidden;
height: 0;
clear: both;
content: ".";
}
.menu {
position: relative;
float: left;
margin-right: 10px;
}
.menu .list, .menu .list li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.menu .list {
display: none;
position: absolute;
top: 24px;
left: 0;
background: #ccf;
}
.menu .list li {
white-space: nowrap;
}
</style>
<div class="nav">
<div class="menu">
<span class="toggler">Menu 1</span>
<ul class="list">
<li><a href="#">Menu 1 item 1</a></li>
<li><a href="#">Menu 1 item 2</a></li>
<li><a href="#">Menu 1 item 3</a></li>
<li><a href="#">Menu 1 item 4</a></li>
<li><a href="#">Menu 1 item 5</a></li>
</ul>
</div>
<div class="menu">
<span class="toggler">Menu 2</span>
<ul class="list">
<li><a href="#">Menu 2 item 1</a></li>
<li><a href="#">Menu 2 item 2</a></li>
<li><a href="#">Menu 2 item 3</a></li>
<li><a href="#">Menu 2 item 4</a></li>
<li><a href="#">Menu 2 item 5</a></li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
$(".menu .toggler").click(function () {
var $list = $(this).next(".list").stop();
$list.slideDown(100, function () {
$(document).one("click", function () {
$list.slideUp(100);
})
});
});
});
</script>
|
Цитата:
|
Octane, да вот если зохочется внести форму в какой-то пункт меню, то трындец)))
monolithed, именно для этого) |
| Часовой пояс GMT +3, время: 14:32. |