javascript - 使用 topnav 和事件监听器调整桌面显示以响应站点导航-6ren

javascript - 使用 topnav 和事件监听器调整桌面显示以响应站点导航

转载作者：太空宇宙更新时间：2023-11-04 07:03:36

我几乎一整天都在处理这个问题。我快到了。只需要收尾，我不知道如何实现。

我的导航应该是这样的: 这是桌面版本的外观:

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}

.headerfill {
height: 10vh;
border: none;
}

.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}

.logo {
height:8vh;
max-width: 80vw; 
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}

img{
-webkit-user-drag: none;
}

.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}


@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}

.nav:hover {
color: #096e67;
}

a:link {
    color: #000000;
    text-decoration: none;
}

h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}

<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>

如您所见，所有页面标题都是水平的且间距均匀。

我现在有这段代码:

body,
html {
  max-width: 100%;
  padding: 0vw;
  margin: 0vw;
}

.header {
  background-color: #ffffff;
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
  height: 10vh;
  z-index: 1;
  border-bottom: solid;
}

.headerfill {
  height: 10vh;
  border: none;
}

.header-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: auto;
  margin-left: auto;
  margin-right: auto;
}

.logo-container {
  float: left;
  width: 40%;
  padding-left: 1vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.space-evenly {
  justify-content: space-evenly;
}

@media only screen and (max-width: 500px) {
  .navigation-container {
    width: 60%;
    display: flex;
    flex-flow: row nowrap;
    //justify-content: space-evenly; 
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .space-evenly {
    justify-content: space-evenly;
  }
  nav.active {
    display: block;
  }
}

.logo {
  height: 8vh;
  max-width: 80vw;
  padding-top: 1vh;
  padding-bottom: 1vh;
  padding-left: 4vh;
  display: block;
  object-fit: contain;
}

img {
  -webkit-user-drag: none;
}

.nav {
  font-family: 'Roboto', serif;
  font-size: 2vw;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  color: #000000;
  padding-left: auto;
  padding-right: auto;
  line-height: 1em;
  object-fit: contain;
  text-decoration: none;
}

@media only screen and (max-width: 500px) {
  .nav {
    font-family: 'Roboto', serif;
    font-size: 2.5vw;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
  }
}

.nav:hover {
  color: #096e67;
}

a:link {
  color: #000000;
  text-decoration: none;
}

h1 {
  font-family: 'Roboto', serif;
  font-size: 4vw;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #000000;
  padding-left: 4vh;
  padding-right: 2vh;
  padding-bottom: 0.5vh;
  line-height: 1em;
}

@media only screen and (max-width: 500px) {
  h1 {
    font-family: 'Roboto', serif;
    font-size: 8vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 2vh;
    padding-right: 2vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
  }
}

button {
  display: none;
}

@media (max-width: 500px) {
  nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: right;
    display: none;
  }
  nav.active {
    display: inline;
  }
  button {
    display: block;
  }
}

<html lang="en-GB">

<head>
  <meta charset="utf-8" />
  <title>Website Header</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>

  <header>
    <div class="header">
      <div class="header-container">
        <div class="logo-container">
          <img class="logo" src="/logo.png" alt="Logo">
        </div>
        <div class="navigation-container space-evenly">
          <button>☰</button>
          <nav>
            <p class="nav">Page1</p>
            <p class="nav">Page2</p>
            <p class="nav">Page3</p>
            <p class="nav">Page4</p>
          </nav>
        </div>
      </div>
    </div>
  </header>

  <script>
    let menu = document.querySelector('nav')
    document.querySelector('button')
      .addEventListener('click', e => {
        menu.classList.toggle('active')
      })
  </script>

该按钮现在出现并且可以在移动设备上使用。

修复:

1) 在桌面上水平显示页面名称。

2) 允许按钮在 ☰ 之间切换和 ✘可以使用:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 来实现只是现在确定如何。

3) 设置下拉菜单的格式，使文本位于页面顶部自己的框中并右对齐。

我已经到了死胡同。我只是不确定如何完全完成这项工作。任何建议都可能有所帮助。如果可能，您还可以编辑我的代码作为答案以使其功能齐全。

提前致谢:)

Update 1

menu = document.querySelector('nav');
    document.querySelector('i')
        .addEventListener('click', e => {
        menu.classList.toggle('active')
    document.querySelector('header i').classList.toggle('fa-bars')
    document.querySelector('header i').classList.toggle('fa-times')
    })

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;
}

.headerfill {
height: 10vh;
border: none;
}

.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}

.logo {
height:8vh;
max-width: 80vw; 
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
padding-left:4vh;
display: block;
object-fit: contain;
}

img{
-webkit-user-drag: none;
}

.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}


@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}

.nav:hover {
color: #096e67;
}

a:link {
    color: #000000;
    text-decoration: none;
}

