iT邦幫忙

0

響應式網頁漢堡選單打不開

如題,最近經手幫公司把原本委託外面廠商製作的網站搬回來的任務,但因為撰寫方式和搭建環境都跟廠商的製作方式完全不同,所以即使廠商有提供完整打包檔,也無法還原網頁。

目前遇到的難題是,我把HTML和CSS都寫得和廠商的檔案一模一樣了,但導覽列的漢堡選單按下去都沒有反應,應該是遺失了JS的部分,所以無法打開、收合。
看起來原本廠商使用的方式應該是當使用者點擊漢堡選單後,會在<nav class="">這行插入.status_open的class來顯示選單內容,但我試很久實在不知道怎麼寫...
以下提供導覽列的程式碼,拜託請大家救救我 /images/emoticon/emoticon02.gif

HTML

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

</head>

<body>
  <header>
    <div id="logo"><a href="/"><img src="https://img.my-best.tw/press_component/item_part_images/2f4571b938f8b26c255227ee3ac057de.jpeg?ixlib=rails-4.2.0&q=70&lossless=0&w=196&h=196&fit=clip" alt="Hello, world!"></a></div>
    <nav class="">
      <ul class="first-layer">
        <li class=" now_page">
          <div class=""><a href="/">item1</a></div>
        </li>
        <li class=""><a href="/">item2</a></li>
        <li class=""><a href="/">item3</a></li>
      </ul>
    </nav>
    <div class="nav_btn">
      <div class="icon"></div>
    </div>
  </header>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>

CSS

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  height: 70px;
  background-color: #ffd248;
  z-index: 10;
}
#logo {
  width: 195px;
  height: 55px;
}
#logo a {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  padding-right: 20px;
}
#logo img {
  display: block;
  width: 30px;
  height: 30px;
}
nav {
  position: absolute;
  display: none;
  top: 70px;
  right: left;
  width: 100%;
  height: calc(100vh - 70px);
  background-color: rgba(0, 0, 0, 0.5);
}
nav.status_open {
  display: block;
}
nav ul {
  zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul:after,
nav ul:before {
  content: "";
  display: table;
}
nav ul:after {
  clear: both;
}
nav a {
  display: block;
  text-decoration: none;
  color: #000;
}
nav .first-layer {
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding-top: 20px;
  width: 200px;
  height: calc(100vh - 70px);
  background-color: #fff;
}
nav .first-layer li {
  font-size: 1.25rem;
  position: relative;
}
.nav_btn {
  margin-right: 15px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
nav .first-layer li .awarded_announce img {
  right: 30%;
  top: 6px;
  position: absolute;
  width: 25px;
}
nav .first-layer li.now_page .first-item,
nav .first-layer li.now_page a {
  font-weight: 500;
}
nav .first-layer .first-item {
  cursor: pointer;
}

nav .first-layer li .first-item,
nav .first-layer li a {
  padding: 10px 0 10px 30px;
  font-weight: 400;
}
nav .first-layer li a {
  position: relative;
}
nav .first-layer li a:hover {
  background-color: #ffc515;
}

nav .first-layer li .awarded_announce a {
  color: #007677;
}
.nav_btn .icon {
  position: relative;
  width: 34px;
  height: 4px;
}
.nav_btn .icon,
.nav_btn .icon:after,
.nav_btn .icon:before {
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.5s;
}
.nav_btn.status_open .icon {
  background-color: transparent;
}
.nav_btn .icon:after,
.nav_btn .icon:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
}
.nav_btn .icon:before {
  bottom: calc(100% - 15px);
}
.nav_btn.status_open .icon:before {
  bottom: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav_btn .icon:after {
  top: calc(100% - 15px);
}
.nav_btn.status_open .icon:after {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
nav .first-layer li.now_page a:before {
  display: block;
}

@media (min-width: 768px) {
  #logo {
    background-color: #ffd248;
  }
  #logo a {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 20px;
  }
  header {
    background-color: #fff;
  }
  nav {
    position: relative;
    display: block;
    margin-right: 10px;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    background-color: transparent;
  }
  nav .first-layer {
    position: relative;
    top: auto;
    right: auto;
    background-color: transparent;
    height: auto;
    width: auto;
    padding-top: 0;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  nav .first-layer li {
    font-size: 1.125rem;
    padding: 8px 15px;
  }
  nav .first-layer li .awarded_announce img {
    left: -15px;
    top: 2px;
  }

  nav .first-layer li .awarded_announce a {
    color: #007677;
  }
  nav .first-layer li .first-item,
  nav .first-layer li a {
    padding: 0;
  }
  nav .first-layer li a:hover {
    background-color: transparent;
  }
  nav .first-layer li a:before {
    position: absolute;
    display: none;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #000;
    bottom: -5px;
    left: 0;
  }
  nav .first-layer li a:hover:before {
    display: block;
  }
  nav .first-layer li a:before {
    position: absolute;
    display: none;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #000;
    bottom: -5px;
    left: 0;
  }
  .nav_btn {
    display: none;
  }
}

@media (min-width: 1024px) {
  header {
    height: 90px;
  }
  nav .first-layer li .awarded_announce img {
    left: calc(50% - 12.5px);
    top: -20px;
  }
}

pietia iT邦新手 5 級 ‧ 2021-11-23 16:32:37 檢舉
建議多引用bootstrap類,這樣可以減少css代碼的複雜度。

2 個回答

10
Felix
iT邦新手 4 級 ‧ 2021-11-22 23:05:30

Using CSS

header 的內容改為下方:

<input type="checkbox" id="nav_btn" />
<nav>
    <!-- ... -->
</nav>
<label class="nav_btn" for="nav_btn">
    <div class="icon"></div>
</label>

將原本的 A 改為 B 後,再加上 C 的部分:

/* A */
nav.status_open {
    display: block;
}

/* B */
#nav_btn:checked + nav {
    display: block;
}

/* C */
#nav_btn {
    display: none;
}

