Μη Συνδεδεμενος Παρακαλώ συνδεθείτε ή εγγραφείτε

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω  Μήνυμα [Σελίδα 1 από 1]

#1
 Admin

avatar
Admin
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]


Ένα αναδιπλωμένο μενού για κάθε 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>
CSS:
Κώδικας:

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
}

http://www.greekport.gr

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή  Μήνυμα [Σελίδα 1 από 1]


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης

Τρόποι Κοινοποίησης:
URL:
BBCode:
HTML: