Dropdown Header

A Config Script for GameBanana

Updates

ScriptParentSubmitterStats
  • Overhaul Updated alongside the site.
1.6 3mo
  • Amendment Updated alongside site.
1.5 9mo
49 lines | 1 kb | 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 */
}

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

Sign up to access this!
  • Sneaky.amxx avatar
    Sneaky.amxx
    GlobalModders Development Flag
    Affiliation
    GlobalModders Development
    GoldSource Engine Expert
    3y
    > **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 AMXMODX coder avatar
    Mantra
    Powerful AMXMODX coder
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 8y ago
    Moderator
    In Extremis
    2,043 points Ranked 2575th
    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
    (づ。◕‿‿◕。)づ
    3y
    > **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
    Ode to Code avatar
    Mantra
    Ode to Code
    URL to post:
  • Sneaky.amxx avatar
    Sneaky.amxx
    GlobalModders Development Flag
    Affiliation
    GlobalModders Development
    GoldSource Engine Expert
    3y
    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 AMXMODX coder avatar
    Mantra
    Powerful AMXMODX coder
    URL to post:

Embed

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
2,043 points Ranked 2575th
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
In Extremis
2,043 points Ranked 2575th
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

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+
  • 1.9k Views
  • 3 Posts
  • 3ySubmitted
  • 3moModified
  • 3moUpdated

Scores

89 bScore
9.8 Rating

4 voters

Sign up to access this!

More from Submitter

More UI Themes Scripts

bcp.crwdcntrl.net tracking pixel