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

时间：2018-08-11 21:48:15

标签： 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>

我认为这与课程列表有关？我可以使页面在单击按钮时出现，尽管这样做会干扰桌面上的设计，并且页面名称不再水平显示。您应该可以将我的代码复制到您的答案中，或者仅提供一些指导。任何事情都将不胜感激，我已经花了数小时这样做，却无法正常工作。

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

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

最新版本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>

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

1 个答案:

答案 0 :(得分：1)

您的“实用构想”肯定有效。我只是通过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>
相关问题
最新问题