Heim > Artikel > Web-Frontend > Verwenden von js-Attributen, um den Effekt eines horizontalen Dropdown-Menüs in HTML5 zu erzielen (Code)

Verwenden von js-Attributen, um den Effekt eines horizontalen Dropdown-Menüs in HTML5 zu erzielen (Code)

不言Original: 2018-08-13 16:17:131879Durchsuche

In diesem Artikel geht es um die Wirkung der Verwendung von js-Attributen zur Erzielung horizontaler Dropdown-Menüs in HTML5. Ich hoffe, dass er für Sie hilfreich ist.

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
    *{padding:0px;}
    p{margin:20px 150px;}
    ul{list-style:none;}
    ul li{float:left;position:relative;}
    ul li a{text-decoration:none;
            background:#900;
            height:40px;
            display:block;
            color:#fff;
            font-weight:bold;
            line-height:40px;
            text-align:center;
            margin-right:1px;
            padding:0px 15px;
    }
    ul li a:hover{background:#f90;}
    ul li ul li{float:none;}
    ul li ul{position:absolute;top:41px;left:0px;
            display:none;
    }
</style>
<script>
    function showmenu(li){
    var submenu=li.getElementsByTagName("ul")[0];
    submenu.style.display="block";
    }
    function hidemenu(op){
    var submenu=op.getElementsByTagName("ul")[0];
    submenu.style.display="none";
    }
</script>
</head>
<body>
    <p>
    <ul>
        <li><a href="#">学校简介</a></li>
        <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">管理机构</a></li>
        <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">学院设置</a>
        <ul>
            <li><a href="#">电气学院</a></li>
            <li><a href="#">材料学院</a></li>
            <li><a href="#">测绘学院</a></li>
            <li><a href="#">安全学院</a></li>
            <li><a href="#">体育学院</a></li>
            <li><a href="#">化工学院</a></li>
        </ul>
        </li>
        <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">科学研究</a>
            <ul>
            <li ><a href="#">科研机构</a></li>
            <li ><a href="#">科研平台</a></li>
            <li ><a href="#">科研论文</a></li>
            <li ><a href="#">成果转化</a></li>
            </ul>
        </li>
        <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">招生就业</a>
            <ul>
            <li ><a href="#">本科生招生</a></li>
            <li ><a href="#">硕士生招生</a></li>
            <li ><a href="#">博士生招生</a></li>
            <li ><a href="#">就业信息</a></li>
            </ul>
        </li>
        <li><a href="#">呼唤英才</a></li>
    </ul>
    </p>
</body>
</html>

Verwandte Empfehlungen:

js implementiert eine Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (mit Code)

js kapselt die _new-Funktion und die Implementierung des neuen Schlüsselworts (mit Codetest)

Einführung in die grundlegende Syntax von js: Datentypen und Variablentypen

Das obige ist der detaillierte Inhalt vonVerwenden von js-Attributen, um den Effekt eines horizontalen Dropdown-Menüs in HTML5 zu erzielen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 数据类型封装变量类型 JS

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：js implementiert eine Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (Code im Anhang)Nächster Artikel：js implementiert eine Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (Code im Anhang)

In Verbindung stehende Artikel

Mehr sehen