Jump to content
.InyaProduction

Dynamic css3 news tabs

Recommended Posts

Im gonna show you how to make a opening/closing news tab like on this page:

http://nybu.inyaproduction.de

 

Lets say we got a css class named newstab.

.newstab{
        height: 50px;
        width: 200px;
        transition: 0.8s;
        overflow: hidden;
}

.newstab:hover{
        height: 300px;
        transition: 0.8s;
}
In this case your div with the class newstab would jump from 50px -> 300px height. The "transition: 0.8s" takes care that it wont like teleport but shifts to its real height.

The overflow: hidden; is therefore, that the text wont go over the borders of your div. It would be good to add a box-shadow to the top of each newstab so it will look way more realistic.

 

I think this solution is way better than using js cause its much more lightweight. The only negative thing:

IE users with deprecated browsers wont see the shift but it will still open but like i said at top like a teleport :D

 

Greets Inya

  • Love 4

Share this post


Link to post

If they're using IE they don't deserve to see it :D

  • Love 1

Share this post


Link to post

 

If they're using IE they don't deserve to see it :D

 

Yes but nobody use IE or ? 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

Terms of Use / Privacy Policy / Guidelines / We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.