html – 响应式设计的两个导航类？

概述我已经研究了一个月的网页设计基础知识,我一直在努力为一个虚构的网站创建一个语义正确的响应标题.我今天写的代码创建了我的目标,但问题是我不确定代码是否真的很好,如果我在正确的道路上. // Sidenav Toggle //function togNav() { "use strict"; var side = document.getElementById("sidenav"), 我已经研究了一个月的网页设计基础知识,我一直在努力为一个虚构的网站创建一个语义正确的响应标题.我今天写的代码创建了我的目标,但问题是我不确定代码是否真的很好,如果我在正确的道路上.

// 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.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.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.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 >      <div >        <div ID="burger" onclick="togNav()">          <div ></div>          <div ></div>          <div ></div>        </div>        <a href="#" >                        logo                    </a>      </div>    </nav>    <nav >      <div >        <a href="#" >                        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>

View on CodePen

正如您所看到的,我使用了两个导航类来创建一个用于大屏幕的内联导航栏和一个带有用于较小屏幕的画布侧导航的顶部栏.我使用FlexBox来对齐项目和JavaScript以显示侧面导航.

题
我的问题是：在一个入门头类中使用两个导航类在语义上是否正确？或者,我猜是否有更好的方法来获得我想用更少的代码获得的结果？感觉很糟糕.

希望我的问题不是太模糊.谷歌和StackOverflow上的其他问题并没有真正帮助我找到解决方案,所以我希望你们能做到.此外,如果您看到我的其余代码有任何奇怪或不好,请告诉我！我对此非常陌生,我真的想要在这方面做得更好.

解决方法 >您的菜单可能会出错,但通过常规编码标准可以很好
>你的问题可能是正确的,但它鼓励自以为是的答案,因此是错误的(偏离主题).
>(自以为是和有争议的 – 你问题的实际答案)：“我会说这不是”.我个人会尽一切努力为这两种情况只设置一个菜单,并使用@media查询以不同方式设置它.但这更多的是偏好和自我强加的标准,而不是明确的对错(我会这样做,因为我可以,因为我喜欢一个体面的挑战,并以DRY原则的名义;争论你的解决方案更容易适应/调整各种未来的变更请求,并且可能更容易被其他开发人员理解是非常有效的 – 最终,这是一个技术性,它占用了开发时间,这是由于应用程序性能或代码可维护性的微小增加而不合理的) .

与语义标记无关(这似乎是你问题的主要话题),因为你已经要求对你的代码提出任何建议：我在代码中真正不同意的一件事是侧边栏的40％宽度规则.在狭窄的设备上,从可用性的角度来看没有任何意义.在狭窄的设备上打开菜单,您不希望能够读取页面内容,将菜单缩小到窄条纹是没有意义的.给它一个合理的宽度(至少250px,最多100vw).

function togNav() {  document.querySelector("header").classList.toggle('opened');}

#burger {  position: absolute;  left: calc(100% + 12px);  top: 32px;  wIDth: 45px;  height: 32px;  display: flex;  flex-direction: column;  justify-content: space-between;  Transition: left 0.3s cubic-bezIEr(0.4,0.2,1);  cursor: pointer;  padding: 12px;}#burger>div {  wIDth: 45px;  height: 6px;  background: #000;}header {  background: #fff;  Box-shadow: 0 3px 5px -1px rgba(0,0.1),0 6px 10px 0 rgba(0,0.07),0 1px 18px 0 rgba(0,0.06);  height: 8rem;  padding: 0 3rem;  Box-sizing: border-Box;  display: flex;  align-items: center;  justify-content: space-between;}#menu {  display: flex;  background-color: #fff;  padding: 0;  margin: 0;}#menu li {  display: block;  border: 0 solID #eee;  border-right-wIDth: 1px;}#menu li:last-child {  border-right-wIDth: 0;}#menu a {  display: block;  padding: 1rem;  color: black;  text-decoration: none;}#menu a:hover {  color: #8cc63e;}body {  margin: 0;  overflow: hIDden;  background-color: lightblue;}nav {  top: 0;  left: 0;  background-color: white;}@media (max-wIDth: 600px) {  nav {    height: 100%;    position: fixed;    wIDth: 250px;    max-wIDth: calc(100vw - 100px);    transform: translateX(-100%);    Transition: transform 0.3s cubic-bezIEr(0.4,1),Box-shadow 0.3s linear;  }  .logo {    transform: translateX(0);    Transition: transform 0.3s cubic-bezIEr(0.4,1);  }  .opened .logo {    transform: translateX(65vw);  }  header {    flex-direction: column;    align-items: flex-end;    justify-content: center;    Transition: Box-shadow .3s linear;  }  header.opened {    Box-shadow: none;  }  header.opened nav {    transform: translateX(0);    Box-shadow: 0 3px 5px -1px rgba(0,0.2),0.14),0.12);  }  #menu {    flex-direction: column;    padding: 0;    margin: 0;  }  #menu li {    border-bottom: 1px solID #eee;  }}

<header>  <a href >logo</a>  <nav>    <div ID="burger" onclick="togNav()">      <div></div>      <div></div>      <div></div>    </div>    <ul ID="menu">      <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>  </nav></header>

你应该注意什么：

>更简单的标记
>更简单的JavaScript

如果你需要SCSS,那就是here.

注意：我的答案不是一系列评论的唯一原因是因为我很懒,并认为我花费更少的时间在一个单一的文本中表达我的想法,而不是在一系列由评论长度字符限制限制的评论中,这只能在5分钟内编辑,并且会让我的想法更难以曝光和遵循.但是,原则上,考虑到上述第2点,不应该在SO上询问/回答您的(和类似的)问题.需要明确的是：对于回答一个可以说是偏离主题的问题,我的回答可以说是按照我自己的标准进行投票.

总结

以上是内存溢出为你收集整理的html – 响应式设计的两个导航类？全部内容，希望文章能够帮你解决html – 响应式设计的两个导航类？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。