Горизонтальная панель навигации (jQuery)
Вопрос
Я бы хотел создать очень простую горизонтальную навигационную панель на основе следующего HTML:
<div id="nav">
<ol class="clear">
<li><a href="#">Parent 1</a></li>
<li><a href="#">Parent 2</a>
<ul class="clear">
<li><a href="#">Child 1</a></li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul>
</li>
<li><a href="#">Parent 3</a></li>
</ol>
</div>
..это показало бы subnav (если существует) при наведении курсора мыши.
Я знаю о замечательном плагине SuperFish, но я хотел бы сделать его здесь действительно простым и по возможности не использовать никаких плагинов.
Большое спасибо!
Решение
Это должно помочь вам двигаться в правильном направлении
$(document).ready(function() {
$("div#nav > ol.clear > li > ul").hide();
$("div#nav > ol.clear > li:has(> ul)").hover(function() {
var x = $(this);
x.children("ul").eq(0).css({'top':x.position().top + x.height()+5, 'left':x.position().left-37}).show();
}, function () {
$(this).children("ul").eq(0).hide();
});
});
<style type="text/css" media="screen">
ol > li { display:inline; margin: 2px}
ul { position:absolute }
ul > li { display:inline }
ul > li > a { yellow; display:block }
</style>
Проверьте этот сайт для получения демо-версии http://jsbin.com/ejuxa
Другие советы
Если вы не хотите использовать какие-либо плагины, почему бы вам просто не сделать это с помощью CSS?Вот ссылка на выпадающее меню "Ultimate" CSS.Зачем использовать javascript, когда это легко можно сделать в обычном старом CSS?
Редактировать
Извините, вот ссылка: http://www.cssplay.co.uk/menus/final_drop.html
Я только что протестировал это в Firefox 3.5, Safari 4, IE8 и Chrome 3, и во всех них это сработало нормально.