Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR CSS

css responsive tabs

<div class="cd-tabs js-cd-tabs container max-width-md">
  <nav class="cd-tabs__navigation">
    <ul class="cd-tabs__list">
      <li>
        <a href="#tab-inbox" class="cd-tabs__item cd-tabs__item--selected">
          <svg aria-hidden="true" class="icon icon--xs"><path d="M15,0H1C0.4,0,0,0.4,0,1v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V1C16,0.4,15.6,0,15,0z M14,2v7h-3 c-0.6,0-1,0.4-1,1v2H6v-2c0-0.6-0.4-1-1-1H2V2H14z"></path></svg>
          <span>Inbox</span>
        </a>
      </li>

      <li>
        <!-- ... -->
      </li>

      <!-- ... -->
    </ul> <!-- cd-tabs__list -->
  </nav>

  <ul class="cd-tabs__panels">
    <li id="tab-inbox" class="cd-tabs__panel cd-tabs__panel--selected text-component">
      <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

       <!-- ... -->
    </li>

    <li id="tab-new" class="cd-tabs__panel text-component">
       <!-- ... -->
    </li>

     <!-- ... -->
  </ul> <!-- cd-tabs__panels -->
</div>
 
PREVIOUS NEXT
Tagged: #css #responsive #tabs
ADD COMMENT
Topic
Name
4+8 =