0
私は実際にはモバイルビューでメニューを作成しました。簡単にするために、私はcodepenに入れます：https://codepen.io/ipg1421/pen/OxRJRBモバイルビューで親子接続を切断するには
メニューは単純なドロップダウンです。モバイルビューに変更する場合、子アイテムは表示されますが、ホバー - >カーソルが親に切り替わった場合は表示されます。さらに、最後のメニュー項目（Last）は上に上がり、子項目の下に隠れます。 親アイテムに縛られずに他のメニューアイテムとして子アイテムを作成することに興味があります。
<DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<nav style="float: right; display: inline-block;">
<div class="nav-handle-container">
<div class="nav-handle"></div>
</div>
<ul id="nav">
<li><a href="#">Main</a></li>
<li class="sub"><a href="#">Parent</a>
<ul>
<li><a href="#">Child</a></li>
</ul>
</li>
<li><a href="#">Last</a></li>
</ul>
</nav>
</div>
<script>
$('.nav-handle-container').on('click', function() {
$('#nav').toggleClass('showing');
});
</script>
</body>
</html>
CSS
.list ul {
list-style: none;
}
.list li:before {
content: '\f096';
font-family: 'FontAwesome';
float: left;
margin-left: -1.5em;
color: #1c3ba5;
}
nav {
padding-top: 25px;
padding-right: 20px;
}
nav .nav-handle-container {
box-sizing: border-box;
width: 100%;
padding: 30px;
min-height: 150px;
background: white; /* mobile container back color */
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: none;
}
nav .nav-handle-container .nav-handle {
height: 3px;
width: 30px;
background: #ff0000;
position: absolute;
display: block;
/*left: -webkit-calc(100% - 50px);*/
left: calc(100% - 50px);
top: 55px;
}
nav .nav-handle-container .nav-handle:before, nav .nav-handle-container .nav-handle:after {
content: "";
height: 3px;
width: 30px;
background: #ff0000;
position: absolute;
display: block;
}
nav .nav-handle-container .nav-handle:before {
top: -10px;
}
nav .nav-handle-container .nav-handle:after {
bottom: -10px;
}
nav ul {
font-size: 13pt;
list-style: none;
background-color: white;
overflow: hidden;
color: black; /* color menu font */
margin: 0;
padding: 0;
text-align: center;
-webkit-transition: max-height 0.4s ease-in-out;
transition: max-height 0.4s ease-in-out;
}
nav ul li {
display: inline-block;
border-radius: 5px;
}
nav ul li a {
text-decoration: none;
color: inherit;
display:block; /* a tag full click in menu */
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
nav ul li:hover {
color: white; /* color menu active font */
background: #ff0000;
}
nav ul li.sub {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
nav ul li.sub ul {
display: none;
width: 300px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ff0000;
border-bottom: 5px solid #ff0000;
}
nav ul li.sub:hover ul {
display: block;
position: absolute;
}
nav ul li.sub ul li {
display: block;
border-radius: 0px;
}
nav ul li.sub ul li:hover {
background: black;
}
@media screen and (max-width: 760px)
{
nav {
padding-top: 0px;
padding-right: 0px;
width: 100%;
}
nav .showing {
max-height: 30.5em;
border-bottom: solid #ff0000 3px;
}
nav ul {
max-height: 0px;
}
nav ul li {
box-sizing: border-box;
width: 100%;
text-align: right;
font-size: 1.0em;
border-radius: 0px;
}
nav ul li a {
padding-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
nav .nav-handle-container {
display: table-row;
}
nav ul li.sub {
border-radius: 0px;
position: relative;
}
nav ul li.sub ul {
display: block;
position: static;
max-height: none;
width: 100%;
border: 0px;
}
}
本当に感謝誰かが
まず感謝モバイルビューに
使用を絶対にたくさん。それは働いていて、私は本当にこのことにこだわっていたので、あなたは多くの時間を節約しました。私は、提供された答えの下で問題が解決されることを指摘することができます。私は子供のホバーの下で親のホバーを削除する追加のものがありますが、私は今私は追加のヘルプが必要ないと思います – Igor