Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

Dropdown Header

A Config Script for GameBanana

49 1,226 bytes Raw Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*** Reset Top Margin On Sidebar and Content ***/

#MainContent
{
        margin-top : 0;
}

#SideNav
{
        top         : 0;
        padding-top : var(--TopNavHeight);
        height      : 100vh !important;
}


/*** Reposition the Header ***/

#TopNav
{
        margin-top : calc(0px - var(--TopNavHeight)); /* Move the header beyond visibility */
        transition : all .3s ease-in-out;             /* Transition for smooth dropdown */
        flex-wrap  : wrap;
}


/*** Generate an Arrow below the Header ***/

#TopNav:after
{
        content           : '\25BC';                    /* Escaped Unicode Down Arrow Character; Can use any other text or image here */
        flex              : 1;                          /* Span entire wrapper width to center the arrow */
        font-size         : 12px;                       /* Adjust arrow size */
        text-align        : center;                     /* Center arrow */
        transition        : transform .3s ease-in-out;  /* Transition for smooth rotation of arrow */
        page-break-before : always;
}


/*** Dropdown Effect ***/

#TopNav:hover
{
        margin-top : 0px; /* Bring header back to visibility */
}

#TopNav:hover:after
{
        transform : rotateZ(180deg); /* Reverse the arrow direction */
}

Updates

menu
1.6 1y
  • Overhaul Updated alongside the site.
1.5 1y Amendment 1.4 2y Amendment 1.3 3y Amendment 1.2 3y Improvement Addition Amendment

Summary

This concept and usable code was for a brief period of time was showcased at Members -> Settings -> Uberstyle. I think it was added there by Logan but I am not sure. It was utilized at that time by many users like Logan and deadman22.

I've recreated the code from scratch and added my own touch to it.

Preview

Comments

Sign up to access this!
  • Sneaky.amxx avatar
    Sneaky.amxx username pic Joined 9y ago
    Moderator
    Offline
    424 points Ranked 46906th
    24 medals 6 rare
    • Submitted 20 Gamefiles Medal icon
    • Received thanks 50 times Medal icon
    • Submitted 50 Maps Medal icon
    • Submitted 20 Maps Medal icon
    • 6 years a member Medal icon
    • Returned 1000 times Medal icon
    Sneaky.amxx avatar
    Sneaky.amxx
    GlobalModders Development Flag
    Affiliation
    GlobalModders Development
    GoldSource Engine Expert
    access_time 4y
    > **Posted by Ring-A-Ding Rampage** > If you see a script submission which is nothing but bind commands, flag it. and i will see them in admin panel so i can better deal with the problem. Anyway, good job.
    • Interesting x 1
    • Thanks x 1
    Powerful avatar
    Mantra
    Powerful
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 8y ago
    Moderator
    PL : 0
    3,455 points Ranked 2326th
    75 medals 10 legendary 20 rare
    • Submitted 60 Sprites Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    • Submitted 100 Skins Medal icon
    • Reached 100 subscribers Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage
    (づ。◕‿‿◕。)づ
    access_time 4y
    > **Posted by Sneaky.amxx** > > You see.. This is what the scripts section is for.. I enjoy being a script mod much more when i actually have reasonable content to observe.. all the 3 month old accounts flooding the script section with userconfigs must come to an end. And surely it will soon enough. Thanks for your submission. Thanks mate. I am glad you like the script. I enjoy writing code snippets for CSS and these should work with most uberstyles with only minor tweaks and I also try to explain most stuff in comments hoping that people will read them and might try to make their own stuff! :) Indeed userconfigs should not even belong in scripts unless they are really extensive and unique from the ones already submitted. And I really wish people stop posting bind commands as scripts. :/
    • Agree x 1
    • Correct x 1
    • Interesting x 1
    Erode using Code avatar
    Mantra
    Erode using Code
    URL to post:
  • Sneaky.amxx avatar
    Sneaky.amxx username pic Joined 9y ago
    Moderator
    Offline
    424 points Ranked 46906th
    24 medals 6 rare
    • Submitted 20 Gamefiles Medal icon
    • Received thanks 50 times Medal icon
    • Submitted 50 Maps Medal icon
    • Submitted 20 Maps Medal icon
    • 6 years a member Medal icon
    • Returned 1000 times Medal icon
    Sneaky.amxx avatar
    Sneaky.amxx
    GlobalModders Development Flag
    Affiliation
    GlobalModders Development
    GoldSource Engine Expert
    access_time 4y
    You see.. This is what the scripts section is for.. I enjoy being a script mod much more when i actually have reasonable content to observe.. all the 3 month old accounts flooding the script section with userconfigs must come to an end. And surely it will soon enough. Thanks for your submission.
    • Thanks x 1
    Powerful avatar
    Mantra
    Powerful
    URL to post:

Embed

menu
Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 8y ago
Moderator
Offline
3,455 points Ranked 2326th
75 medals 10 legendary 20 rare
  • Submitted 60 Sprites Medal icon
  • Thanked 500 submitters Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
  • Submitted 100 Skins Medal icon
  • Reached 100 subscribers Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
Author
Original Authors
GameBanana
Original Concept and Code

Submitter

Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 8y ago
Moderator
PL : 0
3,455 points Ranked 2326th
75 medals 10 legendary 20 rare
  • Submitted 60 Sprites Medal icon
  • Thanked 500 submitters Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
  • Submitted 100 Skins Medal icon
  • Reached 100 subscribers Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Sub-category
UI Themes
Super-category
Cascade Style Sheets

License

menu

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • favorite 3
  • remove_red_eye 2.2k
  • mode_comment 3
  • access_time 4y
  • access_time 1y
  • refresh 1y

More from Submitter

menu

More UI Themes Scripts