Horizontal Navbar (jQuery)

Question

Ich möchte eine sehr einfache horizontale navbar erstellen, die auf den folgenden HTML-basiert:

<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>

.. würde es zeigen Unternavigation (falls vorhanden) mit der Maus darüber.

Ich weiß um den großen Superfish Plugin, aber ich mag es hier wirklich einfach halten und keine Plugins verwenden, wenn möglich.

Vielen Dank!

Answer 1

Das sollten Sie in der richtigen Richtung beginnen

$(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>

Überprüfen Sie diese Seite für eine Demo http://jsbin.com/ejuxa

Answer 2

Wenn Sie keine Plugins verwenden möchten, warum Sie tun es nicht nur mit CSS? Hier ist ein Link auf die „Ultimate“ CSS Dropdown-Menü. Warum Javascript verwenden, wenn es leicht in plain ol‘CSS kann getan werden?

Bearbeiten

Es ist hier der Link: http://www.cssplay.co.uk /menus/final_drop.html

Getestet habe ich diese nur in Firefox 3.5, Safari 4, IE8 und Chrome 3 und es funktionierte in allen von ihnen in Ordnung.