欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

制作一個帶有下拉菜單的導航(應該在較小的屏幕上查看)

CSS
林雅南1年前7瀏覽0評論

var dropdownContent = document.getElementById("myDropdown");
var isOpen = false;

function toggleDropdown() {
  if (!isOpen) {
    fadeIn(dropdownContent);
  } else {
    fadeOut(dropdownContent);
  }
}

function fadeIn(element) {
  var opacity = 0;
  element.style.display = "block";
  var fadeInInterval = setInterval(function() {
    if (opacity < 1) {
      opacity += 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(fadeInInterval);
    }
  }, 30);
  isOpen = true;
}

function fadeOut(element) {
  var opacity = 1;
  var fadeOutInterval = setInterval(function() {
    if (opacity > 0) {
      opacity -= 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(fadeOutInterval);
      element.style.display = "none";
    }
  }, 30);
  isOpen = false;
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    fadeOut(dropdownContent);
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

ul {
  list-style: none;
}

.header {
  padding: 20px 50px;
  gap: 225px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px -3px 21px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  position: fixed;
  z-index: 1;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo img {
  width: 120px;
}

.header .main_menu {
  display: flex;
}

.header .main_menu li a {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  color: black;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 25px;
  margin: 0px 3px;
}

.header .main_menu li {
  position: relative;
}

#home {
  background-color: #CD285B;
  color: #f1f1f1;
  border-radius: 5px;
}

.main_menu li:hover>a {
  background-color: #FFD7E3;
  border-radius: 5px;
}

.dropbtn {
  display: flex;
  align-items: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  background-color: #CD285B;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  height: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn .fa {
  font-size: 12px;
}

.dropbtn .fa {
  padding-left: 10px;
  margin-left: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-top: 25px;
  gap: 10px;
  right: -27%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 182px 73px rgba(205, 40, 91, 0.01), 0px 103px 62px rgba(205, 40, 91, 0.05), 0px 46px 46px rgba(205, 40, 91, 0.09), 0px 11px 25px rgba(205, 40, 91, 0.1), 0px 0px 0px rgba(205, 40, 91, 0.1);
  border-radius: 10px;
  width: 235px;
  z-index: 1;
  align-items: center;
}

.dropdown-content a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  margin: 6px;
  color: black;
  font-size: 16px;
  color: #303030;
  text-decoration: none;
}

.dropdown a:hover {
  background-color: #f1f1f1;
  border: 1px solid rgba(219, 0, 84, 0.588);
  margin: 5px;
  border-radius: 10px;
}

.dropdown:hover .dropbtn {
  background-color: #cd285cdc;
  transition: all .3s ease-in-out;
}

.dropdown-content .fa-solid {
  color: #303030;
  font-size: 16px;
  padding-right: 10px;
}

.show {
  display: block;
}

<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>Sample Business</title>
  <link rel="logo icon" href="framelogoicon.png" />
  <link rel="stylesheet" href="FrameDevG.css">
  <link rel="stylesheet" type="text/css" >
  <script src="https://kit.fontawesome.com/afde9d8d8e.js" crossorigin="anonymous"></script>
</head>

<body class="prevent-select">
  <header class="header">
    <div class="container">
      <div class="navbar">
        <div class="logo">
          <a href="">
            <img src="framelogo1.png" alt="Business Sample Logo">
          </a>
        </div>
        <nav>
          <ul class="main_menu">
            <li><a href="index.html" id="home">Home</a></li>
            <li><a href="FrameDevG.html" id="gallery">Gallery</a></li>
            <li><a href="FrameDevAbout.html" id="about-us">About Us</a></li>
          </ul>
        </nav>
        <div class="dropdown">
          <button class="dropbtn" onclick="toggleDropdown()">Book Now<i class="fa fa-sort-desc" onclick="showMenu()"></i> </button>
          <div class="dropdown-content" id="myDropdown">
            <a href="#bookframe"><i class="fa-solid fa-music"></i>Music Video</a>
            <a href="#bookframe"><i class="fa-solid fa-camera"></i>Photography</a>
            <a href="#bookframe"><i class="fa-solid fa-globe"></i>Website Development</a>
            <a href="#bookframe"><i class="fa-solid fa-palette"></i>Graphic Design</a>
            <a href="#bookframe"><i class="fa-solid fa-clapperboard"></i>Commercial</a>
            <a href="#bookframe"><i class="fa-solid fa-chart-line"></i>Marketing Content</a>
          </div>
        </div>
      </div>
    </div>
  </header>

類似下面的內容可以做到這一點。我標記了新代碼的位置:

var dropdownContent = document.getElementById("myDropdown");
var isOpen = false;

function toggleDropdown() {
  if (!isOpen) {
    fadeIn(dropdownContent);
  } else {
    fadeOut(dropdownContent);
  }
}

function fadeIn(element) {
  var opacity = 0;
  element.style.display = "block";
  var fadeInInterval = setInterval(function() {
    if (opacity < 1) {
      opacity += 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(fadeInInterval);
    }
  }, 30);
  isOpen = true;
}