h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}


    nav{
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        margin-right: auto;
        text-align: right;
    }
    nav a{
        display:block;
        padding: 10px;
        font-family: 'Roboto', serif;
        font-size: 2vw;
        text-align: left;
        margin-top: auto;
        margin-bottom: auto;
        color: #000000;
        padding-left: auto;
        padding-right: auto;
        line-height: 1em;
        object-fit: contain;
        text-decoration: none;
    }
    i{
        display: none !important;
    }
 
    @media (max-width: 500px) {
        nav{
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;

            display: none;

            font-family: 'Roboto', serif;
            font-size: 2.5vw;
            margin-top: auto;
            margin-bottom: auto;
            color: #000000;
            padding-left: auto;
            padding-right: auto;
            line-height: 1em;
            object-fit: contain;
            text-decoration: none;
        }
        nav.active{
            display: block;
        }
        i{
            display: block!important;
            margin:5px;
        }
    }

<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>

我现在已经完成大部分工作了。我有切换图标和大部分功能。调整浏览器窗口大小时，文本大小会出现一个小问题。

最佳答案

    body, html {
        max-width: 100%;
        padding: 0vw;
        margin: 0vw;
    }
    
    .header {
    background-color: #ffffff;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    height: 10vh;
    z-index: 1;
    border-bottom: solid;
    }
    
    .headerfill {
    height: 10vh;
    border: none;
    }
    
    .header-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    }
    
    .logo-container {
    float: left;
    width: 40%;
    padding-left: 1vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    }
    
    .navigation-container {
      width: 60%;
      display: flex;
      flex-flow: row nowrap;
      //justify-content: space-evenly; 
      margin: auto;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .space-evenly {
      justify-content: space-evenly;
    }
    
    .logo {
    height:8vh;
    max-width: 80vw; 
    padding-top:1vh;
    padding-bottom:1vh;
    padding-left:4vh;
    display: block;
    object-fit: contain;
    }
    
    img{
    -webkit-user-drag: none;
    }
    
    .nav {
    font-family: 'Roboto', serif;
    font-size: 2vw;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
    }
    
    
    @media only screen and (max-width: 500px) {
    .nav {
    font-family: 'Roboto', serif;
    font-size: 2.5vw;
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
    }
    }
    
    .nav:hover {
    color: #096e67;
    }
    
    a:link {
        color: #000000;
        text-decoration: none;
    }
    
    h1 {
    font-family: 'Roboto', serif;
    font-size: 4vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 4vh;
    padding-right: 2vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    
    @media only screen and (max-width: 500px) {
    h1 {
    font-family: 'Roboto', serif;
    font-size: 8vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 2vh;
    padding-right: 2vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    }
    
    
    
    button {
      display: none;
    }
    
    nav {
        display: flex;
        flex: 1;
        justify-content: space-evenly;
    }
    
    @media (max-width: 500px) {
      nav {
        position: relative;
        text-align: left;
        padding:10px;
        display: none;
      }
      nav.active {
        display: inline;
      }
      button {
        display: block;
        position: absolute;
        top: -27px;
        right: 10px;
        width: 25px;
        height: 25px;
      }
      button:before {
        font-family: FontAwesome;
        content: "\f0c9";
      }
      .header-container {
        flex-flow: row wrap;
      }
      .logo-container, .navigation-container {
        width: 100%;
      }
      .navigation-container {
        justify-content: flex-end;
        padding-right: 10px;
        position:relative;
      }
      .navigation-container.active {
        
      }
      .navigation-container.active button:before {
        font-family: FontAwesome;
        content: "\f00d";
      }
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <html lang="en-GB">
    <head>
    <meta charset="utf-8"/>
    <title>Website Header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>
    <body>
    
    <div class="header">
    <div class="header-container">
    <div class="logo-container">
    <img class="logo" src="/logo.png" alt="Logo">
    </div>
    <div class="navigation-container space-evenly">
      <button></button>
      <nav>
        <p class="nav">Page1</p>
        <p class="nav">Page2</p>
        <p class="nav">Page3</p>
        <p class="nav">Page4</p>
      </nav>
    </div>
    </div>
    </div>
    
      <script>
          let container = document.querySelector('.navigation-container');
        let menu = document.querySelector('nav');
        document.querySelector('button')
          .addEventListener('click', e => {
            menu.classList.toggle('active');
             container.classList.toggle('active')
          })
      </script>
    
    </body>
    </html>

https://jsfiddle.net/Sampath_Madhuranga/1cdu745t/39/

这对你有用。我为移动设备添加了新样式并更新了布局。试试我的代码。谢谢。

关于javascript - 使用 topnav 和事件监听器调整桌面显示以响应站点导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51805153/

文章推荐： c - 为什么这段代码的输出是4？

文章推荐： java - 无法使用 SpringSource Tool Suite 计算构建计划

文章推荐： python函数在n行中分解一条消息

文章推荐： c - fork系统调用不退出

Javascript 调整
我是 Javascript 新手，所以请原谅基本代码。有什么方法可以让我使用用户输入的指定调整来打印代码？ height: width: 最佳答案为按钮
javascript - 调整 A 框架中的屏幕截图大小
我有一个带有 A 框架的场景，我正在使用方法 getCanvas 来获取屏幕截图并将其发送到 PHP。有没有办法调整 getCanvas 图像大小？因为默认的是 4096x2048，我需要它更小。如果
Oracle 调整/分析表
安排自动“分析表”的方法是什么。当大量数据通过插入和删除发生更改时，是否可以请求自动“分析表”？参数化自动分析表过程的方法是什么，即设置何时应该触发的规则。最佳答案您使用的是哪个版本的 Oracl
C - 调整/放大图像
我只是想说，我是 C 语言的新手。好吧，除此之外，我在圣诞假期的任务是编写一个以各种方式操作 PNG 图像的程序。我已经完成了大部分事情，但是在尝试编写放大图像的程序时遇到了问题。我已经尝试过了，并且
postgresql - Postgres 调整
在 Postgres 中编写更快查询的有效方法是什么？请不要包括一般良好的数据库实践(例如使用索引或规范化)。我正在寻找像派生表比子查询工作得更快或使用 python 字符串函数似乎比 pgsql 字
用于对齐页面元素的 Css 调整？
我不知道自己做了什么，但我要么将页眉和导航向右移动，要么将页面的其余部分向左移动。使用 tw Bootstrap 。我想不通。我对它进行了调试并查看了我的 css 编辑，没有看到任何负边距(我怀疑是这
html - 调整/缩放内部容器中的字体
我希望能够增加默认字体大小，但只能在特定的 DIV 内。很明显，这似乎正是 ems 所针对的那种情况。我的问题是我只想增加字体大小，而不影响使用em设置大小的其他内容，例如填充和边距。这可能看起来
algorithm - 感知器算法 - 调整
我正在我的大学上数据挖掘类(class)。我真的不明白这个问题。谁能帮我理解一下？最佳答案重要性权重让您了解在采样时找到特定数据点的频率。您可以使用它来增加训练数据集。例如，如果您只有两个数据点:
C++ 调整/优化
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
c - 调整 argVector
我的部分程序如下所示: char *argVector[] = {"./doTasks","0", "1", "3", NULL}; int numChild = 3; int temp; char
c++ - 调整 Qt 窗口大小时出现闪烁的白色区域
我在调整 QWindow 大小时观察到一个奇怪的行为。当我调整窗口大小时使宽度和高度都增加或减少时，窗口不会以白色背景闪烁。但是当我增加宽度同时减小高度(或反之亦然)时，窗口会闪烁并暂时用白色填充新的
调整 ggplot geom_dotplot 的大小
我在使用 ggplot2 创建图形时遇到问题。我正在使用带有中心堆叠的 geom_dotplot 来显示我的数据，这些数据是 4 个类别的离散值。出于审美原因，我想自定义点的位置，这样沿 y 轴减
javascript - 调整 Canvas 大小以适应容器
在尝试让我的 Canvas/Stage 调整大小并使其正确适合父容器时遇到一些问题。我发现了其他类似的帖子，虽然答案确实帮助我获得了新的屏幕尺寸，但它仍然不想适应容器，而是直接进入屏幕的边缘(这在示例
svg - 调整 svg 组的路径
我想将路径大小调整为 20 像素左右。 SVG 的大小应为 500 * 500，现在路径宽度为 297，高度为 180.7。现在我需要这条路径，其宽度为 277，高度为 160.7，在之前的路径中。
javascript - 调整 SVG 的大小围绕其原点旋转
我有一个矩形 svg，可以围绕二维平面拖动，围绕它自己的原点旋转并调整大小。 class SVG extends React.Component { constructor(props) {
python - 调整 MLPRegressor 超参数
我一直在尝试调整 MLP 模型的超参数来解决回归问题，但我总是收到收敛警告。这是我的代码 def mlp_model(X, Y): estimator=MLPRegressor() param_gr
SwiftUI - 调整 ScrollView 滚动指示器插入
我正在创建一个聊天应用程序，我希望 ScrollView 的内容位于输入字段下方(向上滚动时)。我已经将 ScrollView 和输入字段放在 ZStack 中。 ScrollView 上的底部填充使
.NET 垃圾收集 (GC) 调整
我遇到 GC 来不及删除空闲对象的情况。该代码将一个大文档加载到内存中并循环处理它。如果我在此循环中停止(在 Debug模式下)或添加 GC.Collect()，内存使用量将下降到 70 MB 以下。
pdf - 调整 PDF 格式以更快地打印它
我正在使用 iTextSharp 和 PdfSharp 的组合来组装一个大型 PDF 文件，以便打印到 Canon Oce VarioPrint 6000 系列打印机。 PDF 正在替换后记文件。这
sql - 调整 mysql 查询以获得更好的性能
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a softwar

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 topnav 和事件监听器调整桌面显示以响应站点导航