javascript - 制作响应式导航栏
问题描述
我在将导航栏转换为响应式导航时遇到了一些麻烦。我的切换和导航定位不太好。该网站的示例如下。我不太确定缺少的部分是什么?
<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有关?如果有人能解决问题,我真的很感激!谢谢你的协助!
解决方案
我建议使用Bootstrap 4 来创建响应式导航栏。您可以在几分钟内完成。
推荐阅读
- python - 如何使用 Python 的 argparse 模块实现以下功能?:scale_data.py [-h] (-t | -r [Number of Days Back]| -i [Start Date])
- python - 使用 self.__setattr__() 时如何不搞乱 self.__dict__ 生成
- python - Pandas DataFrame 重塑(很多行变成很长的列)
- memory - 如何判断哪些对 malloc 的调用失败?
- c++ - ADO 连接到 MariaDB
- javascript - 为什么我的异步函数总是返回未定义?
- snakemake - 访问 Snakefile 中的 --default-remote-prefix
- flutter - 根据 Flutter 中的 Provider 值变化在屏幕之间导航
- python - 诗歌根据附加内容安装不同的软件包版本
- postgresql - 在 go-pg ORM 中将 Postgresql 列定义为串行