创建响应式网页标题的方法不那么笨拙？

时间：2018-08-11 17:29:24

标签： javascript jquery html css navigation

我目前有一个网站标题，该标题在台式机上运行良好。我最初计划将内容堆叠起来，以便页面随后显示在徽标下。我看到了用于下拉菜单的汉堡包菜单，这是我最终想要实现的，同时保留了左侧的徽标。

我知道这可能会花费一些时间，但我想我快到了。我只是认为让相同的元素具有响应性比创建两个单独的标题和切换可见性要容易得多。

所以目前我有这个：

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


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

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

.mobile-navigation-container {
  width: 20%;
  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;
}

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

@media only screen and (max-width: 500px) {
.header {
visibility: hidden;
}
}

@media only screen and (max-width: 500px) {
.header-container {
 visibility: hidden;
 }
 }
 
 @media only screen and (max-width: 500px) {
.logo-container {
 visibility: hidden;
 }
 }
 
 @media only screen and (max-width: 500px) {
.navigation-container {
 visibility: hidden;
 }
 }
 
 @media only screen and (max-width: 500px) {
.logo {
 visibility: hidden;
 }
 }

@media only screen and (min-width: 501px) {
.mobileheader {
visibility: visible;
}
}

@media only screen and (min-width: 501px) {
.mobile-header-container {
 visibility: visible;
 }
 }
 
 @media only screen and (min-width: 501px) {
.mobile-logo-container {
 visibility: visible;
 }
 }
 
 @media only screen and (min-width: 501px) {
.mobile-navigation-container {
 visibility: visible;
 }
 }
 
 @media only screen and (min-width: 501px) {
.mobile-logo {
 visibility: hidden;
 }
 }

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="./stylesheet.css">
</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>

<div class="mobile-header">
<div class="mobile-header-container">
<div class="mobile-logo-container">
<img class="mobile-logo" src="/logo.png" alt="Logo">
</div>
<div class="mobile-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>

<div class="headerfill">
</div>

这看起来不错，适合桌面使用。我只需要它们在移动元素时以某种方式做出响应即可。

Example of how the final navigation would look 图标不必切换，我知道可以根据需要使用事件侦听器来完成。只是不确定如何在移动设备上以不同的方式设置原始元素的格式，而无需创建两个单独的标题。

希望图像能很好地说明我的目标。第一次，我尝试尝试这种下拉导航，所以在此先感谢：）

UPDATE


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.1.css">
</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>

希望这会有所帮助。我需要找到一种方法，将该设计（使用我已有的代码）与@Nyan的答案相结合。我删除了媒体查询以及单独的移动和桌面标题。无法解决这个问题。

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>

它会像那样运行，但要保留最初的设计。 （上图）

1 个答案:

答案 0 :(得分：-1)

您可以创建仅在大屏幕上隐藏而在小屏幕上可见的按钮，并在其上监听单击事件。或者，如果您根本不想创建新元素，则可以使用::after和::before并聆听它们。

例如，侦听器可以在列表上切换类active。

列表本身可以绝对定位在标题的底部，并且在没有active类时可以隐藏。

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="">one</a>
    <a href="">two</a>
    <a href="">three</a>
    <a href="">four</a>
  </nav>
</header>

其中哪个步骤会引起您更多问题？

相关问题
最新问题