Heim  >  Artikel  >  php教程  >  JQuery implementiert ein einfaches Dropdown-Menü

JQuery implementiert ein einfaches Dropdown-Menü

高洛峰
高洛峰Original
2016-12-15 15:57:541526Durchsuche

Als leichtes DOM-Framework bietet uns JQuery viele Annehmlichkeiten. So implementieren Sie ein einfaches Dropdown-Menü:

1. Zuerst zitieren wir die Skriptbibliothek von Google:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

2. Dann schreiben wir ein Stück HTML:

<div class="menu">
    <span><a href="#">菜单一</a> </span><span><a href="#">菜单二</a>
        <div>
            <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>
        </div>
    </span><span><a href="#">菜单三</a>
        <div>
            <a href="#">子项一</a> <a hef="#">子项二</a> <a href="#">子项三</a>
        </div>
    </span>
</div>

3. Definieren Sie dann CSS dafür

<style type="text/css">
    .menu span
    {
        float: left;
        margin-right: 10px;
        position: relative;
        z-index: 100;
    }
    .menu a
    {
        text-decoration: none;
        display: block;
    }
    .menu span:hover div, .menu span div:hover
    {
        display: block;
    }
    .menu span div
    {
        border: 1px solid black;
        padding: 5px;
        background-color: white;
        display: none;
        position: absolute;
        white-space: nowrap;
    }
</style>

4.hover(over, out)

Eine Methode, die Hover-Ereignisse simuliert (die Maus bewegt sich über ein Objekt und aus diesem heraus). Dies ist eine benutzerdefinierte Methode, die für häufig verwendete Aufgaben einen „Keep-in-it“-Status bereitstellt.

<script type="text/javascript">
    $(document).ready(function() {
        if ($.browser.msie && $.browser.version <= 6.0) {
            $(".menu span").hover(
                 function() {
                     $(this).children("div").attr("style", "display: block");
                 },
                  function() {
                      $(this).children("div").attr("style", "");
                  })
        }
    });    
</script>

Das war’s, implementieren Sie ein einfaches Dropdown-Menü.



Mehr für Verwandte Artikel über die Implementierung eines einfachen Dropdown-Menüs mit JQuery finden Sie auf der chinesischen PHP-Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:WebService-PrinzipNächster Artikel:WebService-Prinzip