1. 程式人生 > >簡易移動端導航欄二級製作

簡易移動端導航欄二級製作

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<style>

* {

margin: 0;

padding: 0;

}

body {

background: yellowgreen;

}

.class {

color: red

}

ul li {

list-style: none;

}

.box {

margin: 10px 0px;

overflow-x: scroll;

}

.nav {

display: flex;

white-space: nowrap;

}

.nav .nav_li {

width: 80px;

padding: 0 10px;

text-align: center;

font-size: 20px;

}

.box::-webkit-scrollbar {

display: none;

}

.nav_li ul {

display: none;

width: 100%;

background: rgba(255, 255, 255, .3)

}

</style>

</head>

 

<body>

<div class="box">

<ul class="nav">

<li class="nav_li">

<span class="span">首頁</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">關於我們</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">產品</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">介紹</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">公司案例</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">首頁</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">首頁</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">首頁</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">首頁</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

<li class="nav_li">

<span class="span">首頁</span>

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

<script>

$(".span").click(function() {

$(this).siblings("ul").toggle(300).parent().siblings("").find("ul").hide(100);

})

$(document).click(function() {

$(".span").siblings("ul").fadeOut(300);

})

$(".span").click(function(event) {

event.stopPropagation();

})

</script>