Question

您好我正在使用Jquery和Css创建一个顶级幻灯片菜单。当我点击按钮时，菜单应显示在屏幕顶部，如果我点击按钮或窗口中的任何位置，它应该关闭。

我无法获得导航栏，我的代码有些问题。这是我试过的代码。

HTML：

<body class="cbp-spmenu-push">
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
        <h3>Menu</h3>
        <a href="#">Celery seakale</a> 
        <a href="#">Dulse daikon</a> 
        <a href="#">Zucchini garlic</a> 
        <a href="#">Catsear azuki bean</a> 
        <a href="#">Dandelion bunya</a> 
        <a href="#">Rutabaga</a> 
        <a href="#">Celery seakale</a> 
        <a href="#">Dulse daikon</a> 
        <a href="#">Zucchini garlic</a>
        <a href="#">Catsear azuki bean</a> 
        <a href="#">Dandelion bunya</a> 
        <a href="#">Rutabaga</a>
    </nav>
    <div class="container">
        <div class="main">
            <section>
                <button id="showTop" style="margin-top:300px;">Show/Hide Top Slide Menu</button>
            </section>
        </div>
    </div>
</body>

JS：

$(document).ready(function(){
    $('#showTop').click(function() {
    debugger;
    $('#cbp-spmenu-s3').toggle();
    $('#cbp-spmenu-s3').toggleClass('active');
});
});

的CSS：

.cbp-spmenu-horizontal {
    width: 100%;
    height: 150px;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}
.cbp-spmenu-horizontal a {
    float: left;
    width: 20%;
    padding: 0.8em;
    border-left: 1px solid #258ecd;
}
.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.cbp-spmenu-top {
    top: -150px;
    display:none;
}
.cbp-spmenu-top.cbp-spmenu-open {
    top: 0px;
}

演示链接： Demo Code Link

Answer 1

修改

再次看一下，我注意到导航器上有一个固定的高度，你可能会放松它。

我的想法是通过jquery计算nav的高度，并将该值用作top属性。

继续快速实现它（需要一些重构）

var $nav = $(".cbp-spmenu"); var $navBtn = $("#showTop"); var navHeight = $nav.height() + "px"; var navTop = "-" + navHeight; //$('.cbp-spmenu-top').hide(); $nav.css({top: navTop}); $navBtn.on("click", function(e) { e.preventDefault(); if ( !$nav.hasClass("active") ) { $nav.addClass("active"); $nav.removeAttr("style"); } else { $nav.removeClass("active"); $nav.css({top: navTop}); } });

更新了小提琴 http://jsfiddle.net/Varinder/rC8Sk/15/

嗯，有很多事情要做：

我会尝试触及所有这些：

导航可能需要absolute定位才能正确实现top位置值。

.cbp-spmenu-horizontal { width: 100%; height: 150px; left: 0; z-index: 1000; overflow: hidden; position:absolute; }

jQuery的.show()和.hide()方法可以通过切换内联的display属性来实现转换的复杂化（事实上，我认为它不可能从display:none过渡到{{1 }}）

display:block

对css的进一步修订导致了这个工作样本：http://jsfiddle.net/Varinder/rC8Sk/7/

Answer 2

试试这个......

$('.cbp-spmenu-top').hide();
$('#showTop').click(function() {
    $('.cbp-spmenu-top').toggle();
});

http://jsfiddle.net/rC8Sk/8/

http://api.jquery.com/toggle/ 显示或隐藏匹配的元素。

甚至效果更好......

$('.cbp-spmenu-top').hide();
$('#showTop').click(function() {
    $('.cbp-spmenu-top').slideToggle();
});

你确实需要摆脱一些风格规则。你不需要转换规则，因为jQuery会这样做。

http://jsfiddle.net/rC8Sk/14/（更新的CSS）

https://api.jquery.com/slideToggle/以滑动方式显示或隐藏匹配的元素。

Answer 3

尝试Dis：working Demo并在html表单中导入以下脚本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

jquery的：

$('.cbp-spmenu-top').hide();
$('#showTop').click(function() {
$('.cbp-spmenu-top').toggle();
});

Answer 4

以下代码可以根据您的要求为您提供帮助。如果您单击文档上的任何位置，则滑动切换菜单并隐藏。

$('#showTop').on('click',function(){
            $('.cbp-spmenu-top').slideToggle('slow')
            .toggleClass('active'); // if you wish to add/romove class
        });
        $('#showTop, .cbp-spmenu-top').on('click',function(event){
            event.stopPropagation(); // Stop propogation on selected element
        });
        $(document).on('click',function(){
            $('.cbp-spmenu-top').slideUp('slow'); // hide menu if you click anywhere in the document
        });

更新工作示例：Working example

顶部幻灯片菜单没有插件使用Jquery

4 个答案: