CODEWITHSUNDEEP
javascripthtmlcssmenucss-transitions
user3928188
user3928188

Reputation: 23

HTML/CSS How to make menu slide up when menu item is clicked?

Like the title says, I have a sidebar menu that I'm trying to get to completely slide up and out of sight when one of the menu items, blog, is clicked. Similar to this jsfiddle I found (preferrably without js simply bc I hardly know it, but if that's the only way no big): fiddle ; except my menu is already open and you will be clicking an item inside the menu to slide it up. I'm trying to get the menu to slide up slowly. The menu looks like this:

Logo

Everything I try changes the whole layout of the sidebar, which I don't want. Here's some of my code:

<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>

I have some other code in there like a search bar, etc. but this is basically what I'm trying to get to roll up slowly when 'blog' is clicked. Any guidance is appreciated!

Upvotes: 2

Views: 2109

Answers (3)

EternalHour
EternalHour

Reputation: 8621

You could do it like this.

FIDDLE

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");
});

Upvotes: 0

p e p
p e p

Reputation: 6674

You can get this effect by using jQuery's .animate and animating the position of your elements. In your case, you could do something like this, using a margin to create the sliding up animation. Please note that I added a class called blog to the blog link.

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

Check out this JSFiddle.

Upvotes: 0

user3883249
user3883249

Reputation: 127

easy way to do it is use jquery, i think it impossible just with html and css, take a look with http://api.jquery.com/slideup/

Upvotes: 1

Related Questions