網頁Web-[實作]-導覽列2.隱藏導覽列、打開導覽列

  • 4286
  • 0
  • Web
  • 2022-12-03

隱藏導覽列、打開導覽列

<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 - 關於我 - 意如