汉堡菜单将项目推到底部

问题描述 投票：0回答：1

我的汉堡菜单总是会出现一些问题，当我尝试将其包含到任何页面时，页面上的项目会被推到底部。我尝试用绝对位置修复它，但也没有真正解决问题。我只是希望我的元素位于汉堡菜单的右侧，并且向左浮动看起来也不太好。

这是我的 HTML 汉堡菜单代码


<body> 
<div id=alles>
    
<div class=schale> 
    <div class=burger>
    
        <div class=bar>
        </div>
    </div>
</div>
    <div class=seitenbar>
     <form>
         <div class=buttoncontainer>
            <div class=buttonbox>
                <i class="fa-regular fa-house"></i>  <input class=buttons formaction=homepage.php type=submit value=Home>  
            </div>    
            <div class=buttonbox>
                <br> <i class="fa-regular fa-key"></i> <input class=buttons formaction=register.php type=submit value=Registrierung>
            </div>
            <div class=buttonbox>
                <br>  <i class="fa-regular fa-clipboard-user"></i>  <input class=buttons formaction=login.php type=submit value=Login>
            </div>
        </div>   
     </form>
    </div>
     
</div>
</body>

以及汉堡菜单的CSS代码

*{
   margin: 0;
    
}
.buttoncontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

.buttons{
    margin-top: 5vh;
    margin-bottom: 1vh;
    height: auto;   
    width: auto;
    border-radius: 5%;
    transition: 0.3s;
   border-radius: 1vh;
}

.buttons:hover{
    transition: all 0.3s;
   color:cadetblue;
   background-color: #1c1c21;
}
.schale{
    
    position: relative;
    display:flex;   
    width: 10vw;
    min-height: 6vh;
    
    background-color: #1c1c21;
    z-index: 0;
}

.burger {
    position: relative;
    min-height: 2vh;
    width: auto;
    border-color: red;
    padding-top: 0.5vw;
    margin-top: 0.5vw;
    margin-left: 1vw;    
    /* transition:all .5s ease-in-out; */
    z-index: 0;
}

.bar{
    min-height: 0.5vh;
    min-width:1vw;
    background-color: cadetblue;
    border-radius: 5%;
    transition: all  0.5s ease-in-out;
    border-color: brown;
    z-index: 0;
}

.bar::before, .bar::after{
    content: "";
    position: absolute;
    min-height: 0.5vh;
    min-width: 1vw;
    background-color: cadetblue;
    border-radius: 5%;
    transition: all 0.5s ease-in-out;
}

.bar::before{
    transform: translateY(-1vh);
}

.bar::after{
    transform: translateY(1vh);
}

.burger.offen .bar{
    transform: translateX(-1.5vw);
    background-color:transparent;
    background-color:   transparent;
}

.burger.offen .bar::before{
transform: rotate(45deg) translate(1vw, -2vh);
}

.burger.offen .bar::after{
    transform: rotate(-45deg) translate(1vw, 2vh);
}

.seitenbar{
    position: relative;
    display: flex;
    justify-content: left;
    align-content: center; 
    width:  10vw;
    left:   -21vw;
    height: 94.91vh;
    background-color: #1c1c21;
    transition: all 0.5s ease-in-out;
    z-index: 2;
    
}

.fa-house{
 color:cadetblue;
}
.fa-key{
    color:cadetblue;
}

.fa-clipboard-user{
    
    color:cadetblue;
}

以及菜单的 JavaScript 部分

const burgerr = document.querySelector(".burger");
var seitenbar = document.querySelector(".seitenbar");
let öffnen = false;
burgerr.addEventListener("click", () =>{

    if (öffnen == false) {
        burgerr.classList.add("offen");
        öffnen = true;
       seitenbar.style.left= "0px";
        
    }
   else {
        burgerr.classList.remove("offen");
        öffnen = false;
        seitenbar.style.left="-21vw"
    }
    // if (öffnen==true) {
    //     alert("test")
    // }
}

);

这是我想要包含汉堡的页面的 HTML 代码

<body>
    <?php
    include "menu.php"    ?>

