Html 两个导航级别，用于响应性设计？

我已经学习了一个月的网页设计基础知识，我一直在尝试为一个虚构的网站创建一个语义正确的响应标题。我今天写的代码创造了我想要的外观，但问题是我不确定代码是否真的很好，我是否走在正确的道路上

//侧导航切换//
函数togNav（）{
“严格使用”；
var side=document.getElementById（“sidenav”），
main=document.getElementById（“容器”）；
如果（side.style.transform==“translateX（0%）”）{
side.style.transform=“translateX（-100%）”；
main.style.transform=“translateX（0%）”；
}否则{
side.style.transform=“translateX（0%）”；
main.style.transform=“translateX（40%）”；
}
}

/*侧面导航*/
#侧导航{
/*造型*/
宽度：40%；
身高：100%；
背景：#fff；
盒影：0.01雷姆rgba（0,0,0,0.3）；
/*定位*/
排名：0；
z指数：2；
位置：固定；
/*用户体验*/
过渡：0.3s；
转化：translateX（-100%）；
}
#侧导航a{
填充：3rem；
显示：块；
}
#侧导航a：悬停{
颜色：#8cc63e；
转换：0s；
}
/* /////////////////////////////////////////////////// */
/*//页眉*/
/* /////////////////////////////////////////////////// */
/*标题-容器*/
标题{
/*造型*/
高度：50雷姆；
背景：浅蓝色；
}
/*标题-小型导航*/
标题>导航小{
/*造型*/
背景：#fff；
盒影：0.01雷姆rgba（0,0,0,0.3）；
}
标题>导航.small>.wrapper{
/*造型*/
高度：8雷姆；
填充：0 3rem；
/*柔性箱*/
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
标题>导航小汉堡{
光标：指针；
过渡：0.3s；
}
标题>导航小汉堡酒吧{
/*风格*/
宽度：2.25雷姆；
高度：0.3rem；
背景：#000；
保证金上限：0.4雷姆；
}
/*标题-大型导航*/
标题>导航大{
/*造型*/
背景：#fff；
盒影：0.01雷姆rgba（0,0,0,0.3）；
}
标题>导航.large>.wrapper{
/*造型*/
高度：8雷姆；
保证金：自动；
填充：0 3rem；
最大宽度：96rem；
/*柔性箱*/
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
标题>导航大ul li{
显示：内联块；
}
标题>导航大型ul li a{
左侧填充：4.5雷姆；
}
标题>导航大ul li a：悬停{
颜色：#8cc63e；
}
/*标题-媒体查询*/
@仅介质屏幕和（最小宽度：600px）{
标题>导航小{
显示：无；
}
}
@仅介质屏幕和（最大宽度：600px）{
标题>导航大{
显示：无；
}
}
/*一般造型*/
html{
字体大小：62.5%；
}
身体，
a{
保证金：0；
颜色：#333；
字体大小：1.6rem；
字体系列：“源Sans-Pro”；
文字装饰：无；
}
#容器{
过渡：0.3s；
}

您的菜单可能会感觉不对劲，但按照常规的编码标准，它是相当不错的

你的问题可能感觉是对的，但它鼓励了固执己见的回答，因此是错误的（离题）

（固执己见且有争议——你问题的实际答案）：“我想说不是”。我个人会投入必要的努力，使这两种情况下只有一个菜单，并使用

@media

查询以不同的方式设置它的样式。但这更多的是偏好和自我强加的标准，而不是明确的对错（我之所以这么做，是因为我能，因为我喜欢一个体面的挑战，以枯燥的原则为名；认为您的解决方案更容易适应/调整到各种未来的更改请求，并且可能更容易被其他开发人员理解的论点是非常有效的——最后，这是一个技术性问题，它占用了开发时间，这是t应用程序性能或代码可维护性的微小提高）

与语义标记无关（这似乎是您问题的主要主题）而且，因为您询问了关于您的代码的任何建议：在您的代码中，我真正不同意的一件事是侧边栏的

40%

宽度规则。从可用性的角度来看，这是没有意义的。在狭窄的设备上打开菜单，您不希望能够阅读页面内容，因此没有意义se将菜单削弱为窄条。给它一个合理的宽度（至少

250px

，最多

100vw

）

函数togNav（）{
document.querySelector（“header”）.classList.toggle（“opened”）；
}

#汉堡{
位置：绝对位置；
左：计算（100%+12px）；
顶部：32px；
宽度：45px；
高度：32px；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
过渡：左0.3s三次贝塞尔（0.4,0,0.2,1）；
光标：指针；
填充：12px；
}
#汉堡>分区{
宽度：45px；
高度：6px；
背景：#000；
}
标题{
背景：#fff；
盒影：0 3px 5px-1px rgba（0,0,0,0.1），0 6px 10px 0 rgba（0,0,0,0.07），0 1px 18px 0 rgba（0,0,0,0.06）；
高度：8雷姆；
填充：0 3rem；
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
#菜单{
显示器：flex；
背景色：#fff；
填充：0；
保证金：0；
}
#菜单里{
显示：块；
边框：0实心#eee；
右边框宽度：1px；
}
#菜单李：最后一个孩子{
右边框宽度：0；
}
#菜单a{
显示：块；
填充：1rem；
颜色：黑色；
文字装饰：无；
}
#菜单a：悬停{
颜色：#8cc63e；
}
身体{
保证金：0；
溢出：隐藏；
背景颜色：浅蓝色；
}
导航{
排名：0；
左：0；
背景色：白色；
}
@介质（最大宽度：600px）{
导航{
身高：100%；
位置：固定；
宽度：250px；
最大宽度：计算（100vw-100px）；
转换：翻译