Jump to content
×
×
  • Create New...

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

  • Recently Browsing   0 members

    • No registered users viewing this page.


  • Metin2 Dev Github
  • Activity

    1. 1

      Metin2 Privat Server selfmade

    2. 1

      Costumes

    3. 1

      Costumes

    4. 0

      game.core (Thank you in advance for your help.)

    5. 1

      [Help] Problem with the system I added

    6. 7

      Serversource build win32

    7. 1

      Extended blend system

    8. 7

      Serversource build win32

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.