javascript - 使用 topnav 和事件侦听器调整桌面显示以实现响应式站点导航
问题描述
解决方案
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/
这对你有用。我为移动设备添加了新样式并更新了布局。试试我的代码。谢谢。
推荐阅读
- java - “失去”依赖为什么用 maven 构建 jar
- pandas - pandas 中 mode() 的含义
- ios - SwiftUI 中文本的位置在其文本更新时不断变化
- javascript - 抹茶测试/如何获取每秒的操作统计信息
- php - 如何使用for循环php将多个结果保存在数组中
- kubernetes - Jenkinsx Nexus pod 进入“CrashLoopBackOff”状态,“使用默认密码和提供的密码机密文件登录到 nexus 失败”
- angular - 角度改变状态而不是附加
- javascript - 为同一个 CSS 动画的多个实例制作动画
- python - 如何以与名称属性相同的方式打印组合标志
- python - Python中函数调用行为之间的变量访问