创建响应式网页标题的笨拙方式？

【问题标题】：Less clunky way of creating a responsive web header?创建响应式网页标题的笨拙方式？
【发布时间】：2018-08-11 17:29:24
【问题描述】：

我目前有一个可以在桌面上正常运行的网站标题。我最初计划堆叠内容，以便页面随后显示在徽标下。我已经看到用于下拉菜单的汉堡菜单，这是我最终想要实现的，保留左侧的徽标。

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

所以目前我有这个：

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>

这看起来不错，适合桌面使用。我只需要他们在移动设备上调整元素时以某种方式做出响应。

图标不必切换，我知道如果需要可以使用事件侦听器来完成。只是不确定如何在不创建两个单独的标题的情况下在移动设备上以不同的方式设置原始元素的格式。

希望这张图片能很好地说明我的目标。我第一次尝试这种下拉导航，所以提前感谢:)

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>

它会以这种结构运行，但保留最初的设计。 （上图）

【问题讨论】：

标签： javascript jquery html css navigation


【解决方案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>

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

【讨论】：

  • 老实说，@Nyan。我不完全明白你的意思。我可以使用它，但我决定让桌面布局保持不变，而在移动设备上使用相同的导航文本而不是有两个副本并根据设备大小隐藏。
  • 我的意思是你可以通过媒体查询在移动设备上隐藏你当前的navigation-container元素，并且只有当它有active类时才显示它，比如.navigation-container {display: none}.navigation-container.active {display: block}
  • 我明白这一点。我只是不知道当菜单元素相同时，这将如何帮助创建下拉菜单。
  • 我想我应该通过代码示例来展示它jsfiddle.net/duo2mgkc/8
  • 请在答案中添加相关代码或发表评论。这不会回答 OP
猜你喜欢
  • 2014-09-16
  • 2016-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-05
  • 2014-11-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode