Jump to content

Dynamic CSS3 Tabs


Recommended Posts

  • Former Staff

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

  • Metin2 Dev 1
  • Love 4
Link to comment
Share on other sites

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • 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.