固定位置滑出菜单显示在页面下方

编程问答 2022-08-11

问题描述

我已经为网站创建了一个滑出菜单，但是当滑出菜单时，它在页面上的位置比我想要的要低。我想让它滑到汉堡菜单下。实际上，它从页面的大约四分之一开始。任何帮助，将不胜感激！这是小提琴：https://jsfiddle.net/kcloyd/ceudvjon/1/

这是代码：

a {
color: inherit;
text-decoration: none;
}

html{
  margin: 0;
  padding: 0; 
  Box-sizing: border-Box;

}


body {
  display: grid;
  margin: 30px 30px;
  color: #595959;
  font-family: 'Roboto',sans-serif;
  background: url(images/@R_793_4502@s-background-big.png) no-repeat; 
  background-size: cover;
  min-height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}


img {
    max-width: 100%;
}



.top-nav-container {
    display: grid;
    grid-template-areas: 
    'logo name space burger-links';
    grid-template-columns: 150px auto auto 60px;
}

 #logo  {
   display: grid;
   grid-area: logo; 
   height: 100px;
   margin-top: 20px;
   padding-right: 20px;
}


#name {
   display: grid;
   grid-area: name;
   
   margin-top: 25px;
   margin-left: 30px;
   height: 100px;
}

h1 {
  
   font-size: 50px; 
   font-family:'Shadows Into Light Two';
   letter-spacing: 5px;
   margin: 0px;
  
}

.burger-container {
    display: grid; 
    position: absolute;
    right: 40px;
    margin-top: 30px;
  
}   
    
.burger {
    display: grid;
    cursor: pointer; 
}
    
.burger div {
    width: 70px;
    height: 7px;
    margin: 4px;
    background-color: #aa1226;
    transition: all 0.3s ease;
    
}

.burger-links {
    display: grid;
    grid-area: burger-links;
    position: fixed;
    top: 6vh;
    right: 0px;
    max-height: 30vh;
    background-color: rgba(243,243,0.85);
    align-items: center;
    text-align: center;
    width: auto;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    list-style: none;
    z-index: 1;
}

.burger-links li {
    display: grid;
    justify-content:flex-start;
}

  
.burger-links a {
    font-family: 'Roboto',sans-serif;
    font-size: 22px;
    color: #aa1226;
    font-weight: 600;
    border-bottom: 1px solid #595959;
    padding: 1em 2em;
}  

.burger-links :last-child a {
    border: none;
}
 
#big-nav {
    display: none;
}
    

.nav-active {
    transform: translateX(0%);
}
  
@keyframes navLinkFade {
from {
    opacity: 0;
    transform: translateX(50px);
}
to {
    opacity: 1;
    transform: translateX(0px);
}
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
    opacity: 0;
}
.toggle .line3 {
    transform: rotate(45deg) translate(-5px,-6px);
}
   
.main {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
        'group-pic'
        'gigs';
    grid-template-columns: 100%;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    
}

.group-pic {
    grid-area: group-pic;
}

.main .group-pic {
    display: grid;
}

.gigs {
    display: grid;
    grid-area: gigs;
    background-color: rgba(192,192,0.1); 
    Box-shadow: 3px 5px #efebeb;
     
}

.gigs h3 {
    font-size: 40px;
    color: grey;
    padding-left: 35px;
}
 
.gigs li {
    display: grid;
    justify-content:flex-start;
}

.gigs a {
    font-size: 40px;
    color: grey;
}

   
footer {
    display: grid;
    grid-template-areas: 
    'copyright  facebook';
    grid-template-columns: 70% 30%;
    margin-top: 100px;
    height: 40px;
}
    
 #copyright {
    display: grid;
    grid-area: copyright;
    padding-left: 70px;
}
    
 #copyright,h3 {
    color: black;
    font-size: 20px;
    font-weight: 600;  
}
    
 #facebook-icon  {
    display: grid;
    grid-area: facebook;
    padding-left: 50px;
}

#facebook-icon img {
    max-height: 100px;
}

/* ABOUT */

.mainAbout #band {
    display: table;
    margin: auto;
    max-width: 600px;
    margin-bottom: 200px;
    margin-top: 10px;
}

