我想使用我發現的教程做一個自定義菜單。自定義下拉菜單不能與鏈接
我遇到的問題不是執行,而是阻止我點擊鏈接。什麼時候,我有菜單「打開」,當我點擊一個say鏈接時,它只是關閉菜單,快速秒我看到它突出顯示整個框,而不是鏈接。
下面是一些截圖。您可以將鼠標懸停在鏈接上(它們在懸停時會變成紫色),但是當您單擊單個鏈接時,它往往只是點擊整個菜單而不是將您發送到所述頁面。但是,當我將鼠標懸停在它上面時,我可以看到它顯示了瀏覽器左下角的鏈接。我似乎無法弄清楚點擊出現的情況,而不是將網址發送到網頁。
http://cl.ly/image/0S2F2c3h3g1o (懸停截屏)
http://f.cl.ly/items/3P1h27323B203E2J0N41/clickout.png (clickout)
當我嘗試點擊任何鏈接,我剛剛得到這個藍色的盒子,並關閉菜單,而不是送你的鏈接的頁面。
這是我已經迷上了
<!-- MOBILE MENU/-->
<nav id="mobile-menu">
<div id="mobmenu" class="dropdown-menu" tabindex="1">
<ul class="dropdown" tabindex="1">
<li><a href="/about">ABOUT</a></li>
<li><a href="/work">WORK</a></li>
<li><a href="/notes">NOTES</a></li>
</ul>
</div>
</nav>
<!--/MOBILE MENU -->
這是JavaScript的HTML。
function DropDown(el) {
this.dd = el;
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown($('#mobmenu'));
$(document).click(function() {
// all dropdowns
$('.dropdown-menu').removeClass('active');
});
});
</script>
和CSS。
#mobile-menu {
width: 320px;
}
.dropdown-menu {
background: #050607 url(images/menu_closed.png) no-repeat center top;
border: none;
color: #FFF;
cursor: pointer;
height: 50px;
font-weight: bold;
margin-top: 17px;
outline: none;
position: fixed;
-webkit-appearance: none;
width: 320px;
z-index: 9999;
}
.dropdown-menu::after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
}
/* ACTIVE STATE */
.dropdown-menu .dropdown {
background: #050607;
height: 1000px;
list-style: none;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
opacity: 0.0;
}
.dropdown-menu .dropdown li {
position: relative;
top: 10px;
z-index: 99;
}
.dropdown-menu .dropdown li a {
border-top: 1px solid #1f1f1f;
color: #FFF;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: 200;
letter-spacing: 8px;
pointer-events: visible;
padding: 15px 25px 15px 25px;
text-align: center;
text-decoration: none;
z-index: 9999999999999999999999;
}
.dropdown-menu .dropdown li:nth-child(5) {
font-size: 15px;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
}
.dropdown-menu .dropdown li:hover a { background: #050607; color: #605e90; }
.dropdown-menu.active .dropdown {
-moz-animation: fadein .3s linear;
-webkit-animation: fadein .3s linear;
-ms-animation: fadein .3s linear;
animation: fadein .3s linear;
pointer-events: auto;
opacity: 1.0;
z-index: 999999 !important;
}
.dropdown-menu.active:active {
pointer-events: auto;
}
.dropdown-menu.active::after {
border-color: #000;
margin-top: -3px;
}
.dropdown-menu.active {
background: #050607 url(images/menu_open.png) no-repeat center top;
outline: none;
}
謝謝! :3
甜!謝謝!我知道它必須是JS中的東西。我無法弄清楚。我不停地修改返回false,並且做了preventDefault,但沒有任何工作!謝謝你花時間弄清楚這一點:) – Monstr92 2013-03-24 06:56:40
嘿,你不知道如何隱藏菜單鏈接?即使菜單沒有展開,它們也是可以點擊的。 – Monstr92 2013-03-24 11:13:14
您可以通過修改下拉類的CSS使其在默認情況下隱藏(「display:none;」),然後在用戶點擊div時切換可見性。另外,如果你只是想有一個鏈接的下拉列表,一些JavaScript代碼是多餘的。這是一個固定的版本,其中包含多餘的JavaScript:http://jsfiddle.net/7YS3W/2/ – Isuru 2013-03-24 19:50:07