CODEWITHSUNDEEP
jqueryhtmlcss
user3027865
user3027865

Reputation: 11

Slide Div's on menu click

I wanted to create a transition while div is moved down on click of any nav button.

Below is the code pen link where I have tried it. I dont know anything about CSS3 I would need your help to get the transition effect while div slide down or up, also I wanted to make the nav bar fixed when the page is slide down.

Please help with these things. I am just learning how to do these things. I am trying to use bootstrap for the same in my local system but I am not able to do it. If any of you know how to do it, please let me know.

HTML:

<div id="tab_container">
    <nav id="tabs">
        <ul id="nav">
            <li class="active"><a href="#about">About</a>
            </li>
            <li class="inactive"><a href="#Services">Services</a>
            </li>
            <li class="inactive"><a href="#OurStaff">Our Staff</a>
            </li>
            <li class="inactive"><a href="#book">book</a>
            </li>
            <li class="inactive"><a href="#Gift">Gift Cards</a>
            </li>
            <li class="inactive"><a href="#Reviews">Reviews</a>
            </li>
        </ul>
    </nav>
</div>
<div id='container'>
    <div id='services' class="box">Services</div>
    <div id='about' class="box">About</div>
    <div id='OurStaff' class="box">Our Staff</div>
    <div id='book' class="box">book</div>
    <div id='Gift' class="box">Gift</div>
</div>

CSS:

.box{
  width : 100%;
  height : 200px;
  background : blue;
  color:red;
  font-size:25px;
  margin-bottom : 20px; 
  padding : 20px;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
-webkit-border-radius: 29px 20px 20px 20px;
-moz-border-radius: 29px 20px 20px 20px;
  border-radius: 29px 20px 20px 20px;
}

http://codepen.io/anon/pen/wrxEn

Upvotes: 0

Views: 1235

Answers (2)

Furkan Poyraz
Furkan Poyraz

Reputation: 692

This should work:

HTML:

<nav>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#staff">Our Staff</a>
</nav>
<ul id="tabs">
    <li id="about">About</li>
    <li id="services">Services</li>
    <li id="staff">Our Staff</li>
</ul>

CSS:

#tabs, #tabs li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tabs li {
    width: 250px;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .5s linear;
    transition: height .5s linear;
}

#tabs li:target {
    height: 250px;
}

JSFiddle: http://jsfiddle.net/rCH8X/

Upvotes: 1

Ishan Jain
Ishan Jain

Reputation: 8171

You can use Jquery .animate() the scrollTop property, like this:

$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

Try this:

 $('a').click(function() {
    var clickedele = $(this).attr("href");
    var desti = $(clickedele).offset().top;
   $('html, body').animate({ scrollTop: desti-15}, 'slow');
    return false;
});

Working Example

Note: First of all you have to include jQuery: <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> script on your page.

Upvotes: 0

Related Questions