Tabs ( Satura pārslēdzējs )

Lappuse 1 no 1
1

uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU SATURA PILNVEIDE » uCoz » Tabs ( Satura pārslēdzējs )

Ken_D

Pirmdiena, 09.03.2015, 5:44:45 | Ieraksts #1

VECĀ MIESA

Foruma ieraksti: 982

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@Ken_D raksta .. :

Ievietojam kodu tur, kur vēlamies redzēt.

HTML

Code

<div class="area-total-abas">
   <div class="lista-abas amimacao-flip">
    <input type="radio" name="lista-abas" checked id="aba-1" class="aba-1">
    <label for="aba-1"><span><span>Tab #1</span></span></label>
    <input type="radio" name="lista-abas" id="aba-2" class="aba-2">
    <label for="aba-2"><span><span>Tab #2</span></span></label>
    <input type="radio" name="lista-abas" id="aba-3" class="aba-3">
    <label for="aba-3"><span><span>Tab #3</span></span></label>
    <input type="radio" name="lista-abas" id="aba-4" class="aba-4">
    <label for="aba-4"><span><span>Tab #4</span></span></label>
    <ul>
     <li class="aba-1">
      <div class="conteudo">
       <h1>Virsraksts</h1>
       <p>Tavs teksts</p>
       <p>Teksts #2</p>
      </div>
     </li>
     <li class="aba-2">
      <div class="conteudo">
       <h1>Virsraksts #2</h1>
       <p>Tavs teksts</p>
       <p>Teksts #2</p>

      </div>
     </li>
     <li class="aba-3">
      <div class="conteudo">
       <h1>Virsraksts #3</h1>
       <p>Tavs teksts</p>
       <p>Teksts #2</p>
      </div>
     </li>
     <li class="aba-4">
      <div class="conteudo">
       <h1>Virsraksts #4</h1>
       <p>Tavs teksts</p>
       <p>Teksts #2</p>
      </div>
     </li>
    </ul>
   </div>
</div>

CSS

Code

body {
    background-color:#eee
}
.area-total-abas {
    width: 630px;
    margin: 100px auto;
    min-height: 300px
}
.lista-abas, .lista-abas * {
   margin:0;
   padding:0;
   outline:none;
   border:0;
   background:none
}
.lista-abas {
   position:relative;
   font-size:0;
   text-align:left;
   color:#666
}
.lista-abas > input {
   position:absolute;
   display:none
}
.lista-abas > label {
   position:relative;
   z-index:1;
   display:inline-block;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   padding:1px;
   padding-top:0;
   padding-left:0;
   font-size:13px;
   line-height:45px;
   cursor:pointer
}
.lista-abas > label span {
   display:block;
   padding:5px;
   background:rgba(255, 255, 255, .9)
}
.lista-abas > label span span {
   padding:0 14px;
   background:transparent;
   transition:background .3s, color .4s;
   -o-transition:background .3s, color .4s;
   -ms-transition:background .3s, color .4s;
   -moz-transition:background .3s, color .4s;
   -webkit-transition:background .3s, color .4s
}
.lista-abas > label:hover span span {
   background:#3498db;
   color:#fff
}
.lista-abas > input:checked + label span span {
   background:#3498db;
   color:#fff
}
.lista-abas > ul {
   list-style:none;
   position:relative;
   display:block;
   font-size:13px
}
.lista-abas > ul > li {
   position:absolute;
   top:0;
   left:0;
   width:626px;
   overflow:auto;
   padding:20px 25px 25px;
   background:rgba(255, 255, 255, .9);
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   opacity:0;
   -o-transform-origin:0% 0%;
   -ms-transform-origin:0% 0%;
   -moz-transform-origin:0% 0%;
   -webkit-transform-origin:0% 0%;
   -o-transition:opacity .8s, -o-transform .8s;
   -ms-transition:opacity .8s, -ms-transform .8s;
   -moz-transition:opacity .8s, -moz-transform .8s;
   -webkit-transition:opacity .8s, -webkit-transform .8s
}
.lista-abas > .aba-1:checked ~ ul > .aba-1,
.lista-abas > .aba-2:checked ~ ul > .aba-2,
.lista-abas > .aba-3:checked ~ ul > .aba-3,
.lista-abas > .aba-4:checked ~ ul > .aba-4 {
   position:relative;
   z-index:1;
   opacity:1
}
.conteudo {
   width:600px;
   position:relative;
   line-height:20px
}
.pagina-url {
   float:right;
   margin-top:15px
}
.amimacao-flip > ul {
   perspective:2000px;
   -o-perspective:2000px;
   -ms-perspective:2000px;
   -moz-perspective:2000px;
   -webkit-perspective:2000px;
   perspective-origin:50% 50%;
   -o-perspective-origin:50% 50%;
   -ms-perspective-origin:50% 50%;
   -moz-perspective-origin:50% 50%;
   -webkit-perspective-origin:50% 50%
}
.amimacao-flip > ul > li {
   -o-transform:rotateX(-90deg);
   -ms-transform:rotateX(-90deg);
   -moz-transform:rotateX(-90deg);
   -webkit-transform:rotateX(-90deg)
}
.amimacao-flip > .aba-1:checked ~ ul > .aba-1,
.amimacao-flip > .aba-2:checked ~ ul > .aba-2,
.amimacao-flip > .aba-3:checked ~ ul > .aba-3,
.amimacao-flip > .aba-4:checked ~ ul > .aba-4 {
   -o-transform:rotateX(0deg);
   -ms-transform:rotateX(0deg);
   -moz-transform:rotateX(0deg);
   -webkit-transform:rotateX(0deg);
   -o-transition-delay:0.2s;
   -ms-transition-delay:0.2s;
   -moz-transition-delay:0.2s;
   -webkit-transition-delay:0.2s
}

