Question

几乎整天我都在为此工作。我快到了。只是需要我不知道如何实现的画龙点睛。

我的导航应如下所示：这是桌面版本的外观：

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>

我现在大部分时间都在那儿。我有切换图标和大多数功能。调整浏览器窗口大小时，文本大小只有一个小问题。

Answer 1

    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/

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

使用topnav和事件监听器调整桌面显示，以进行响应式站点导航

1 个答案: