当菜单项被点击时，如何使菜单向上滑动

Question

就像标题所说的，我有一个侧边栏菜单，当其中一个菜单项blog被点击时，我试图让它完全向上滑动并从视线中消失。类似于我发现的这个jsfiddle(最好没有js，因为我几乎不知道它，但如果这是唯一的方法没有大):fiddle;除了我的菜单已经打开，你将点击菜单中的一个项目滑动它。我正试着让菜单慢慢滑上来。菜单看起来像这样:

标志

• instagram
• 对

我所尝试的一切都改变了侧边栏的整个布局，这是我不想要的。下面是我的一些代码:

<div id="sidebar"> 
        <div id="navigation">
          <div id="logo">
          <img src="Logos/headerlogo.jpg" width="208" height="80" longdesc="Logos/headerlogo.jpg">
        </div>
    <hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
    <ul class="first" >
    <li> <a href="" title="" runat="server">Home</a></li>
    <li> <a href="" title="" runat="server">Blog</a></li>
    <li> <a href="" title="" runat="server">Instagram</a></li>
    <li> <a href="" title="" runat="server">About</a></li>
    <li> <a href="" title="" runat="server">Store</a></li>
    <li> <a href="" title="" runat="server">Portfolio</a></li>
    <li> <a href="" title="" runat="server">Contact</a></li>
    </ul>
</div>

我有一些其他的代码在那里，像一个搜索栏等，但这基本上是我想让滚动慢慢当"博客"被点击。任何指导是感激的!

Answer 1

简单的方法是使用jquery，我认为只使用HTML和css是不可能的，看看http://api.jquery.com/slideup/

Answer 2

你可以通过使用jQuery的.animate和动画元素的位置来获得这种效果。在您的情况下，您可以这样做，使用边距来创建向上滑动的动画。请注意，我在博客链接中添加了一个名为blog的类。

$('.first .blog').click(function(){
    $('#sidebar').animate({
        "marginTop": "-=500px"       //animate margin to create slide up animation  
    }, 1000);                        //duration of animation, in milliseconds
});

查看这个JSFiddle

Answer 3

你可以这样做。

小提琴

HTML:

<div id="sidebar">
    <div id="navigation">
        <div id="logo">
            <img src="https://www.google.com/images/srpr/logo11w.png" width="208" height="80" longdesc="Logos/headerlogo.jpg">
        </div>
        <hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
        <div class="menu">
            <div class="menu">
                <ul class="first">
                    <li> <a href="#" title="" runat="server">Home</a>
                    </li>
                    <li> <a class="blog" href="#" title="" runat="server">Blog</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Instagram</a>
                    </li>
                    <li> <a href="#" title="" runat="server">About</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Store</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Portfolio</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Contact</a>
                    </li>
                </ul>
            </div>

Javascript:

$(".blog").on("click", function () {
    var slide = $(this).closest(".first");
    $(slide).slideToggle("slow");
});