<link rel=stylesheet href=dashboard.css>

<div id=alles>


    <div id=boxen> 
        <div id=veranstaltungen class=elemente>
            Veranstaltungen
            <!-- Alle Veranstaltungen anzeigen können
            Anzeige, welche Veranstaltungen im Studiengang noch fehlen
            Anzeige, welche Veranstaltungen im Studiengang noch fehlen -->
        </div>
        <div id=veranstaltungen_fertig class=elemente>
        abeschlossene veranstaltungen
        </div>
        <div id=studiengang class=elemente>
        Studiengang
        <!-- Die Noten der Studenten anzeigen lassen, in der Form, dass zu jedem Studiengang jedes Modul angezeigt wird -->
        </div>
    </div>


    
</div>

</body>

以及页面的CSS代码


#boxen{
    display:grid;
    border-style: solid;
    border-width: 1vw;
    border-color:black;
    grid-template-columns: auto;
    grid-template-rows: 1vw, 1vw, 1vw;
    justify-content: center;
}

.elemente{
    border-style: solid;
    border-width:5vw;
    border-color:cornflowerblue;
}

如何解决这个问题？

我已经尝试过

float:left;
，但它不起作用，而且绝对位置也没有真正锻炼

javascript html css
1个回答
0
投票

没什么可说的，只是一个带有汉堡下拉菜单的非常基本的香草导航栏。添加了一些解释性注释，但我不是 CSS 专家，因此可能存在跨平台问题。不擅长动画，所以忽略了它。哈哈。

function toggleDisplay (el, displayAs = 'block') {
  if (window.getComputedStyle(el).display === 'none') {
    el.style.display = displayAs
  } else {
    el.style.display = 'none'
  }
}

const burgerr = document.querySelector('#burgerr')
const seitenbar = document.querySelector('#seitenbar')
const logEl = document.querySelector('#log')

burgerr.addEventListener("click", () => {
  toggleDisplay(seitenbar, 'block')
})

document.querySelector('#menu-close').addEventListener('click', () => {
  toggleDisplay(seitenbar, 'block')
})

document.querySelector('#menu-home').addEventListener('click', () => {
  log.textContent = 'home action'

  toggleDisplay(seitenbar)
})

document.querySelector('#menu-register').addEventListener('click', () => {
  log.textContent = 'register action'

  toggleDisplay(seitenbar)
})

document.querySelector('#menu-login').addEventListener('click', () => {
  log.textContent = 'login action'

  toggleDisplay(seitenbar)
})

document.querySelector('#nav-title').addEventListener('click', () => {
  log.textContent = 'home action'
})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  list-style-type: none;
  background-color: black;
  color: white;
  user-select: none; /* prevent highlighting menu items */

  #burgerr {
    padding: 0.5rem; /* more fat-finger friendly */
    cursor: pointer; /* interactive cursor */
  }

  > .nav-bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
  }

  #seitenbar {
    display: none;
    background-color: black;
    color: white;
    /* remove menu from normal page flow
      so it can't push stuff around.
    */
    position: absolute;
    top: 0; /* no positioning drama */
    left: 0; /* just use a close button in menu */
    border: 1px solid gray;

    > li {
      cursor: pointer;
      padding: 0.5rem;

      &:not(last-of-type) {
        border-bottom: 1px solid gray;
      }
    }
  }
}

p {
  text-align: center;
}

#log-container {
  width: 100%;
  position: absolute;
  bottom: 0.25rem;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>

<body>
  <nav>
    <div class="nav-bar">
      <span id="burgerr" title="menu hamburger">&#x2630;</span>

      <h1 id="nav-title">Title | Logo</h1>
    </div>

    <ul id="seitenbar">
      <li id="menu-close">
        <span>Close Menu</span>
      </li>

      <li id="menu-home">
        <span>Home</span>
      </li>

      <li id="menu-register">
        <span>Register</span>
      </li>

      <li id="menu-login">
        <span>Login</span>
      </li>
    </ul>
  </nav>

  <p>A simple example.</p>

  <div id="log-container">
    <p id="log"></p>
  </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.