function fadeOut(element) {
  var opacity = 1;
  var fadeOutInterval = setInterval(function() {
    if (opacity > 0) {
      opacity -= 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(fadeOutInterval);
      element.style.display = "none";
    }
  }, 30);
  isOpen = false;
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    fadeOut(dropdownContent);
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

ul {
  list-style: none;
}

.header {
  padding: 20px 50px;
  gap: 225px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px -3px 21px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  /*position: fixed;*/ /*not needed*/
  z-index: 1;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo img {
  width: 120px;
}

.header .main_menu {
  display: flex;
}

.header .main_menu li a {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  color: black;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 25px;
  margin: 0px 3px;
}

.header .main_menu li {
  position: relative;
}

#home {
  background-color: #CD285B;
  color: #f1f1f1;
  border-radius: 5px;
}

.main_menu li:hover>a {
  background-color: #FFD7E3;
  border-radius: 5px;
}

.dropbtn {
  display: flex;
  align-items: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  background-color: #CD285B;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  height: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn .fa {
  font-size: 12px;
}

.dropbtn .fa {
  padding-left: 10px;
  margin-left: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-top: 25px;
  gap: 10px;
  right: -27%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 182px 73px rgba(205, 40, 91, 0.01), 0px 103px 62px rgba(205, 40, 91, 0.05), 0px 46px 46px rgba(205, 40, 91, 0.09), 0px 11px 25px rgba(205, 40, 91, 0.1), 0px 0px 0px rgba(205, 40, 91, 0.1);
  border-radius: 10px;
  width: 235px;
  z-index: 1;
  align-items: center;
}

.dropdown-content a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  margin: 6px;
  color: black;
  font-size: 16px;
  color: #303030;
  text-decoration: none;
}

.dropdown a:hover {
  background-color: #f1f1f1;
  border: 1px solid rgba(219, 0, 84, 0.588);
  margin: 5px;
  border-radius: 10px;
}

.dropdown:hover .dropbtn {
  background-color: #cd285cdc;
  transition: all .3s ease-in-out;
}

.dropdown-content .fa-solid {
  color: #303030;
  font-size: 16px;
  padding-right: 10px;
}

.show {
  display: block;
}


/*new code:*/

#menu__toggle {
  visibility: hidden;
}


/*new responsive code from here*/

@media (max-width: 1320px) {
  #menu__toggle {
    opacity: 0;
  }
  #menu__toggle:checked+.menu__btn>span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked+.menu__btn>span::before {
    top: 0;
    transform: rotate(0deg);
  }
  #menu__toggle:checked+.menu__btn>span::after {
    top: 0;
    transform: rotate(90deg);
  }
  #menu__toggle:checked~.menu__box {
    left: 0 !important;
  }
  .menu__btn {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
    padding-top: 10px;
  }
  .menu__btn>span,
  .menu__btn>span::before,
  .menu__btn>span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
  }
  .menu__btn>span::before {
    content: '';
    top: -8px;
  }
  .menu__btn>span::after {
    content: '';
    top: 8px;
  }
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
  }
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #CFD8DC;
  }
  .header .main_menu {
    display: inline-block;
  }
}

<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>Sample Business</title>
  <link rel="logo icon" href="framelogoicon.png" />
  <link rel="stylesheet" href="FrameDevG.css">
  <link rel="stylesheet" type="text/css" >
  <script src="https://kit.fontawesome.com/afde9d8d8e.js" crossorigin="anonymous"></script>
</head>

<body class="prevent-select">
  <header class="header">
    <div class="container">
      <div class="navbar">
        <div class="logo">
          <a href="">
            <img src="framelogo1.png" alt="Business Sample Logo">
          </a>
        </div>
        <nav>

          <!-- new HTML code from here -->
          <div class="hamburger-menu">
            <input id="menu__toggle" type="checkbox" />
            <label class="menu__btn" for="menu__toggle">
      <span></span>
    </label>
            <ul class="main_menu menu__box">
              <li><a href="index.html" class="menu__item" id="home">Home</a></li>
              <li><a href="FrameDevG.html" class="menu__item" id="gallery">Gallery</a></li>
              <li><a href="FrameDevAbout.html" class="menu__item" id="about-us">About Us</a></li>
              <div class="dropdown">
                <button class="dropbtn" onclick="toggleDropdown()">Book Now<i class="fa fa-sort-desc" onclick="showMenu()"></i> </button>
                <div class="dropdown-content" id="myDropdown">
                  <a href="#bookframe"><i class="fa-solid fa-music"></i>Music Video</a>
                  <a href="#bookframe"><i class="fa-solid fa-camera"></i>Photography</a>
                  <a href="#bookframe"><i class="fa-solid fa-globe"></i>Website Development</a>
                  <a href="#bookframe"><i class="fa-solid fa-palette"></i>Graphic Design</a>
                  <a href="#bookframe"><i class="fa-solid fa-clapperboard"></i>Commercial</a>
                  <a href="#bookframe"><i class="fa-solid fa-chart-line"></i>Marketing Content</a>
                </div>
              </div>
            </ul>
          </div>
        </nav>
        <!-- new HTML code until this -->
      </div>
    </div>
  </header>

您可以使用媒體查詢使元素在移動設備上看起來不同:

<style>
  .container {
    width: 100%; /*