#band {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 10px;
    background-color: rgba(192,0.1); 
    Box-shadow: 3px 5px #efebeb;
}

.bandTitle {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    
}

.aboutLists  {
    font-size: 20px;
   font-weight: 600;
}


.aboutPara {
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
}


/* CONTACT */

.mainContact {
    display: table;
    margin: auto;
    max-width: 600px;
    margin-bottom: 450px;
}

#contact {
  
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 10px;
    margin-bottom: 100px;
    background-color: rgba(192,0.1); 
    Box-shadow: 3px 5px #efebeb;
    text-align: center;
  
}

.contactTitle {
    font-family: 'Roboto',sans-serif;
    font-size: 26px;
    font-weight: 600;
 
}


.contactPara {
  font-size: 24px;
  font-weight: 600;
  font-family: 'Roboto',sans-serif;
  letter-spacing: 2px;
  line-height: 34px;
}

/* MUSIC */


.mainMusic {
    margin: auto;
    max-width: 600px;
}

#video {
    margin-bottom: 20px
}

    
    /* GIGS */

.mainGigs {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
        'gigs'
        'gigs-pic';
    grid-template-columns: 100%;
    width: 700px;
    margin-left: auto;
    margin-right: auto;    
}
    
.mainGigs #gigsBox {
    display: grid;
    grid-area: gigs;
    background-color: rgba(192,0.1); 
    Box-shadow: 3px 5px #efebeb; 
    margin-bottom: 70px;
    padding-left: 30px;
    list-style-type: none;
}

    
 #gigsBox li {
  
     list-style-type: none;
}

.mainGigs #gigsBox h3 {
  
    padding-left: 30px;
}
  
.mainGigs img {
    display: grid;
    grid-area: gigs-pic;
    margin-bottom: 150px;
}


/* Extra small devices (phones,600px and down) */
@media only screen and (max-width: 600px) {
.burger-links {
    height: 25vh;
    top: 10vh;
} 
    
.burger-links a {
    font-size: 24px;
    
} 

    
}


  /* portrait tablets and large phones,600px and up) */
@media only screen and (min-width: 600px) {
.burger-links {
    height: 35vh;
    top: 10vh;
    
}
    
.burger-links a {
    font-size: 24px;
    
} 
    
#facebook-icon img {
    max-height: 100px;
}
}


/* Medium devices (landscape tablets,768px and up) */
@media only screen and (min-width: 768px) {
.burger-links {
    height: 45vh;
    top: 30vh;
    padding: .5em .5em;
}
    

}





/* Large devices (laptops/desktops,992px and up) */
@media only screen and (min-width: 992px) {
    
body {
 font-family: 'Roboto',sans-serif;
  background: url(images/@R_793_4502@s-background-big.png) no-repeat; 
    
}
    
.top-nav-container {
    display: grid;
    grid-template-areas: 
    'logo name space burger-links';
    grid-template-columns: 160px auto auto auto;
    margin-bottom: 50px;
}
   
.top-nav-container #logo  {
    height: 100px;
    padding-right: 20px;
    margin-top: 0px;
}

#name {
   margin-top: 0px;
   margin-left: 30px;
}

#name,h1 a {
   font-size: 50px; 
    margin: 0px;
}
 
#big-nav {
    display: inline-block;
    text-decoration: none;
    list-style: none;
    text-align: justify;
    min-width: 550px;
    margin-left: 100px;
}
    
#big-nav li {
    display: inline-block; 
    padding-right: 40px;
} 
    
#big-nav:after {
    content: '';
    display: inline-block;
    width: 100%;
  
}
   
#big-nav li a {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    color: #aa1226;
    transition:  0.25s;
}

#big-nav a {
    opacity:1;
        
}
    
#big-nav a:hover {
    opacity:0.51;
        
}
    
.burger-container {
    display: none;
}
    
.burger-container {
    display: none;
}
    

.main {
    display: block;
    width: auto;
    margin: auto;
    margin-top: 20px;
}

    
.stoneys2 {
    display: block;
    Box-shadow: 5px 6px rgba(51,51,0.3);
}


    
.mainAbout #band {
    max-width: 800px;
}
    
.mainContact {
    margin-bottom: 50px;
}     

#contact {
    margin-bottom: 30px;
}
  
