1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Pure css3 Tabs but not responsive

Discussion in 'CSS' started by earngate, Apr 8, 2015.

  1. #1
    Hi,
    We have a Pure css Tabs with css3 intimations
    but need help to be responsive
    you can see fiddle here
    http://jsfiddle.net/earngate/8jjn4xfg/
    SEMrush
    Or this is full code
    CSS
     
    .tabsk2 {
    position : relative;
    min-height : 200px;
    clear : both;
    max-width : 99%;
    margin : 20px auto 30%;
    }
    .tabk2 {
    float : right;
    min-width : 100px;
    }
    .tabk2:active {
    color : #f00;
    }
    .tabk2 label {
    width : 150px;
    max-width : 100%;
    background-color : #2c3e50;
    color : #fff;
    font-weight : bold;
    cursor : pointer;
    overflow : hidden;
    padding : 5px 20px;
    position : relative;
    margin-top : 1em;
    transition : 0.5s;
    }
    .tabk2 label:hover {
    background : #08C;
    transition : background-color 0.5s 0.1s ease;
    }
    input[type="checkbox"]:checked + .tabk2 label {
    color : #f00;
    background : #08C;
    font-style : normal;
    }
    .tabk2 [type="radio"] {
    display : none;
    height : 100px;
    background : #08C;
    }
    .contentk2 {
    position : absolute;
    left : 0;
    background : white;
    right : 0;
    direction : rtl;
    padding : 15px;
    border : #ccc solid 1px;
    border-top : 7px solid #08C;
    }
    .contentk2 > * {
    opacity : 0;
    }
    [type="radio"]:checked ~ label .tabk2, [type="radio"]:checked ~ label {
    background : #08C;
    color : white;
    top : 0;
    }
    [type="radio"]:checked ~ label ~ .contentk2 {
    z-index : 1;
    }
    [type="radio"]:checked ~ label ~ .contentk2 > * {
    opacity : 1;
    }
    @media only screen and (max-width:480px) {
    .tabk22 {
    width : 100%;
    z-index : 100;
    }
    .tabk22:last-of-type {
    width : 100%;
    z-index : 100;
    }
    .tabk22 label {
    display : block;
    min-width : 1000px;
    margin : 0 auto;
    }
    .contentk2 {
    height : 100%;
    }
    }
    
    Code (CSS):


    ################
    HTML
    <div class="tabsk2">
    <div class="tabk2">
               <input class="tabk22" type="radio" checked id="tabk2-19" name="group-tabs" >
               <label class="tabk22" for="tabk2-19"> Too much long Tab #1 Title 1</label>
               <div class="contentk2">
                   <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here </p>
               </div>
           </div>
    <div class="tabk2">
               <input class="tabk22" type="radio"  id="tabk2-234" name="group-tabs" >
               <label class="tabk22" for="tabk2-234"> Tab #2 Title </label>
               <div class="contentk2">
                   <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here </p>
               </div>
           </div>
    <div class="tabk2">
               <input class="tabk22" type="radio"  id="tabk2-359" name="group-tabs" >
               <label class="tabk22" for="tabk2-359"> Tab #3 Title  Tab #3 </label>
               <div class="contentk2">
                   <p> t Her Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here e </p>
               </div>
           </div>
    </div>
      
    
    HTML:
    Regards
     
    Last edited: Apr 8, 2015
    earngate, Apr 8, 2015 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    That's completely invalid html, as you have no form-element. Redo it.
     
    PoPSiCLe, Apr 8, 2015 IP
  3. earngate

    earngate Well-Known Member

    Messages:
    102
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Here you are, demo of main idea from
    css-tricks
    https://css-tricks.com/examples/CSSTabs/radio.php
     
    earngate, Apr 9, 2015 IP
  4. minionnz

    minionnz Greenhorn

    Messages:
    17
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    20
    #4
    Question is what do you want to do for smaller screens? Icon-based, scrolling/swipe tabs? Accordion-style? Wrap the text and fix the width of each tab?
     
    minionnz, Apr 9, 2015 IP
    kk5st and deathshadow like this.
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #5
    Or more importantly, if the developer cares about mobile, why the **** are they doing inaccessible tabbed BS in the first place?!? JUST another case of "It was stupid when done with framesets, was stupid when done using scripttardery, and now that you can use CSS3, GUESS WHAT?!?"
     
    deathshadow, Apr 9, 2015 IP
    kk5st likes this.