Grow your CSS skills. Land your dream job.

The CSS side-tabs that overlap content and scroll /w page?

  • # February 12, 2010 at 4:23 pm

    How do you make one of those cool little CSS side-tabs that goes on one side of the page? The ones that usually have a single Twitter post or a link to Twitter on them? I want to put one on my page!

    Does anyone know which plugin or code that is?

    # February 12, 2010 at 4:41 pm

    Can we see an example of what you’re talking about?

    # February 13, 2010 at 2:20 pm

    http://bloggerschoiceawards.com/

    Do you see the FEEDBACK side tab on the left side of the page?

    That’s a great example. It sticks to one side of the page, overlaps all content (top layer), and it slides out when you roll over it.

    # February 18, 2010 at 7:11 am

    Does anyone know?

    # February 18, 2010 at 12:20 pm

    Well I would "View source" and copy the code… ;)

    # February 24, 2010 at 12:08 pm

    I noticed MyOpenBar.Com has one of these same Feedback tabs as well. It seems to be a class when I inspect the element, called "fdbk_tab" but I can’t find the class in the style sheet. Here is the style sheet that the page links to:

    http://nyc.myopenbar.com/_css/global.css

    # February 24, 2010 at 12:10 pm

    Oh, scratch that, it links to here:

    http://s3.amazonaws.com/getsatisfaction … edback.css

    I guess that solves my problems.

    # February 24, 2010 at 1:10 pm

    If you need any more advice, my guess is that you just use position:fixed to keep the tab appearing in the same place even when the user scrolls. Then when the user hovers over it, just change the padding to make it pop out of the side of the page

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".