Pielikumi: 4814363.png (6.1 Kb) · 4321260.png (8.7 Kb)

Paraksta nav

Antikrists

Otrdiena, 10.03.2015, 1:31:10 | Ieraksts #2

FORUMA APSARGS

Foruma ieraksti: 606

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@Antikrists raksta .. :

Vari klāt pie nosaukuma pierakstīt satura pārslēdzēji jo pats tā meklēju reiz.

Kkas man taml ir

Code

<div align="center">
<div id="tabs-1">
<div class="tabs-center-dm">
<ul class="tabs-ul">
     <li class="li-1"><a href="#cell1">Filmas</a></li>
     <li class="li-2"><a href="#cell2">Фильмы</a></li>
     <li class="li-3"><a href="#cell3">Movies</a></li>
     <li class="li-4"><a href="#cell4">TV Shows</a></li>
     <li class="li-5"><a href="#cell5">Video</a></li>
</ul>

<div class="tabs-content" id="cell1">$MYINF_x$</div>

<div class="tabs-content" id="cell2">$MYINF_x$</div>

<div class="tabs-content" id="cell3">$MYINF_x$</div>

<div class="tabs-content" id="cell4">$MYINF_x$</div>

<div class="tabs-content" id="cell5">$MYINF_x$</div>
</div>
</div>
<style type="text/css">/* Таbi
------------------------------------------*/
#tabs-1 {
     float:left;
     width:620px;
     overflow: hidden;
     border: 5px solid #000000;
     border-radius:1px;
}

.tabs-ul{
     list-style:none;
     margin: 53;
     padding: 0;
}

.tabs-ul li a {
     float:left;
     width:100px;
     padding: 18px 0px 18px 0px;
     text-align:center;
     background: #ED2111;
     border-right: 1px solid #F1230E;
}

.li-1 a {border-bottom: 2px solid #000000;}
.li-2 a {border-bottom: 2px solid #000000;}
.li-3 a {border-bottom: 2px solid #000000;}
.li-4 a {border-bottom: 2px solid #000000; border-right: none!important;}

.tabs-ul li a.selected,ul
.tabs-ul li a.selected:hover {background:#F81D06; border-bottom: 2px solid #fff;}
.tabs-ul li a:hover {background:#F81D06;}
.tabs-ul li a:focus {outline: 0;}

.tabs-content {
     float:left;

     text-align:left;
     padding: 10px 15px 10px 15px;
     }
</style>
<script type="text/javascript" src="/tabs.js"></script></div>

Lejuplādēt

Saglabāt failu menidžerī un gatvs.

Iznākums