打开下拉菜单on单击侧边栏 [英] Open drop-down menu onClick in sidebar
本文介绍了打开下拉菜单on单击侧边栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在一个项目上,我已经创建了一个导航栏.在此下拉菜单中也存在.在此下拉菜单中,有悬停效果.
I am working on a project and I have created one navbar. In this dropdown menu also present. In this dropdown, the hover effect is there.
现在,我正在尝试点击事件并打开和关闭下拉菜单的子菜单.但是没有用.我仅使用 HTML和CSS .
Now I am trying to click event and open and close dropdown's submenu. But not working. I am using only HTML and CSS.
现在悬停下拉菜单已打开.但我正在尝试:
Now on hover dropdown is open. But I am trying to do:
当我点击时打开和关闭 下拉菜单.
我的代码是:
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ddd;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #993;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Products</a>
<ul class="submenu">
<li><a href="">Tops</a></li>
<li><a href="">Bottoms</a></li>
<li><a href="">Footwear</a></li>
</ul>
</li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
推荐答案
You can use a checkbox (<input type="checkbox">
) with the adjacent sibling combinator (+) to toggle the sub menu. Convert the link (a
) to a label. Set the label's for
attribute to the input's id
, and hide the input using display: none
.
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a,
.mainmenu label {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu input {
display: none;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu :checked+.submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ddd;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #993;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><label for="products">Products</label><input type="checkbox" id="products">
<ul class="submenu">
<li><a href="">Tops</a></li>
<li><a href="">Bottoms</a></li>
<li><a href="">Footwear</a></li>
</ul>
</li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
这篇关于打开下拉菜单on单击侧边栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文