我正在创建一个具有下拉菜单on-click
(而不是hover
)的下拉菜单。我找到了这个很棒的脚本,但我似乎无法让链接水平排列。不知道是定位还是其他原因。我尝试添加浮动和内联样式,但都没有奏效。
CSS
.click-nav
{
width:150px;
border-top: 5px solid #333;
border-bottom: 5px solid #333;
position: relative;
z-index: 9999;
}
.click-nav ul
{
position:relative;
font-weight:900;
}
.click-nav ul li
{
position:relative;
list-style:none;
cursor:pointer;
}
.click-nav ul li ul
{
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker
{
position:relative;
background:#FFF;
color:#333;
text-transform:uppercase;
}
.click-nav ul .clicker:hover,.click-nav ul .active
{
background:#333;
color: #FFF;
}
.click-nav img
{
position:absolute;top:9px;left:12px;
}
.click-nav ul li a
{
transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;
display:block;
padding:8px 10px 8px 40px;
background:#333;
color:#FFF;
text-decoration:none;
}
.click-nav ul li a:hover
{
background:#333;
color: #d48f3a;
}
/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}
HTML
<div class="click-nav">
<ul class="no-js">
<li>
<a href="#" class="clicker">music</a>
<ul>
<li><a href="#">Featured Music</a></li>
<li><a href="#">CDs</a></li>
<li><a href="#">Vinyl</a></li>
</ul>
<li>
<a href="#" class="clicker">movies</a>
<ul>
<li><a href="#">Featured Movies</a></li>
<li><a href="#">DVDs</a></li>
<li><a href="#">Blu-Ray</a></li>
<li><a href="#">3D Blu-Ray</a></li>
</ul>
</li>
</ul>
</div>
jQuery 脚本
$(function () {
// Clickable Dropdown
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function (e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function () {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});