phpbb2.phpdevil.com
Bine ai venit pe phpdevil.com.
. Login Register
phpbb2.phpdevil.com

Pentru iubitorii de webdesign


Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

Post: #1la data de Joi Ian 07, 2016 4:22 am

avatar

R1bb0N

Moderator
Salutare prieteni,

Pasul 1


Adauga in CSS:
Cod:

      #trigger {
         position: fixed;
         bottom: 10px;
         left: 10%;
         
         width: 100px;
         height: 100px;
      }
      #trigger .trigger-button {
         display: block;
         width: 100px;
         height: 100px;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         -o-border-radius: 5px;
         border-radius: 5px;
         position: absolute;
         z-index: 5;
         color: white;
         -webkit-box-shadow: 0 0 3px rgba(50,50,50,.8);
         -moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
         -o-box-shadow: 0 0 3px rgba(50,50,50,.8);
         box-shadow: 0 0 3px rgba(50,50,50,.8);
         -moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
         -o-box-shadow: 0 0 3px rgba(50,50,50,.8);
         box-shadow: 0 0 3px rgba(50,50,50,.8);
         text-align: center;
         line-height: 100px;
         font-size: 20px;
         text-shadow: 0 0 3px #999;
         cursor: default;
      }
      
      #trigger ul {         
         position: absolute;
         bottom: 50px;
         padding: 0;
         margin: 0;
      }
      #trigger ul li {
         margin: 0;
         display: block;
         
         opacity: 0.2;
         position: absolute;
         bottom: -60px;         padding: 10px;
         width: 80px;
         height: 80px;
         -webkit-transition: -webkit-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         -moz-transition: -moz-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         -o-transition: -o-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         transition: transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         -webkit-transform-origin: 600px 50px;
         -moz-transform-origin: 600px 50px;
         -o-transform-origin: 600px 50px;
         border: 0;
      }
      #trigger:hover ul li {
         bottom: -50px;
      }
      #trigger:hover ul li:nth-child(1) {
         -webkit-transform: rotate(10deg);
         -moz-transform: rotate(10deg);
         -o-transform: rotate(10deg);
         transform: rotate(10deg);
         opacity: .9;
      }
      #trigger:hover ul li:nth-child(2) {
         -webkit-transform: rotate(20deg);
         -moz-transform: rotate(20deg);
         -o-transform: rotate(20deg);
         transform: rotate(20deg);
         opacity: .8;
      }
      #trigger:hover ul li:nth-child(3) {
         -webkit-transform: rotate(30deg);
         -moz-transform: rotate(30deg);
         -o-transform: rotate(30deg);
         transform: rotate(30deg);
         opacity: .7;
      }
      #trigger:hover ul li:nth-child(4) {
         -webkit-transform: rotate(40deg);
         -moz-transform: rotate(40deg);
         -o-transform: rotate(40deg);
         transform: rotate(40deg);
         opacity: .6;
      }
      #trigger:hover ul li:nth-child(5) {
         -webkit-transform: rotate(50deg);
         -moz-transform: rotate(50deg);
         -o-transform: rotate(50deg);
         transform: rotate(50deg);
         opacity: .5;
      }
      #trigger ul li:nth-child(5) ~ li {
         display: none;
      }
      
      #trigger:hover ul li:hover {
         opacity: 1;
      }
      #trigger ul a {
        display: block;
        
        background-color: yellow;
        border: solid 2px white;
        background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, rgba(100%,100%,100%,.2)),
            color-stop(1, rgba(100%,100%,100%,0))
         );
        
           line-height: 76px;
           -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         -o-border-radius: 5px;
         border-radius: 5px;
        
        text-align: center;
        text-shadow: none;
        text-decoration: none;
        font-size: 30px;
        color: #111;
        
         -webkit-transition: background-color .4s;
         -moz-transition: background-color .4s;
         -o-transition: background-color .4s;
         transition: background-color .4s;
         
         -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
         -moz-box-shadow: 0 0 3px rgba(0,0,0,.5);
         -o-box-shadow: 0 0 3px rgba(0,0,0,.5);
         box-shadow: 0 0 3px rgba(0,0,0,.5);
      }
      
      #trigger ul li:nth-child(odd) a{
         background-color: teal;
      }
      
      #trigger ul li:nth-child(n) a:hover {
         background-color: green;
      }

Pasul 2


Adauga in overall_header:
Cod:


   <div id="trigger">
      <span class="trigger-button">Meniu</span>
      <ul>
         <li><a href="#">A</a></li>

         <li><a href="#">B</a></li>
         <li><a href="#">C</a></li>
         <li><a href="#">D</a></li>
         <li><a href="#">E</a></li>
         <li><a href="#">F</a></li>
      </ul>

   </div>

Previzualizare:http://board.realmsn.com/h20-meniu
Autor:Seamus P. H. Leahy

Vezi profilul utilizatorului

Post: #2la data de Joi Ian 07, 2016 8:02 am

avatar

Lcnn

Administrator
Interesant meniu,css3 asta face minuni Smile)

Vezi profilul utilizatorului http://phpbb2.phpdevil.com

Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum