我已经学习了一个月的网页设计基础,并尝试为虚构网站创建一个语义正确的响应式标题。今天我编写的代码实现了我想要的外观,但问题是我不确定这段代码是否真正好用,以及我是否走在正确的道路上。
// Sidenav Toggle //
function togNav() {
"use strict";
var side = document.getElementById("sidenav"),
main = document.getElementById("container");
if (side.style.transform === "translateX(0%)") {
side.style.transform = "translateX(-100%)";
main.style.transform = "translateX(0%)";
} else {
side.style.transform = "translateX(0%)";
main.style.transform = "translateX(40%)";
}
}
/* Side Navigation */
#sidenav {
/* Styling */
width: 40%;
height: 100%;
background: #fff;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
/* Positioning */
top: 0;
z-index: 2;
position: fixed;
/* UX */
transition: 0.3s;
transform: translateX(-100%);
}
#sidenav a {
padding: 3rem;
display: block;
}
#sidenav a:hover {
color: #8cc63e;
transition: 0s;
}
/* /////////////////////////////////////////////////// */
/* ////////////////////// HEADER ///////////////////// */
/* /////////////////////////////////////////////////// */
/* Header - Container */
header {
/* Styling */
height: 50rem;
background: lightblue;
}
/* Header - Small Navigation */
header>nav.small {
/* Styling */
background: #fff;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
header>nav.small>.wrapper {
/* Styling */
height: 8rem;
padding: 0 3rem;
/* Flexbox */
display: flex;
align-items: center;
justify-content: space-between;
}
header>nav.small #burger {
cursor: pointer;
transition: 0.3s;
}
header>nav.small #burger .bar {
/* Style */
width: 2.25rem;
height: 0.3rem;
background: #000;
margin-top: 0.4rem;
}
/* Header - Large Navigation */
header>nav.large {
/* Styling */
background: #fff;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
header>nav.large>.wrapper {
/* Styling */
height: 8rem;
margin: auto;
padding: 0 3rem;
max-width: 96rem;
/* Flexbox */
display: flex;
align-items: center;
justify-content: space-between;
}
header>nav.large ul li {
display: inline-block;
}
header>nav.large ul li a {
padding-left: 4.5rem;
}
header>nav.large ul li a:hover {
color: #8cc63e;
}
/* Header - Media Queries */
@media only screen and (min-width: 600px) {
header>nav.small {
display: none;
}
}
@media only screen and (max-width: 600px) {
header>nav.large {
display: none;
}
}
/* General Styling */
html {
font-size: 62.5%;
}
body,
a {
margin: 0;
color: #333;
font-size: 1.6rem;
font-family: "Source Sans Pro";
text-decoration: none;
}
#container {
transition: 0.3s;
}
<!-- Off Canvas -->
<div id="sidenav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<!-- On Canvas -->
<div id="container">
<header>
<nav class="small">
<div class="wrapper">
<div id="burger" onclick="togNav()">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
<a href="#" class="logo">
Logo
</a>
</div>
</nav>
<nav class="large">
<div class="wrapper">
<a href="#" class="logo">
Logo
</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
问题是:在一个介绍性标题类中使用两个导航类是否语义正确?或者是否有更好的方法以更少的代码获得我试图获取的结果?这感觉太不对了。
希望我的问题不是太模糊。谷歌和StackOverflow上的其他问题并没有真正帮助我找到解决方案,所以我希望你们能。另外,如果您看到任何奇怪或糟糕的代码,请告诉我!我很新手,我真的想变得更好。 在CodePen上查看