Using JavaScript

const nav = document.querySelector('nav');
const btn = document.querySelector('.nav_btn');

btn.addEventListener('click', () => {
    nav.classList.toggle('status_open');
});

兩者擇一。
推薦前者,因為不需要透過 JavaScript 來監聽。

1
pietia
iT邦新手 5 級 ‧ 2021-11-23 16:37:13

你這個是引用bootstrap 5吧?

引用bootstrap通常都要引用jquery,加上這一行到裡面:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

你說要顯示選單內容是指視窗縮小到平板大小以下後變成三條槓的圖示,按那個圖示會出現選單嗎?

個人偏好jQuery,所以用jQuery來寫:

<script type="text/javascript">
	$(function(){
		$('.nav_btn').click(function(){
				$('nav').addClass('status_open')
				//建議改成toggle寫法,這樣就不用另外再寫收合時的css代碼或js了
				//$('nav').toggle()
		})
	})
</script>

把這段script加到head裡或者head跟body之間,這樣就能達成你的要求了。

pietia iT邦新手 5 級 ‧ 2021-11-24 13:54:35 檢舉

把整個header改寫成這樣,就可以幾乎不用寫css了。

  • 務必記住bootstrap必須引用jQuery。
  • 如果不要讓ul向右偏,把ms-auto類對象刪掉就可以了。
  • 之前那些css、jQuery都可以刪掉了(事實上不拿掉反而可能會出錯),如果需要定義一些其他細節再寫css即可。
  • 不過在寫css之前,建議先查查看bootstrap有沒有提供相關的類對象。
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-warning">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="https://img.my-best.tw/press_component/item_part_images/2f4571b938f8b26c255227ee3ac057de.jpeg?ixlib=rails-4.2.0&q=70&lossless=0&w=196&h=196&fit=clip" alt="Hello, world!" width="30px" height="30px">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="nav navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">list1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">list2  </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">list3</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

感謝邦友aaa000895的幫助:
https://ithelp.ithome.com.tw/questions/10206279#answer-378064

我要發表回答

立即登入回答