javascript - 基于现有代码的简单响应式网站标题

标签 javascript html css navigation responsive

我最初在其他地方问过这个问题，但代码已经被修改和精简，以便更容易使用，因此重新发布。

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>


Image of how the header would work.
我最初设置了两个标题，只是将桌面隐藏在移动设备上，将移动设备隐藏在桌面上。我不能这样做，它只需要稍作调整。只需要功能。

我知道我可以使用按钮(然后样式显示☰和✘)，但我不知道如何在移动设备和桌面设备上使用相同的页面链接来响应。您可以将我的代码复制到您的答案中，我知道我可能需要监听器和 JavaScript，但无法用我已经拥有的设计来解决。

提前致谢 :)
UPDATE

下面是我需要做的一个功能性想法，我不知道如何将它整合到我的设计中。

let menu = document.querySelector('nav')
document.querySelector('button')
	.addEventListener('click', e => {
  	menu.classList.toggle('active')
  })
header{
  position: relative;
  display: flex;
  background: #ccc;
  justify-content: space-between;
}
nav{
  display: flex;
}
nav a{
  display: block;
  padding: 10px;
  background: #ddd;
  border: 1px solid #aaa;
}
button{
  display: none;
}

@media (max-width: 400px) {  
  nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: right;
    display: none;
  }
  nav.active{
    display: block;
  }
  button{
    display: block;
  }
}
<header>
  <a href="" class="logo">logo</a>
  <button>menu</button>
  <nav>
    <a href="">Page1</a>
    <a href="">Page2</a>
    <a href="">Page3</a>
    <a href="">Page4</a>
  </nav>
</header>


我需要它的功能与上面的图像和我的初始代码片段中的设计相匹配。
UPDATE 2

进步:

这样做的想法是复制移动网站的外观，并且只有一个响应式标题。我试过有两个版本的标题。它可以通过将桌面设备隐藏在移动设备上并将移动设备隐藏在桌面设备上，因此重新发布代码已经发生了足够大的变化。

我现在只需要 ☰在桌面和 | Page1 Page2 Page3 Page4 | 上查看时隐藏的按钮在移动设备上隐藏，但当单击按钮时，页面列表会出现下拉菜单。我可以使用 Before::和 after::但我已经尝试过使用 event listener而不是使用Bootstrap因为我不是那么熟悉。

代码如下:

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">
 <link rel="stylesheet" href="./stylesheet3.2.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">
<button>☰</button>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
</header>

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


我认为这与类(class)列表有关？我可以在单击按钮时显示页面，尽管这样做会与桌面上的设计相混淆，并且页面名称不再水平显示。您应该能够将我的代码复制到您的答案中，或者只是提供一些指导。任何事情都会不胜感激，我已经花了几个小时在这上面，但无法让它工作。

希望上面的图片会有所帮助，请使我创建的代码能够正常工作，因为这是我希望选择的设计，也是我坚持的设计。页面设置为在 500px 处显示按钮，media queries如果有人能告诉我为什么这不起作用，那就太棒了。

剩下要做的就是；让按钮在桌面上隐藏，让按钮在移动设备上显示，在移动设备上单击按钮显示页面列表，如图所示。用 <nav></nav> 包裹页面列表标签破坏了桌面格式。

最新版 fiddle Fiddle of the latest version (with button)

我被卡住了，请帮忙。提前致谢 :)
UPDATE 3

我设法获得了一些功能，但下拉菜单本身没有样式，现在页面标题也堆叠在桌面上。图标也不会切换。

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: block;
        }
        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>


快到了。请帮助，将不胜感激:)
Update 4

我已经将按钮恢复为水平对齐。

我拥有的最终代码是；

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;
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: 400px) {
        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>

<script>
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')
    })
</script>


我只是想知道为什么在调整浏览器窗口的大小时文本会变得更大？有没有我已经定义了两次的东西，或者有没有我没有发现的冗余代码？谢谢。

最佳答案

您的“功能性想法”绝对有效。我只是通过 fontawesome 介绍按钮图标。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    header{
        position: relative;
        display: flex;
        background: #ccc;
        justify-content: space-between;
    }
    nav{
        display: flex;
    }
    nav a{
        display: block;
        padding: 10px;
        background: #ddd;
        border: 1px solid #aaa;
    }
    button{
        display: none;
    }

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

</style>
<header>
    <a href="" class="logo">logo</a>
    <button><i class="fa fa-bars"></i></button>
    <nav>
        <a href="">Page1</a>
        <a href="">Page2</a>
        <a href="">Page3</a>
        <a href="">Page4</a>
    </nav>
</header>
<script>
    menu = document.querySelector('nav');
    document.querySelector('button')
        .addEventListener('click', e => {
        menu.classList.toggle('active')
    document.querySelector('button i').classList.toggle('fa-bars')
    document.querySelector('button i').classList.toggle('fa-times')
    })
</script>

关于javascript - 基于现有代码的简单响应式网站标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51804011/

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

下一篇：css - 如何为 React tic-tac-toe 教程添加颜色？

相关文章：

javascript - 困惑: Ajax Framework vs JavaScript Framework?

html - 跨度内文本的 CSS 选择器是什么？

HTML 输入占位符，首字母 CSS 更改不适用于更新的浏览器

jquery - 背景尺寸 : Cover - Firefox issue

javascript - 为什么我的 <a> 标签选择不起作用？

javascript - css/js 中的自动换行

javascript - 如何将带有图像的 div 与带有文本的另一个 div 保持在同一行

javascript - 如何在json2html中使用onclick

javascript - 如何使用 ajax 将多个值发送到 PHP

javascript - 为什么我无法在 v3 中将普通变量转换为 jQuery 对象？

©2024 IT工具网  联系我们