footer {
    margin-top: 20px;
}
    
#facebook-icon  {
    display: grid;
    grid-area: facebook;
    padding-left: 200px;
}    
  
.mainMusic {
     display: flex;
     max-width: 1350px;
}   
  
#iframeHolder1,#iframeHolder2 {
     flex: 1;
     padding-right: 20px;
}
 
.gigs {
    display: none;
}
    
.mainGigs {
    display: grid;
    grid-template-areas: 
        'gigs'
        'gigs-pic';
    grid-template-columns: 100%;
    width: 700px;
    margin-left: auto;
    margin-right: auto;    
}
    
.mainGigs  #gigsBox {
    display: grid;
    grid-area: gigs;
    background-color: rgba(192,0.1); 
    Box-shadow: 3px 5px #efebeb; 
    margin-bottom: 0px;
}
    
.mainGigs,#gigsBox,h3 {
    font-size: 30px;
    color: #595959;
    padding-left: 55px;
}
    
.mainGigs,a {
    font-size: 26px;
}
    
.group-pic {
    grid-area: gigs-pic;
}
  
.main .group-pic {
    display: grid;
}
    
}

/* Extra large devices // Extra large devices (large desktops,1200px and up) */
@media (min-width: 1200px) { 
.main {
   width: 1100px;
   margin-left: auto;
    margin-right: auto;
} 
}
    
<!DOCTYPE html>

<html>
    

<head>
    <title>Sycamore Alley</title>
    
    <!-- normalize.css -->
    <link rel="stylesheet" type="text/css" href="normalize.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <Meta name="description" content="Sycamore Alley Band website.">
    
 <link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    
    <!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
   

</head>

<body>
    
    <div class='top-nav-container'>
  
       <a href="index.html">                
         <img src="images/tree-w-@R_793_4502@s.png" alt="picture of sycamore tree" id="logo">  
       </a>
        
         <h1 id='name'><a href='index.html'>Sycamore Alley</a></h1>
       
    
            <div class='link-wrapper'>        
           
                <ul id='big-nav'>
                    <li><a href="about.html">about</a></li>   
                    <li><a href="music.html">listen</a></li>
                    <li><a href="gigs.html">gigs</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
                
             </div>
                  
              <div class='burger-container'>
               
                <div class="burger">
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="line3"></div>
                </div>
               
                <ul class='burger-links'>
                    <li><a href="about.html">about</a></li>   
                    <li><a href="music.html">listen</a></li>
                    <li><a href="gigs.html">gigs</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
                  
                </div>  
                   
                  </div><!-- top-nav-container-->
       
<script src='script.js'></script>
  
        <main class='main'>
 
             
            <img src='images/stoneys%20w%20bar.png' class='group-pic' alt='picture of sycamore alley bandmembers'>
    
            <div class="gigs">
                <h3>gigs</h3>
                    <ul>

                        <li><a href='http://themarketatlibertyplace.com/'> <b>Market at Liberty Place&#126;</b><br>Kennett Square PA<br>9/11/20 - 6-10pm</a></li><br><br>


                        <li><a href='https://www.facebook.com/pages/category/Farmers-Market/Bellefonte-Farmers-Market-244701048977/'><b>Old Stone cider&#126;</b><br>Lewisvillie PA<br>9/25/20 - 5:30-8:30pm</a></li>

                   </ul>
            </div>
      
      </main>
              
 
                <footer id='big-footer'>
           <h3 id='copyright'>copyright &copy;2020 sycamore alley</h3>
        
           <a href='https://www.facebook.com/sycamore.alley/' id='facebook-icon'><img src='images/facebook-@R_793_4502@.png'></a>
        
    </footer>

   
</body>

</html>
const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.burger-links');
  const navLinks = document.querySelectorAll('.burger-links li');


burger.addEventListener('click',() => {
    // toggle nav
    nav.classList.toggle('nav-active');

// Animate navLinks
navLinks.forEach((link,index) => {
  if (link.style.animation) {
    link.style.animation = '';
  } else {
    link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + .03}s';
    console.log(index / 7);
  }
});
    // Burger animation
burger.classList.toggle('toggle');
});

}
navSlide();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

hamburger-menu