隱藏導覽列、打開導覽列
<html>
<head>
<title>導覽列</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.phoneli01 {
width:250px;
height:50px;
text-align:center;
line-height:50px;
list-style-type:none;
background-color:orange;
}
</style>
</head>
<body>
<button id="o">O</button>
<button id="x">X</button>
<ul id="nav">
<li class="phoneli01"><a class="one" href="#">首頁</a></li>
<li class="phoneli01"><a class="one" href="#">最新消息</a></li>
<li class="phoneli01"><a class="one" href="#">關於我們</a></li>
<li class="phoneli01"><a class="one" href="#">聯絡我們</a></li>
<li class="phoneli01"><a class="one" href="#"> Q & A</a></li>
</ul>
</body>
</html>
<script>
$(document).ready(function(){
$("#x").hide();
$("#nav").hide();
$("#x").click(function(){
$("#x").hide();
$("#o").show();
$("#nav").hide();
});
$("#o").click(function(){
$("#x").show();
$("#o").hide();
$("#nav").show();
});
});
</script>https://codepen.io/yiruatstudio/pen/rNMxONN
套用fontawesome的icon
<link href="fontawesome/fontawesome-free-6.0.0-web/fontawesome-free-6.0.0-web/css/all.css" rel="stylesheet">
<body>
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-bars" style="font-size:48px;"></i>
<i class="fa-solid fa-bars" style="font-size:60px;color:red;"></i>
JQuery使用toggle()來開關(隱藏,開啟)
$("#nav").toggle();
完整程式碼:
<html>
<head>
<title>導覽列</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="fontawesome/fontawesome-free-6.0.0-web/fontawesome-free-6.0.0-web/css/all.css" rel="stylesheet">
<style>
.phoneli01 {
width:250px;
height:50px;
text-align:center;
line-height:50px;
list-style-type:none;
background-color:orange;
}
</style>
</head>
<body>
<i class="fa-solid fa-bars" style="font-size:48px;color:blue;" id="btn1"></i>
<ul id="nav">
<li class="phoneli01"><a class="one" href="#">首頁</a></li>
<li class="phoneli01"><a class="one" href="#">最新消息</a></li>
<li class="phoneli01"><a class="one" href="#">關於我們</a></li>
<li class="phoneli01"><a class="one" href="#">聯絡我們</a></li>
<li class="phoneli01"><a class="one" href="#"> Q & A</a></li>
</ul>
</body>
</html>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#nav").toggle();
});
});
</script>點選左上角藍色bar，即開啟導覽列，再次點擊一次則關閉導覽列
Yiru@Studio - 關於我 - 意如