IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

[EDGE] Smooth Category Hide/Show

View previous topic View next topic Go down

avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3211
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Wed 28 Dec 2016, 06:19

CSS to smooth out the hide/show forum categories on the homepage. It might be a bit too flashy for some people but it's better than the click-gone feeling.

Code:
.title + div[id] { display: block !important; }

.title.c_hide + div[id] {
    opacity: 1;
    max-height: 5000px;
    width: 100%;
    transition: max-height 2s cubic-bezier(1, 0, 1, 0), width 2s 0.75s ease, opacity 2s 1s ease;
}

.title.c_show + div[id] {
    opacity: 0;
    max-height: 0;
    width: 0;
    transition: max-height 2s cubic-bezier(0, 1, 0, 1), width 2s ease-in, opacity 2s ease;
}

.title + div[id] .forum-block { overflow: hidden; white-space: nowrap; }


Last edited by Ace 1 on Thu 29 Dec 2016, 05:59; edited 2 times in total
avatar
Guest
Guest

PostGuest on Wed 28 Dec 2016, 14:38

Thát.... looks very nice! Thanks for that! Smile
avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3211
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Wed 28 Dec 2016, 16:57

Wait I found some bugs with the code. Imma fix them later today
avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3211
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 29 Dec 2016, 06:00

Alright I fixed the bug. Now it works for any amount of forums in one category. I also changed the title.
avatar
Guest
Guest

PostGuest on Thu 29 Dec 2016, 10:49

Great, @Ace 1! Thank you! Rose
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum