- Автор темы
- #1
Подскажите в чем проблема, работает только одно меню, id определяется нормально, в исходнике смотрел у каждой новости есть свой id
Или подскажите готовый вариант, нужно что то на подобии как в dle (при клике на юзверя выпадает меню) в ipb (при клике на юзера выпадает меню) и как на булке (при клике на картинку вываливается меню), менюшек на странице много, у каждой свой id
Интересует вариант на jQuery (только квери, другие не предлогать!). Заранее благодарен.
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style type="text/css">
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
</style>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
// id определяется в php файле (<input type='hidden' name='id' value='".$row['news_id']."' />)
var id = $('input[name=\'id\']').val(id);
$('.dropdown dt#menu_'+id+' a').click(function() {
$('.dropdown dd#menu_'+id+' ul').toggle();
});
$('.dropdown dd#menu_'+id+' ul li a').click(function() {
$('.dropdown dd#menu_'+id+' ul').hide();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass('dropdown'))
$('.dropdown dd#menu_'+id+' ul').hide();
});
});
</script>
<title>jQuery menu</title>
</head>
<body>
<dl id="menu_1" class="dropdown">
<dt id="menu_1"><a href="#">Menu 1</a></dt>
<dd id="menu_1">
<ul>
<li><a href="#">Линка 1</a></li>
<li><a href="#">Линка 2</a></li>
<li><a href="#">Линка 3</a></li>
</ul>
</dd>
</dl>
<dl id="menu_2" class="dropdown">
<dt id="menu_2"><a href="#">Menu 2</a></dt>
<dd id="menu_2">
<ul>
<li><a href="#">Линка 1</a></li>
<li><a href="#">Линка 2</a></li>
<li><a href="#">Линка 3</a></li>
</ul>
</dd>
</dl>
</body>
</html>Или подскажите готовый вариант, нужно что то на подобии как в dle (при клике на юзверя выпадает меню) в ipb (при клике на юзера выпадает меню) и как на булке (при клике на картинку вываливается меню), менюшек на странице много, у каждой свой id
Интересует вариант на jQuery (только квери, другие не предлогать!). Заранее благодарен.
