制作响应式导航栏

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 for creating a responsive navbar。您可以在几分钟内完成它。