我希望能够运行与子菜单出现在右侧/边界的导航(Z-索引,以便不推的主要内容的方式)的页面左侧导航。有没有人有一个网站/代码链接(codepen)或代码片段可以帮助?我正在寻找一个onclick而不是一个悬停事件的子菜单出现...第一个子菜单级别只使用.dropdown:hover .dropdown-content,而不是任何jquery,如果它需要jscript或jquery,也不会受到困扰。谢谢
<style>
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px;}
.quotation-window {display: flex; height: 100%}
.window-container {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;}
.header-one {display: flex; width: 100%; background-color: #dbdbdb; padding: 20px 10px;}
.header-two {display: flex; width: 100%; background-color: #afafaf; padding: 20px 10px;}
.content-container {display: flex; width: 100%; height: 100%}
.content-left {
display: flex;
background-color: #3f51b5;
color: #fff;
padding: 0;
flex-direction: row;
flex-wrap: wrap;
min-width: 80px;
align-content: flex-start;
height: 100%;
width: 9vw;
}
.content-right {display: flex; background-color: #6d6d6d; padding: 20px 10px; width: 95%;}
ul {
list-style-type: none;
background-color: #3f51b5;
color: #fff;
}
ul li ul.submenu {display: none;}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
.dropdown-content li a {
display: flex;
color: #000000;
padding: 8px 0;
text-decoration: none;
}
li a:active {background-color: #3f51b5; color: white;}
/*li a:hover:not(.active) {background-color: #ffcc01; color: black;}*/
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown li {height: 4vh; color: #000;}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 999;
left: 8.5vw;
top: 0;
height: 100vh;
flex-direction: row;
flex-wrap: wrap;
}
.dropdown-submenu {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content-submenu {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
padding: 12px 16px;
z-index: 999;
left: 11.1vw;
top: 0;
height: 100vh;
flex-direction: row;
flex-wrap: wrap;
}
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.dropdown-submenu:hover .dropdown-content-submenu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
@media screen and (max-width: 900px) and (min-width: 340px) {
.quotation-window {display: flex; height: 100%}
.content-container {
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.content-left {
height: fit-content;
padding: 0;
width: 100%;
}
.content-right {
padding: 20px 0;
width: 100%;
height: 100%;
}
ul {display: inline-flex;}
.dropdown {display: inline-flex;}
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 80%;
}
}
</style>
<section class="quotation-window">
<div class="window-container">
<div class="header-one">header 1</div>
<div class="header-two">header 2</div>
<div class="content-container">
<div class="content-left">
<ul class="dropdown">
<li><a href="#home" class="dropdown">New</a>
<ul class="dropdown-content">
<li><a href="#" class="dropdown-submenu">submenu navigation 1</a>
<ul class="dropdown-content-submenu">
<li>submenu navigation 1.1</li>
<li>submenu navigation 1.2</li>
<li>submenu navigation 1.3</li>
<li>submenu navigation 1.4</li>
<li>submenu navigation 1.5</li>
</ul>
</li>
<li>submenu navigation 2</li>
<li>submenu navigation 3</li>
<li>submenu navigation 4</li>
<li>submenu navigation 5</li>
</ul>
</li>
<li><a href="#news">Existing</a></li>
<li><a href="#contact">Inventory</a></li>
</ul>
</div>
<div class="content-right">right column content</div>
</div>
</div>
</section>
2条答案
按热度按时间gfttwv5a1#
试试这个
6g8kf2rb2#
找到了我需要的代码。如果有人有兴趣在这里寻找垂直leftnav https://jsfiddle.net/alvaromenendez/9m60mx6r/7/