[英]How could I make a menu dropdown on click
how could I make my menu drop down when i click on it instead of hover? 单击菜单而不是将鼠标悬停时如何使菜单下拉? I want to be able to click on .logo and have the ul dropdown.
我希望能够单击.logo并具有ul下拉列表。 and to also hide the menu when i click on it again.
并在我再次单击菜单时隐藏菜单。 The div inside .logo is just a triangle pointing down.
.logo内的div只是一个向下的三角形。
html code: html代码:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code: CSS代码:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}
You can use simply toggle()
to view the dropdown :) 您可以简单地使用
toggle()
查看下拉菜单:)
I want to be able to click on .logo and have the ul dropdown
我希望能够单击.logo并具有ul下拉列表
Use this : 用这个 :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. 这样,它将在隐藏时显示它,并在可见时隐藏它。 You can also set some speed if you want, inside the parathesis as
toggle(time in milliseconds)
. 您也可以根据需要在异形内部将某些速度设置为
toggle(time in milliseconds)
。
And please change the second ul to <ul class="second">
as the code might misunderstand your approach and hide both of the lists in the #logodropdown. 并将第二个ul更改为
<ul class="second">
因为代码可能会误解您的方法,并在#logodropdown中隐藏两个列表。 This would be a good approach to what you want to happen! 这将是您要发生的事情的好方法! Or even use a class to differentiate between both the lists.
甚至使用类来区分两个列表。
You can use CSS to do some stuff like :active
or :focus
. 您可以使用CSS来完成诸如
:active
或:focus
。 But they won't cause a change in the properties of other elements. 但是它们不会导致其他元素的属性发生变化。 That's where you need a help of jQuery.
那是您需要jQuery帮助的地方。 :)
:)
对于单击,您将需要使用Javascript,因为CSS中没有单击事件处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.