Jump to content

Recommended Posts

  • Former Staff

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



Lets say we got a css class named newstab.

        height: 50px;
        width: 200px;
        transition: 0.8s;
        overflow: hidden;

        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

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