Tabs browsing with HTML & CSS3
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Τετ Αυγ 30, 2017 12:21 am
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
Ένα αναδιπλωμένο μενού για κάθε site.
Ένα αναδιπλωμένο μενού για κάθε site.
- Κώδικας:
<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>Simples slideshow</span></span></label>
<input type="radio" name="lista-abas" id="aba-2" class="aba-2">
<label for="aba-2"><span><span>Algoritmo de Levenshtein</span></span></label>
<input type="radio" name="lista-abas" id="aba-3" class="aba-3">
<label for="aba-3"><span><span>Barra de progresso</span></span></label>
<input type="radio" name="lista-abas" id="aba-4" class="aba-4">
<label for="aba-4"><span><span>www.GreekPort.gr</span></span></label>
<ul>
<li class="aba-1">
<div class="conteudo">
<h1>Simples slideshow</h1>
<p>Mais uma postagem simples e bem usual. Um sistema de slideshow fácil, rápido e leve, apenas com jQuery e CSS.</p>
<p>Poderá ser usado em banners laterais, animações de postagens e etc. </p>
<p>Iniciando, vamos montar o CSS que definará a estrutura final do slide... </p>
</div>
</li>
<li class="aba-2">
<div class="conteudo">
<h1>Algoritmo de Levenshtein</h1>
<p>Atualmente fazer buscas on-line tem se tornado algo muito comum, quase tudo na internet gira em torno de simples buscas. </p>
<p>Então decidi publicar um sistema simples, porém muito interessante que deixará seu sistema de busca muito legal. </p>
<p> O PHP possui uma função nativa, levenshtein. seu manual mostra todos os detalhes do seu uso e implementação. </p>
</div>
</li>
<li class="aba-3">
<div class="conteudo">
<h1>Barra de progresso</h1>
<p>Uma barra de progresso pode ser um processo importante ao ocultar o carregamento de páginas ou/e arquivos. </p>
<p>Então ter uma barra de progresso responsiva e sem usar Jquery, apenas usando CSS3 e JavaScript. Isso sem dúvida deixaria a sua aplicação um pouquinho mais leve. </p>
</div>
</li>
<li class="aba-4">
<div class="conteudo">
<h1>www.GreekPort.gr</h1>
<p>A postagem de hoje aborda um ponto importante para nós, que temos servidores públicos, que qualquer um pode acessar, comentar e etc.</p>
<p>Com esse sistema, sem dúvida seus formulários ganharão mais segurança contra spammers. </p>
</div>
</li>
</ul>
</div>
</div>
- Κώδικας:
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
}
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
