使用Button导航打开页面（jquery）

Question

I want to make a Navigation (Home,Media,Contact...) and i want it like this that if you press Home it opens the Home(Page) in a Slide down so it doesnt use any href in the Navigation. 我想制作一个导航（主页，媒体，联系人...），我希望它像这样，如果你按Home它会在向下滑动打开主页（页面），所以它不会使用导航中的任何href。

Again and easy explained: I have a navigation with Buttons(Image) i want to click a Button to open the other Image in a slide down. 再次和简单的解释：我有一个带按钮的导航（图像）我想点击一个按钮以向下滑动打开另一个图像。

And yes im new to all of this and i want to learn but googled and didnt find anything that helped me. 是的，我是所有这一切的新手，我想学习，但谷歌搜索，并没有找到任何帮助我。

Thats what I tried but it didnt work(Nothing Happens): 多数民众赞成我尝试但它没有工作（没有发生）：

CSS: CSS：

.Home { 
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    background-image: url("../images/Home.png");
    position: absolute;
    width: 175px;
    height: 60px;
    top: 179px;
    left: 155px;
    z-index:3
    }
.Home:hover {
    background-image: url("../images/Homeh.png");
    position: absolute;
    width: 175px;
    height: 60px;
    top: 178px;
    left: 155px;
    z-index:2
    }
.panel {
    background-image: url("../images/Panel.png");
    position: absolute;
    width: 1699px;
    height: 843px;
    top: 200px;
    left: 120px;
    z-index:1
    }

Html: HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $(".Home").click(function(){
        $(".panel").slideToggle("slow");
    });
});
</script>

</head>

<body>
<a><span class="Home"></span></a>
<a><span class="panel"></span></a>
  <script src="assets/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

You should use jQuery's built in function animate() , which will change an element's CSS on the fly. 您应该使用jQuery的内置函数animate（），它将动态更改元素的CSS。 You can control the speed at which they change and also the order in which you want your animations to take place. 您可以控制它们更改的速度以及您希望动画发生的顺序。

To get the panel to slide down from the top, you must first create the panel with it's top position equal to negative of whatever height the panel is. 要使面板从顶部向下滑动，必须首先创建面板，其顶部位置等于面板的任何高度的负值。 Then use animate() to move it down/up. 然后使用animate（）向下/向上移动它。

So in your code, change: 所以在你的代码中，改变：

.panel {
    top: 200px;
}

To this: 对此：

.panel {
    top: -843px; /* Height of panel */
}

And then with Javascript: 然后使用Javascript：

$(document).ready(function() {

    (function dropDown() {
        $('.home').one('click', function(){
            $('.panel').animate({
                top: "+=900"
            }, 400, function() {
                $('.home').one('click', function(){
                    $('.panel').animate({
                        top: '-=900'
                    }, 400, function() {
                        dropDown();
                    });
                });
            });
        });
    })();

});

jsFiddle with image backgrounds jsFiddle图像背景

Update 更新

You can also make the div drop down from a specific part of the document by using jQuery's offset() function. 您还可以使用jQuery的offset（）函数使div从文档的特定部分下拉。 It takes the provided selector and calculates it's distance from the document's edge in pixels. 它采用提供的选择器并计算它与文档边缘的距离（以像素为单位）。 In this case you would set your drop-down div's top position equal to the home button's offset (while still subtracting it's own height). 在这种情况下，您可以将下拉div的顶部位置设置为等于主页按钮的偏移量（同时仍然减去它自己的高度）。

Example: 例：

// Height of drop-down element
var height = $('.panel').height();

// Position drop-down element right above target button
var yPosition = $('.home').offset().top - height;
$('.panel').css('top', yPosition+'px');

(function dropDown() {

    $('.home').one('click', function(){
        $('.panel').css({
            'display': 'block',
            'opacity': 0
        });      

        $('.panel').animate({
            opacity: 1,
            top: "+=250"
        }, 400, function() {
            $('.home').one('click', function(){
            $('.panel').animate({
                opacity: 0,
                top: '-=250'
                }, 400, function() {
                    dropDown();
                });
            });
        }); 
    });

})();

Full demo - jsFiddle 完整演示 - jsFiddle

jquery javascript css html jquery javascript css html

使用Button导航打开页面（jquery）

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-18 02:41:55

使用Button导航打开页面（jquery）

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-18 02:41:55

解决方案1
1 已采纳 2016-01-18 02:41:55