-1

我做了一个垂直下拉菜单，菜单用 Jquery 隐藏，现在的问题是我无法将我的页面与我的 li 项目中的菜单链接起来，我的 #href 不可点击，但链接在那里。

提前致谢

http://68625.glr-imd.nl/motiongraphic.html# <---- url 网页

HTML:

 <a id="arrow" href="#"></a>

<div id="sidemenu" class="sidemenu">
    <img id="side_menu_img" src="styling/img/logo_no_letters.png" width="auto" height="40" style="margin-left:40px; margin-top:250px;">
    <ul id="side_menu" class="menu">
        <li style="margin-top:10px;"><a href="about.html">A b o u t</a>
        </li>
        <li style="margin-top:10px;"> <a id="portfolio" href="#">P o r t f o l i o</a>

            <ul>
                <li style="font-size:12px; margin-top:10px;"><a href="68625.glr-imd.nl/Websites.html">Web-Design</a>
                </li>
                <li style="font-size:12px;"><a href="Brandid.html">Brand Identity's </a>
                </li>
                <li style="font-size:12px;"><a href="projects.html">Projects</a>

                    <ul>
                        <li style="font-size:10px; margin-top:10px;"><a href="#">For the birds: The story continues</a>
                        </li>
                        <li style="font-size:10px;"><a href="#">Gia - The biography </a>
                        </li>
                        <li style="font-size:10px;"><a href="#">Glr Viral</a>
                        </li>
                        <li style="font-size:10px;"><a href="#">The Round Interface</a>
                        </li>
                        <li style="font-size:10px; margin-bottom:10px;"><a href="#">Shang Xia - Coming Soon</a>
                        </li>
                    </ul>
                </li>
                <li style="font-size:12px;"><a href="#">+&nbsp;&nbsp;&nbsp;Motion Graphic Design</a>
                </li>
                <li style="font-size:12px;"><a href="3dillu.html">3D Illustration</a>
                </li>
            </ul>
        </li>
        <li style="margin-top:10px;"> <a href="#">O f f - B o o k s</a> 
            <ul class="depth2">
                <li style="font-size:12px;"><a href="photography.html">Photography</a>
                </li>
                <li style="font-size:12px;"><a href="#">Drawings + Paintings</a>
                </li>
            </ul>
            <li style="margin-top:10px;"><a href="#">c o n t a c t</a>
            </li>
        </li>
    </ul>
    <div class="iconbar">
        <img class="icon" src="styling/Icons/facebook.png">
        <img class="icon" src="styling/Icons/linkedin.png">
        <img class="icon" src="styling/Icons/tumblr.png">
        <img class="icon" src="styling/Icons/Youtube.png">
        <img class="icon" src="styling/Icons/meel.png">
    </div>
</div>

CSS：

 .menu {
     width: 300px;
     height: 152px;
     padding: 0;
     position: absolute;
     top: 50%;
     margin-top: -76px;
     margin-left: 25px;
     text-transform: uppercase;
 }
 .menu li {
     margin:0;
 }
 .menu li {
     display:block;
     color:#000;
     overflow:hidden;
 }
 .menu li a {
     display:block;
     padding:5px;
     text-decoration:none;
     font-family:'quicksandlight';
     font-weight:900;
     color:#000;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     transition: all 0.5s ease;
     cursor:auto;
 }
 .menu li > ul {
     display:none;
     overflow:hidden;
     padding:10;
 }
 .menu p ul.depth2 li a {
     color:#fff;
     display:block;
 }
 .menu li a:hover {
     display:block;
     padding:5px;
     text-decoration:none;
     font-family:'quicksandlight';
     font-weight:900;
     color:#999;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }
 .sidemenu {
     position:fixed;
     height:100%;
     left:0px;
     top:0;
     z-index:1500;
     width:375px;
     background-color:#FFF;
     margin-left:-375px;
 }
 ::-webkit-scrollbar {
     width: 0px;
 }
 #arrow {
     width:30px;
     height:100px;
     background-image:url(../img/arrow_l.png);
     position:fixed;
     left:0;
     top:50%;
     margin-top:-50px;
     z-index:2000;
     margin-left:0px;
     rotateZ:0;
 }
 @font-face {
     font-family:'quicksandlight';
     src: url('../fonts/quicksand-light-webfont.eot');
     src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-light-webfont.woff') format('woff'), url('../fonts/quicksand-light-webfont.ttf') format('truetype'), url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
     font-weight:normal;
     font-style:normal;
 }
 .iconbar {
     height:32px;
     width:auto;
     position:absolute;
     top:100%;
     margin-top:-32px;
     left:25px;
 }
 .iconbar img {
     width:auto;
     height:16px;
     margin-right:15px;
     opacity:0.5;
 }
 .iconbar img:hover {
     opacity:1;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }

JS：

<script>
    $("#portfolio").click(function() {
        if ($("#side_menu").css("margin-top") == "-76px") {
            $("#side_menu").animate({
                "margin-top": "-166px"
            }, 2500);
        } else {
            $("#side_menu").animate({
                "margin-top": "-76px"
            }, 500);
        }
    });
    $("#portfolio").click(function() {
        if ($("#side_menu_img").css("margin-top") == "250px") {
            $("#side_menu_img").animate({
                "margin-top": "160px"
            }, 2500);
        } else {
            $("#side_menu_img").animate({
                "margin-top": "250px"
            }, 500);
        }
    });


    $("#arrow").click(function() {
        if ($("#sidemenu").css("margin-left") == "0px") {
            $("#sidemenu").animate({
                "margin-left": "-375px"
            }, 500);
        } else {
            $("#sidemenu").animate({
                "margin-left": "-0px"
            }, 500);
        }
    });
    $("#arrow").click(function() {
        if ($("#arrow").css("margin-left") == "0px") {
            $("#arrow").animate({
                "margin-left": "335px"
            }, 500);
        } else {
            $("#arrow").animate({
                "margin-left": "-0px"
            }, 500);
        }
    });
    swfobject.registerObject("FLVPlayer");
</script>
4

1 回答 1

1

查看您网站上的源代码，以下代码会阻止您单击菜单内的链接：

$('.menu a').click(function( e ){
    //e.preventDefault(); // disable this to click enable the links
    $(this).parent('li').find('ul:first').slideToggle();
});

您最好做的是将您的选择器改进$('.menu a')为更好的选择器，以便选择需要切换子菜单的项目。例如，如果我对您的理解正确，则需要保持普通链接about。contact

HTML：

<li>
    <a href="#" id="portfolio">P o r t f o l i o</a>
    <!-- optionally add a class or data-attribute here to properly select in jquery -->
    <!-- $('.menu ul') -->
    <ul>
        <li><a href="Brandid.html">Brand Identity's</a></li>
        <li><a href="projects.html">Projects</a>
    </ul>
</li>

JS：

找到里面的a元素之前的所有元素。这应该避免选择，因此他们会保持默认行为来回答您的问题。ul.menuaboutcontact

$('.menu ul').prev("a").click(function(e){
    e.preventDefault();
    // continue
});

清理代码的一些提示：

在 te jquery 部分，不要两次选择相同的项目，也不要将它两次绑定到同一个事件。听起来有点矫枉过正，你不觉得吗？

$("#portfolio").click() // 3 times
$("#arrow").click() // 2 times

在 css + jquery 部分，margin-top您可能希望尝试使用 jquery 的高度.submenu或切换到切换功能，而不是动画。子菜单已定位fixed，因此最好避开margin此处并使用top, bottom, left,right来调整位置。

改进示例

var mainmenu = $("#sidemenu"), // confuses with #side_menu so -> mainmenu
    arrow = $("#arrow");

arrow.click(function () {
    var mainmenuleft = parseInt(mainmenu.css("left"), 10),
        arrowleft = parseInt(arrow.css("margin-left"), 10);

    mainmenuleft = mainmenuleft === 0 ? -375 : 0; 
    arrowleft = arrowleft === 0 ? 335 : 0;

    mainmenu.animate({ left: mainmenuleft }, 500);
    arrow.animate({ marginLeft: arrowleft }, 500);
});

小提琴：

http://jsfiddle.net/tive/ez7WG/

于 2013-10-29T01:44:57.377 回答