-2
我有手風琴菜單,但是當它滑動時會將其下面的內容向下推,因此我想使其下拉菜單以使其向右滑動。我可以使用另一個,但我喜歡它的風格。有人能幫助我,只是第一個li
?將手風琴菜單更改爲下拉菜單
看看這裏http://jsfiddle.net/RXRBm/1/感謝您的所有幫助。
我有手風琴菜單,但是當它滑動時會將其下面的內容向下推,因此我想使其下拉菜單以使其向右滑動。我可以使用另一個,但我喜歡它的風格。有人能幫助我,只是第一個li
?將手風琴菜單更改爲下拉菜單
看看這裏http://jsfiddle.net/RXRBm/1/感謝您的所有幫助。
與其將整個事物更改爲新的下拉菜單,您只需簡單地將下拉列表absolute
的position
。我還添加了當原始列表或子菜單不再徘徊時子菜單關閉的功能。 Demo Here
/* CSS */
li {
list-style:none;
}
ul {
padding:0;
margin:0;
}
#nav {
float: left;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li {
position:relative;
}
#nav li a {
width: 200px;
text-align:center;
display: block;
padding: 10.7px;
background:#ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
border-width:0.2px;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none;
position:absolute;
left:221px;
z-index:-1;
top:-1px;
}
#nav li ul li a {
padding: 10px;
background:#C01F25;
opacity:0.95;
border-bottom: 0.1px solid red;
}
/* Changed jQuery */
$(document).ready(function() {
$("#nav > li > a").on('mouseenter', function (e) {
if ($(this).parent().has("ul")) {
e.preventDefault();
}
if (!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
});
$('#nav').on('mouseleave', function (e) {
$('.open').removeClass('open').next("ul").slideUp(350)
});
});
你張貼問題,你應該提供你的代碼的問題,因爲有時jsFiddles被刪除或網站乾脆崩潰
沒有下一次是在演示改變。這是相同的。我不想讓它滑下來,而是向右滑動。 – user2708382
非常感謝,但有一個問題。當菜單向右滑動並將其懸停時,它將消失..請修復此問題。當菜單滑動到它時,你會看到這個概率謝謝。 – user2708382
再次更新。希望你快樂! –