小妹目前嘗試設計一個手機板的網頁，我現在在做一個非常基礎的功能：
點了漢堡icon之後，藏在左側的導覽列會從左往右滑出。
以下是我的語法，但是功能並沒有成功：
HTML
<header>
<div class="col-sm-11 col-10 header-container">
<div class="header-hb" id="header-hb" onclick="showNav()">
<span></span>
<span></span>
<span></span>
</div>
<a href="index.html" class="header-logo">
<img src="mockuppic\logo-2-w.png" />
</a>
<nav class="header-main-nav" id="header-main-nav">
<div class="search">
<input type="text" id="search" placeholder="SEARCH PRODUCTS">
<svg fill="#2A2825" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="auto" height="auto"
viewBox="0 0 30 30">
<path
d="M 13 3 C 7.4886661 3 3 7.4886661 3 13 C 3 18.511334 7.4886661 23 13 23 C 15.396652 23 17.59741 22.148942 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148942 17.59741 23 15.396652 23 13 C 23 7.4886661 18.511334 3 13 3 z M 13 5 C 17.430666 5 21 8.5693339 21 13 C 21 17.430666 17.430666 21 13 21 C 8.5693339 21 5 17.430666 5 13 C 5 8.5693339 8.5693339 5 13 5 z">
</path>
</svg>
</div>
<a href="product.html">
ALL
<label id="sublist-btn1">
▲
</label>
<ul class="header-sub-nav">
<li>
SKINCARE
</li>
<li>
CLEANSING
</li>
<li>
HAIR
</li>
<li>
FRAGRANCE
</li>
<li>
SET
</li>
</ul>
</a>
<a href="product.html">BEST</a>
<a>ABOUT</a>
<a href="blog.html">BLOG</a>
</nav>
<div class="header-icon">
<a class="search">
<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="auto" height="auto"
viewBox="0 0 30 30">
<path
d="M 13 3 C 7.4886661 3 3 7.4886661 3 13 C 3 18.511334 7.4886661 23 13 23 C 15.396652 23 17.59741 22.148942 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148942 17.59741 23 15.396652 23 13 C 23 7.4886661 18.511334 3 13 3 z M 13 5 C 17.430666 5 21 8.5693339 21 13 C 21 17.430666 17.430666 21 13 21 C 8.5693339 21 5 17.430666 5 13 C 5 8.5693339 8.5693339 5 13 5 z">
</path>
</svg>
</a>
<a href="checkout.html" class="cart">
<svg width="auto" height="auto" viewBox="0 -1 32 32" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>cart</title>
<desc>Created with Sketch Beta.</desc>
<defs> </defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
sketch:type="MSPage">
<g id="Icon-Set-Filled" sketch:type="MSLayerGroup"
transform="translate(-466.000000, -726.000000)" fill="#ffffff">
<path
d="M475.97,734 L473.475,726 L467,726 C466.447,726 466,726.448 466,727 C466,727.553 466.447,728 467,728 L472,728 L474.011,734 L474,734 L476,746 C476,748.209 477.791,750 480,750 L491,750 C493.209,750 495,748.209 495,746 L498,734 L475.97,734 L475.97,734 Z M490,752 C488.896,752 488,752.896 488,754 C488,755.104 488.896,756 490,756 C491.104,756 492,755.104 492,754 C492,752.896 491.104,752 490,752 L490,752 Z M480,752 C478.896,752 478,752.896 478,754 C478,755.104 478.896,756 480,756 C481.104,756 482,755.104 482,754 C482,752.896 481.104,752 480,752 L480,752 Z"
id="cart" sketch:type="MSShapeGroup"> </path>
</g>
</g>
</g>
</svg>
</a>
<a href="login.html" class="member">
<svg fill="#ffffff" width="auto" height="auto" viewBox="0 0 1000.00 1000.00"
xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M738 756q-45-77-131-205-6-8-14-15-2-2-1.5-4.5t2.5-3.5q60-29 97-83 40-58 40-124 0-63-31-116t-84-84-116-31-116 31-84 84-31 116q0 66 40 124 37 54 97 83 2 1 2.5 3.5T407 536q-8 7-14 15-88 130-131 205-18 32-18 52 0 27 34.5 50.5t93 37.5T500 910t128.5-14 93-37.5T756 808q0-21-18-52z">
</path>
</g>
</svg>
</a>
</div>
</div>
</header>
CSS
/* header */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 83.333333%;
height: 80px;
position: absolute;
z-index: 1;
padding: 0 15px;
margin-top: 5px;
}
.header-logo {
height: 100%;
display: flex;
align-items: center;
}
.header-logo img {
height: 75%;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
}
.header-main-nav {
height: 100%;
width: 37%;
display: flex;
justify-content: space-between;
align-items: end;
}
.header-main-nav .search {
display: none;
position: relative;
width: 100%;
height: fit-content;
}
.header-main-nav a {
color: #fff;
font-weight: 400;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
}
#sublist-btn1 {
display: none;
margin-left: 10px;
}
.header-sub-nav {
display: none;
width: 100%;
height: fit-content;
list-style-type: none;
}
.header-sub-nav > li {
font-size: 14px;
font-weight: 400;
margin-top: 10px;
}
.header-sub-nav > li:first-child {
margin-top: 20px;
}
.header-icon {
height: 100%;
width: 13%;
display: flex;
justify-content: space-between;
align-items: end;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
}
.search, .cart {
height: 30%;
}
.member {
height: 32%;
transform: translateY(8%);
}
.header-hb {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
width: 33px;
height: 29px;
margin-top: 15px;
}
.header-hb span {
width: 80%;
height: 1px;
background-color: #fff;
}
.header-hb span:last-child {
width: 45%;
}
@media screen and (max-width: 576px){
.header-container {
background-color: #2A2825;
position: fixed;
width: 100%;
height: 70px;
z-index: 2;
padding: 0 15px;
margin-top: 0px;
}
.header-logo {
position: absolute;
right: 50%;
transform: translateX(50%);
}
.header-logo img {
height: 60%;
filter: unset;
}
#sublist-btn1 {
display: unset;
}
.header-main-nav {
display: flex;
flex-direction: column;
position: absolute;
justify-content: unset;
align-items: flex-start;
overflow: hidden;
height: 900px;
width: 0px;
left: -300px;
top: 100%;
z-index: 1;
background-color: #fff;
}
.header-main-nav .search {
display: unset;
}
.header-main-nav .search input {
height: 30px;
width: 92%;
margin: 4%;
border-radius: 3px;
margin-top: 20px;
border: none;
outline: none;
background-color: #f1f1f1;
}
#search::placeholder {
padding-left: 30px;
}
.header-main-nav .search svg {
position: absolute;
width: 20px;
height: 40px;
padding: 10px;
top: 5px;
left: 7px;
z-index: 1;
}
.header-main-nav a {
color: #2A2825;
filter: unset;
font-weight: 400;
width: 100%;
padding: 4.166667%;
}
.header-sub-nav {
display: unset;
}
.header-icon {
align-items: center;
width: 15%;
margin-top: 15px;
}
.header-icon .search {
display: none;
}
.header-icon .cart {
height: 27%;
}
.header-icon .member {
transform: translateY(5%);
height: 29%;
}
.header-hb {
display: flex;
cursor: pointer;
}
}
JS
function showNav() {
var nav = document.getElementById("header-main-nav");
if (nav.style.left = "-300px") {
nav.style.left = "0px";
nav.style.transition = "1s";
} else {
nav.style.left = "-300px";
}
};
已邀請的邦友 {{ invite_list.length }}/5
這兩處注意一下...if (nav.style.left = "-300px" ) 判斷式是 == 或 ===.header-main-nav { width: 0px; } Nav 的 width 預設為 0，所以顯示不出
另外一些小地方nav.style.transition = "1s"; 通常會把這設在css上if ( nav.style.left=="" ) 通常會考慮空值
這邊提供修改後的 jsbin 給你參考
我後來把width: 0px這個問題改掉了，以及if(nav.style.left = "-300px")再加一個=，還有將transition設定在css上，我的東西有成功動起來了~非常感謝你的教學!!!!
另外我看您在JS Bin的語法，我有個問題想要請教您~為什麼您在if(nav.style.left == "-300px" ||!nav.style.left )這句中，加上了||!nav.style.left 呢? ||! 在判斷式中是or not的意思嗎?
非常感謝您的回覆!
我剛剛有發現我少加||!nav.style.left的話，一開始要多點一下導覽列才會出來~
!nav.style.left 是判斷如果是空值，在以下情況 nav.style.left=="" / 0 / undefined / null / false... 會是true ((一般不建議這麼寫，不要學
你可以加 console.log(nav.style.left) 然後看回傳狀況，第一次點的初始值其實是""(空值)。
這是因為js抓的是element本身的style attribute，像 <div style="left:-300px"> 就抓的到style.left，但<div class="DOM_style"> 沒有 style 那預設就會是""(或undefined)，因此需要判斷是否為空。((js 要很常很常判斷空值))
解法也很簡單，直接在js 一開始給 nav.style.left=-300(預設位置)，就好了
iThome鐵人賽
看影片追技術