我有一个效果很好的导航菜单栏。
我想让它具有响应能力，并且能够通过javascript和css调整我的代码，以便在屏幕大小低于680px阈值时使用显示的列表图标。当我在移动设备上查看菜单时，代码似乎存在一些问题，以及在较小的屏幕上查看格式化问题。
1：列表图标将隐藏在菜单后面，该菜单在移动设备上显示为垂直。很难点击，但你可以点击它以将菜单缩减回列表图标。
2：菜单有几个下拉菜单，子菜单（如上图所示）相互叠加，使得难以点击。这也会导致移动设备“重新加载并聚焦到页面顶部，但子菜单已打开。”
3：子菜单，如果文字太长，会从页面的视觉流出，使得有时难以阅读整个链接。
我想要做的是将菜单格式化为在响应时更具上下文吸引力。屏幕缩小或在较小的屏幕/移动设备上查看时的含义，菜单会更改格式。列表图标下拉主导航链接，然后每个子链接都会删除整个导航，如下图所示 Example of Responsive Navigation Menu
我创建了一个jsfiddle来帮助理解代码。 https://jsfiddle.net/rm2rL373/
<div class="container">
<nav>
<ul id="myNavi" class="navi" style="font-size:16px; padding-top:5px;">
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
<li><a href="#">Nav1</a>
<ul>
<li><a href="#">SubNav1</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="#" >SubNav2</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="#">SubNav3</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="#">SubNav4</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
<li><a href="link.html" target="_blank">SubNavLink3</a></li>
</ul>
</li>
<li><a href="#">Nav2</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
<li><a href="#" class="MenuBarItemSubmenu">SubNav1</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
</ul>
</li>
<li><a href="link.html" target="_blank">SubNavLink3</a></li>
</ul>
</li>
<li><a href="#">Nav3</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
</ul>
</li>
<li><a href="#">Nav4</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
<li><a href="link.html" target="_blank">SubNavLink3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
ul {
list-style-type: none;
}
nav {
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
}
.navi a {
display:block;
background: #ededed;
color: #111;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #E3E3E3;
position: relative;
}
.navi{
vertical-align: top;
display: inline-block;
box-shadow:
1px -1px -1px 1px #000,
-1px 1px -1px 1px #fff,
0 0 6px 3px #fff;
border-radius:6px;
}
.navi li {
position: relative;
}
.navi > li {
float: left;
border-bottom: 4px #E3E3E3 solid;
margin-right: 1px;
}
.navi > li > a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #E5E5E5;
}
.navi > li:hover,
.navi > li:hover > a {
border-bottom-color: blue;
}
.navi li:hover > a {
color:blue;
background-color: #E5E5E5;
}
.navi > li:first-child {
border-radius: 4px 0 0 4px;
}
.navi > li:first-child > a {
border-radius: 4px 0 0 0;
}
.navi > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.navi > li:last-child > a {
border-radius: 0 4px 0 0;
}
.navi li li a {
margin-top: 1px;
}
.navi li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}
/*Submenu Position*/
.navi ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
}
.navi > li:hover > ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.navi > li li:hover > ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/*Arrow Styling*/
.navi > li > a:first-child:nth-last-child(2):before {
border-top-color: #575757;
}
.navi > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: blue;
margin-top:-5px
}
.navi li li > a:first-child:nth-last-child(2):before {
border-left-color: #575757;
margin-top: -5px
}
.navi li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: blue;
right: 10px;
}
ul.navi li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the nav (li.icon) */
@media screen and (max-width:680px) {
ul.navi li:not(:first-child) {display: none;}
ul.navi li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the nav with JavaScript when the user clicks on the icon. This class makes the nav look good on small screens */
@media screen and (max-width:680px) {
ul.navi.responsive {position: relative;}
ul.navi.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.navi.responsive li {
float: none;
display: inline;
}
ul.navi.responsive li a {
display: block;
text-align: left;
}
}
function myFunction() {
var x = document.getElementById("myNavi");
if (x.className === "navi") {
x.className += " responsive";
} else {
x.className = "navi";
}
}