मैंने एक उत्तरदायी ड्रॉप डाउन हैमबर्गर मेनू बनाया है और मुझे यह पसंद है कि यह एक चीज़ को छोड़कर अब तक कैसे काम करता है। मैं इसे धीरे-धीरे ड्रॉपडाउन बनाना चाहता हूं, अभी यह तब दिखाई देता है जब हैमबर्गर मेनू आइकन क्लिक किया जाता है। मैंने max-height: 0 का उपयोग करने और फिर बिंग क्लिक करने के बाद इसे max-height देने के बारे में पढ़ा, लेकिन मैंने वह तरीका आजमाया और सफल नहीं हुआ। किसी भी तरह की सहायता का स्वागत किया जाएगा!

document.querySelector('.hamburger').addEventListener("click", function() {
  document.querySelector('nav ul').classList.toggle('expand');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: sans-serif;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.container {
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

nav {
  height: 60px;
  line-height: 60px;
  background-color: red;
}

.logo {
  color: white;
  float: left;
}

.toggle-menu,
.hamburger {
  display: none;
}

.hamburger {
  position: absolute;
  transform: rotate(90deg);
}

ul {
  float: right;
}

ul li {
  float: left;
  list-style-type: none;
}

ul li a {
  color: white;
  margin: 0;
  padding: 0 5px;
}

.expand {
  max-height: 500px;
  display: block;
  transition: all .3s ease;
}

@media(max-width: 768px) {
  nav .container {
    width: 100%;
  }
  nav {
    padding-bottom: 0;
  }
  .logo {
    margin-left: 2%;
  }
  .toggle-menu,
  .hamburger {
    display: block;
  }
  .hamburger {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  ul {
    width: 100%;
    max-height: 0;
    float: none;
    /*--- body content goes underneath ul when expanded ---*/
    position: absolute;
    top: 60px;
    z-index: 99;
    /*------------------------------------------*/
    display: none;
  }
  ul li {
    width: 100%;
    text-align: center;
  }
  ul li a {
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  ul li a:hover {
    background-color: orange;
  }
}
<nav class="clearfix">
  <div class="container">

    <div class="logo">
      <h1>LOGO</h1>
    </div>

    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
</nav>

<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>
0
eric 30 मार्च 2018, 09:25

4 जवाब

सबसे बढ़िया उत्तर

ऐसा इसलिए है क्योंकि आप display: none से display: block का उपयोग करते हैं, और संक्रमण काम करता है लेकिन यह संक्रमण समाप्त होने की प्रतीक्षा करता है और फिर display: block; जोड़ता है ताकि आपको संक्रमण दिखाई न दे।

आप बस display: none को हटा सकते हैं और अपने ul तत्व पर overflow: hidden; जोड़ सकते हैं।

1
Jeremy 30 मार्च 2018, 06:41

Css संपत्ति display: none के साथ काम नहीं करती है इसलिए आपको या तो ऊंचाई के साथ खेलना चाहिए: 0 या कुछ नकारात्मक मान में इसे कैनवास से छिपाने के लिए शीर्ष, एक बार जब आप कक्षा का विस्तार करते हैं तो ऊंचाई या शीर्ष स्थिति को फिर से रीसेट करें।

document.querySelector('.hamburger').addEventListener("click", function(){
  document.querySelector('nav ul').classList.toggle('expand');
});
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body{
  font-family: sans-serif;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.container{
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

nav{
  height: 60px;
  line-height: 60px;
  background-color: red;
}

.logo{
  color: white;
  float: left;
}

.toggle-menu,
.hamburger{
  display: none;  
}

.hamburger{
  position: absolute;
  transform: rotate(90deg);
}

ul{
  float: right;
}

ul li{
  float: left;
  list-style-type: none;
}

ul li a{
  color: white;
  margin: 0;
  padding: 0 5px;
}

.expand{
  top: 60px;
  max-height: 500px;
  transition: all .3s ease;
}




@media(max-width: 768px){
  
  nav .container{
    width: 100%;
  }
  
  nav{
    padding-bottom: 0;
  }
  
  .logo{
    margin-left: 2%;
  }
  
  .toggle-menu,
  .hamburger{
    display: block;
  }
  
  .hamburger{
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  
  ul{
    width: 100%;
    max-height: 0;
    float: none;
    /*--- body content goes underneath ul when expanded ---*/
    position: absolute;
    top: -600px;
    z-index: 99;
    /*------------------------------------------*/
  
  }
  
  ul li{
    width: 100%;
    text-align: center;
  }
  
  ul li a{
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  
  ul li a:hover{
    background-color: orange;
  }
  
}
<nav class="clearfix">
  <div class="container">
    
    <div class="logo">
      <h1>LOGO</h1>
    </div>
    
    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>
    
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    
  </div>
</nav>

<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>
0
Help 30 मार्च 2018, 06:37

आप इसे और अधिक सहज बनाने के लिए transform:scale() को नीचे की तरह opacity के साथ चेतन करने के लिए उपयोग कर सकते हैं।

document.querySelector('.hamburger').addEventListener("click", function() {
  document.querySelector('nav ul').classList.toggle('expand');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: sans-serif;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.container {
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

nav {
  height: 60px;
  line-height: 60px;
  background-color: red;
}

.logo {
  color: white;
  float: left;
}

.toggle-menu,
.hamburger {
  display: none;
}

.hamburger {
  position: absolute;
  transform: rotate(90deg);
}

ul {
  float: right;
}

ul li {
  float: left;
  list-style-type: none;
}

ul li a {
  color: white;
  margin: 0;
  padding: 0 5px;
}

.expand {
  transform: scale(1, 1);
  opacity: 1;
  visibility: visible;
}

@media(max-width: 768px) {
  nav .container {
    width: 100%;
  }
  nav {
    padding-bottom: 0;
  }
  .logo {
    margin-left: 2%;
  }
  .toggle-menu,
  .hamburger {
    display: block;
  }
  .hamburger {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  ul {
    width: 100%;
    max-height: 0;
    float: none;
    position: absolute;
    top: 60px;
    z-index: 99;
    transform: scale(1, 0);
    transition: all .5s ease;
    opacity: 0;
    visibility: hidden;
  }
  ul li {
    width: 100%;
    text-align: center;
  }
  ul li a {
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  ul li a:hover {
    background-color: orange;
  }
}
<nav class="clearfix">
  <div class="container">

    <div class="logo">
      <h1>LOGO</h1>
    </div>

    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
</nav>

<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>

हालांकि यदि आप max-height समाधान निकालना चाहते हैं display:none...आप इसे display:none; के साथ चेतन नहीं कर सकते...और max-height:0 पर overflow:hidden को छिपाने के लिए सेट करें अतिप्रवाह सामग्री।

document.querySelector('.hamburger').addEventListener("click", function() {
  document.querySelector('nav ul').classList.toggle('expand');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: sans-serif;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.container {
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

nav {
  height: 60px;
  line-height: 60px;
  background-color: red;
}

.logo {
  color: white;
  float: left;
}

.toggle-menu,
.hamburger {
  display: none;
}

.hamburger {
  position: absolute;
  transform: rotate(90deg);
}

ul {
  float: right;
}

ul li {
  float: left;
  list-style-type: none;
}

ul li a {
  color: white;
  margin: 0;
  padding: 0 5px;
}

.expand {
  max-height: 500px;
}

@media(max-width: 768px) {
  nav .container {
    width: 100%;
  }
  nav {
    padding-bottom: 0;
  }
  .logo {
    margin-left: 2%;
  }
  .toggle-menu,
  .hamburger {
    display: block;
  }
  .hamburger {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  ul {
    width: 100%;
    max-height: 0;
    float: none;
    position: absolute;
    top: 60px;
    z-index: 99;
    overflow: hidden;
    transition: all .5s linear;
  }
  ul li {
    width: 100%;
    text-align: center;
  }
  ul li a {
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  ul li a:hover {
    background-color: orange;
  }
}
<nav class="clearfix">
  <div class="container">

    <div class="logo">
      <h1>LOGO</h1>
    </div>

    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
</nav>

<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>
1
Bhuwan 30 मार्च 2018, 06:43
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */

इसे आज़माएं, मैं देखता हूं कि आपके पास पहले से ही संक्रमण विशेषता है, लेकिन आपको अभी भी कुछ अतिरिक्त पैरामीटर और एक संक्रमण-विलंब की आवश्यकता है जो संक्रमण विलंब को हटा देता है ताकि अन्य शैलियों के संक्रमण के दौरान दिखाई दे सके।

1
Achraf C. 30 मार्च 2018, 06:33