iT邦幫忙

0

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

html 網頁製作 網頁排版 網頁製作 網頁 html html5 #新手求指導 navbar
hyoeun86015 2021-11-22 20:50:22 ‧ 3007 瀏覽

  • 分享至 

  • xImage

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

目前遇到的難題是，我把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代碼的複雜度。
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

10
Felix
iT邦研究生 2 級 ‧ 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 來監聽。

hyoeun86015 iT邦新手 4 級 ‧ 2021-12-07 21:15:57 檢舉

感恩Felix大大耐心看完長篇程式碼，問題已照您的方法解決！
/images/emoticon/emoticon41.gif

登入發表回應
3
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

hyoeun86015 iT邦新手 4 級 ‧ 2021-12-07 21:18:31 檢舉

感恩您的解答，因為不知道能不能改動其他部分，所以以不動到太多原本內容的方法為主，之後也會試試看您提供的解決方案～
/images/emoticon/emoticon41.gif

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22088 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