堆栈内存溢出
  繁体   English   中英

如何让我的导航菜单在导航栏下方而不是在导航栏内部打开？

[英]How do I get my nav menu to open beneath the navigation bar and not inside of it?

 原文  2022-12-19 22:08:27  7   1    javascript/ html/ css/ nav/ hamburger-menu

问题描述

我正在尝试为我正在开发的网站实现一个简单的汉堡包图标导航菜单，但我遇到了导航菜单的内容在导航菜单中打开/出现的问题，而不是在导航栏下方。

HTML:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <title>Buck's Farmstand</title>
        <link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

    <body id="mainPageBody">
        <header class="navHeader">
            <div class=buttonContainer>
                <a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
            </div>
            <div class=logoContainer>
                <a href="#"><img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo"></a>
            </div>
            <div id="myLinks">
                <a href="G:\webDev\bucks_farmstand\html\bucksInventory.html">Produce</a>
                    <a href="G:\webDev\bucks_farmstand\html\bucksPickUpComingSoon.html">Online-Order</a>
                <a href="G:\webDev\bucks_farmstand\html\bucksAbout.html">About</a>
                <a href="G:\webDev\bucks_farmstand\html\bucksContact.html">Contact</a>
            </div>
            <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
            <a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
                 <i class="fa fa-bars"></i>
            </a>
            
            <script>
            function myFunction() {
                var x = document.getElementById("myLinks");
                if (x.style.display === "block") {
                     x.style.display = "none";
                } else {
                        x.style.display = "block";
                }
            }
            </script>   
        
        </header>
            
        <br>    

    </body> 
</html>

CSS：

/*overrides everything for specifc page*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*background-color: #FFDAB9;*/
    overflow: auto;
    
    
}

/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
    
    font-family: "cursive", cursive;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    text-decoration: none;

}



/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
    object-fit: cover;
    position: relative;
    height: 60px;
    width: 100%;
    cursor: pointer;    
}

.logoContainer{
    margin: auto;
    position: relative;
    right: 35px;
}

.navHeader{
    position: fixed;
    width: 100%;
    background: #deb887;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 2%;
    height: 65px;
    overflow: hidden;

    z-index: 950;
}

.navHeader #myLinks{
    display: none;
    position: relative;
    top: 5px;
}

/* Style the hamburger menu */
.hamIcon {
  overflow: auto;
  background: none;
  display: block;
  position: fixed;
  right: 20px;
  top: 23px;
}


.cta{
    background: #deb887;
    overflow: hidden;
    width: 15%;
}

.buttonContainer{
    overflow: hidden;
}

button{
    padding: 9px 5px;
    background-color: rgba(35,255,0,0.5);
    border: 2px solid;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: yellow;
}

1 个解决方案

解决方案1
 0  2022-12-19 22:45:03

这里的问题是你的<header>类.navHeader正在使用display: flex; 因此该元素中的项目将充当弹性元素。 您可以在此处阅读有关这些的更多信息

有几种方法可以解决这个问题。

我认为最好的解决方案是将<div id="myLinks"></div>块移动到标题下方。

然后在您的 CSS 中：从*中删除overflow: auto 。

删除.navHeader之前的#myLinks类，并添加更多属性以确保该块位于标题下方#myLinks{top: 65px; padding: 10px; text-align: center;} #myLinks{top: 65px; padding: 10px; text-align: center;}

这是完整的代码：

HTML

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <title>Buck's Farmstand</title>
  <link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body id="mainPageBody">
  <header class="navHeader">
    <div class=buttonContainer>
      <a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
    </div>
    <div class=logoContainer>
      <a href="#"><img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo"></a>
    </div>
      <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>

  </header>
  <div id="myLinks">
    <a href="G:\webDev\bucks_farmstand\html\bucksInventory.html">Produce</a>
    <a href="G:\webDev\bucks_farmstand\html\bucksPickUpComingSoon.html">Online-Order</a>
    <a href="G:\webDev\bucks_farmstand\html\bucksAbout.html">About</a>
    <a href="G:\webDev\bucks_farmstand\html\bucksContact.html">Contact</a>
 
  </div>

  <br>
  <script>
    function myFunction() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }
  </script>

</body>

</html>

CSS

/*overrides everything for specifc page*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /*background-color: #FFDAB9;*/
  /*     overflow: auto; */
}

/*referring to all of these categories not specifc to a class/ID*/
li,
a,
button {
  font-family: "cursive", cursive;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo {
  object-fit: cover;
  position: relative;
  height: 60px;
  width: 100%;
  cursor: pointer;
}

.logoContainer {
  margin: auto;
  position: relative;
  right: 35px;
}

.navHeader {
  position: fixed;
  width: 100%;
  background: #deb887;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 2%;
  height: 65px;
  overflow: hidden;

  z-index: 950;
}

#myLinks {
  display: none;
  position: relative;
  top: 65px;
  text-align: center;
  padding: 10px;
  width: 100%;
  background: #deb887;
}

/* Style the hamburger menu */
.hamIcon {
  overflow: auto;
  background: none;
  display: block;
  position: fixed;
  right: 20px;
  top: 23px;
}

.cta {
  background: #deb887;
  overflow: hidden;
  width: 15%;
}

.buttonContainer {
  overflow: hidden;
}

button {
  padding: 9px 5px;
  background-color: rgba(35, 255, 0, 0.5);
  border: 2px solid;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

button:hover {
  background-color: yellow;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何获得导航栏下拉菜单以与主体重叠？ 如何修复导航栏，以便在该人未查看导航栏时删除菜单？ | CSS / Javascript BOOTSTRAP：如何让我当前的导航栏有一个下拉选项？ 如何使用React创建指向我的导航栏的超链接？ 如何确保我的媒体查询侧边栏导航关闭而不影响我的主导航菜单 如何在导航栏上获取当前元素并保存在localStorage上？ 如何创建带有徽标和某些选项和搜索栏的下拉列表的导航栏链接菜单？ 我制作显示导航栏菜单。 为什么我必须获取列表的 id？ 我想知道如何获取页面 url 在我的侧导航栏中打开菜单 如何使我的移动菜单按钮显示和隐藏导航栏，以及在负数空间中单击时隐藏
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM