CodePen

Loading ..................

Functional CSS Tabs Re-Revisited

Description

Solving the fixed height issue: now both tabs and the content area can be variable height. And the HTML structure remains almost exactly the same: each tab represented as complete unit of it's own instead of being split into three parts.

http://css-tricks.com/functional-css-tabs-revisited/

Tags

  1. tabs
  2. css3
  3. responsive

Comments

  1. how to prevent the page from jumping to the top when a tab is clicked? i want to utilize two groups of tabs + a header, so the tabs are found in the middle of my page. clicking any tab causes the page to jump to the top---something like the default behavior for # links maybe?

  2. @namurray Hashes target the element that have that id, so yes, it is a browser default behavior. You can prevent link default behavior with some JavaScript, with jQuery:

      $(document).on('click', 'a.my-tab-link', function(e) {
        e.preventDefault();
    });
    
    

    On this pen the above isn't required and jumping won't happen as the implementation is based on hidden radio inputs.

  3. thanks for your quick response, but it is happening for me using your code. in fact it's happening on this page now, in FF or chrome. if you scroll down juuuust enough to see the very bottom of a tab, and then click one, the page will jump to the top. it doesn't happen w/ chris's code but i can't tell what the difference is that would cause it, when i strip down both.

  4. @namurray Fixed. It only happened on Chrome. There seems to be a difference in how position: fixed; and bottom: 100%; are interpreted. I changed the code a bit so that Chrome seems to be happy for now. Will need more testing with other browsers though.

  5. I'm having some trouble with Safari on iPad and Windows. If I remove the two scripts from the bottom (and), the tabs no longer work.

  6. @twheel: fixed, Safari had issues with consecutive + selectors, using ~ instead selected the correct element.

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 1446 Views
  • 8 Comments
  • 6 Hearts
Loading...
Loading...