大家好，我正在嘗試使用螢屏右側的欄創建一個移動友好的標題選單。用于單擊十字的 Javascript 和用于打開右側選單的條。除了我有一個
- 酒吧在左邊，應該在右邊
有人可以幫助我并給我一些見解嗎？
這是我的html代碼
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="endangered.html">Endangered</a> </li>
<li><a href="">Contact</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu"></i>
</nav>
</section>
<script src="javascript.js"></script>
</body>
</html>
這是CSS代碼
*{
margin: 0;
padding: 0;
font-family: "poppins", sans-serif;
}
.header{
height: 100vh;
width: 100%;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
.nav-links{
flex: 1;
text-align: center;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
text-decoration: none;
color: #5ab61d;
font-size: 20px;
}
.nav-links ul li a::after{
content: '';
background: #0ace83;
width: 0;
height: 2px;
margin: auto;
display: block;
left: 50%;
transition: all 0.5s;
}
.nav-links li a:hover::after{
width: 100%;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa{
display: block;
color: #000;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
這是javascript
/* Toggle between showing and hiding the navigation menu links when the user clicks */
var navLinks = document.getElementById("navLinks")
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
我一直在試圖找出幾個小時的問題，我們將不勝感激！
uj5u.com熱心網友回復：
將圖示 oneclick="showMenu" 中的事件元素替換為 onclick="showMenu"。
對于漢堡位置，您可以
nav {
display: flex;
padding: 2% 6%;
justify-content: end;
align-items: center;
}
應該可以作業，因為您的導航面板位于絕對位置，但最好將您的圖示與導航元素隔離開來。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/410622.html
標籤：
上一篇：Firefox和GoogleChrome使用.sort(()=>Math.random()-0.5)創建或排序陣列的差異；