制作响应式导航栏

Question

我在将导航栏转换为响应导航时遇到了一些问题。我的切换和导航定位工作不太好。下面是该网站的示例。我不太确定缺失的部分是什么？

<script type="text/javascript">
			function myFunction() {
		    var x = document.getElementById("myTopnav");
		    if (x.className === "gnav") {
		        x.className += " responsive";
		    } else {
		        x.className = "gnav";
		    }
		}

		</script>

#header .gnav {
	position: relative;
	left: 0;
	bottom: 0;
	z-index: 1000;
	width: 587px;
	height: 75px;
	overflow: hidden; /**/
}
.gnav a {
float: left;
display: block;
}
.gnav .icon {
display: none;
}
#header .gnav h1 {
	float: left;
}
#header .gnav ul {
	float: left;
	width: 351px;
}
#header .gnav li {
	float: left;
}
#ul_menu{
	/*
position:relative;
width:400px;
list-style:none;
text-align:center;
top:100px;
	*/
}
#ul_menu li{
	/*
width:200px;
float:left;
	*/
position:relative;
}
#ul_menu li a{
	/*
width:198px;
background:#EE0088;
float:none;
height:30px;
display:block;
border:1px solid #FCF;
color:#FFF;
	*/
}
#header .gnav li .sub_list {
	position: absolute;
	bottom: 28px;
left: 0;
	width: 140px;
	padding: 10px 0 0 0;
	background: #1e2d68;
}
#header .gnav li .sub_list li {
	float: none;
	padding: 0 5px 10px 20px;
	background: #1e2d68;
	color: #fff;
	font-size: 11px
}
#header .gnav li .sub_list li a {
	color: #fff;
}
#header .gnav li .sub_list.sub01 {
	width: 100px;
}
@media screen and (max-width: 600px) {
.gnav a:not(:first-child) {display: none;}
.gnav .icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.gnav.responsive {position: relative;}
.gnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.gnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

<div class="gnav clearfix" id="myTopnav">
					<h1><a href="index.html"><img src="images/index/logo.gif" width="236" height="75" alt="株式会社ジェイウィル J-WILL CORPORATION"></a></h1>
					<ul id="ul_menu" class="clearfix">
						<li><a href="index.html"><img src="images/common/gnav01.gif" width="111" height="38" alt="HOME"></a></li>
						<li>
							<a href="company/index.html"><img src="images/common/gnav02.gif" width="100" height="38" alt="企業情報"></a>
							<ul class="sub_list sub01">
								<li><a href="company/index.html">代表ご挨拶</a></li>
								<li><a href="company/index.html#sc02">行動指針</a></li>
								<li><a href="company/index.html#sc03">企業概要</a></li>
							</ul>
						</li>
						<li>
							<a href="business/index.html"><img src="images/common/gnav03.gif" width="140" height="38" alt="事業内容"></a>
							<ul class="sub_list sub02">
								<li><a href="business/index.html">ジェイウィルの強み</a></li>
								<li><a href="business/index.html#sc03">販売実績</a></li>
								<li><a href="business/index.html#sc06">マンション一棟<br>仲介実績</a></li>
								<li><a href="business/index.html#sc02">マンション用地<br>仲介実績</a></li>
								<li><a href="business/index.html#sc05">戸建用地仲介実績</a></li>
								<li><a href="business/index.html#sc01">事業概要</a></li>
							</ul>
						</li>
						<li><a href="staff/index.html"><img src="images/common/gnav04.gif" width="111" height="37" alt="社員紹介"></a></li>
						<li><a href="careers/index.html"><img src="images/common/gnav05.gif" width="100" height="37" alt="採用情報"></a></li>
						<li><a href="contact/"><img src="images/common/gnav06.gif" width="140" height="37" alt="お問い合わせ"></a></li>
						<li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
					</ul>
				</div>

图标没有切换，我使屏幕更小的导航栏没有消失。问题是媒体还是主css的问题？如果有人能解决问题，我真的很感激！谢谢你帮我！

Answer 1

我建议使用Bootstrap 4来创建响应导航栏。你可以在几分钟内完成。