Navigare rapidă

Ultimele subiecte
» Prezentare CHR
Scris de Zeus Vin 20 Oct - 22:13
» CHR portofoliu
Scris de CHR Dum 8 Oct - 23:09
» Tema noua pe Extrem Tutorials
Scris de CHR Dum 8 Oct - 22:55
» Cum iti creezi propriul joc online
Scris de officialzaru Joi 5 Oct - 20:26
Cuvinte-cheie

edit  

CSS-Meniu animat[phbb2,punbb]


Meniu animat pentru Phbb2 si PunBB

Salut!
In acest tutorial va voi arata cum puteti face un meniu animat pentru versiunile Phbb2 si PunBB.
Demo:Click



• Pasul 1
Mergem in
P.A=>Afisare=>Temmplaturi=>General=>index_box
si adaugati urmatorul cod:
Cod:
 <script type="text/javascript">
$(function(){
  /*
      Jquery Horizontal Slide Navigation
      webmaster@chazzuka.com
   
      October 8th 2008 @ Denpasar, Bali Paradise Island
  */
    $(".demo li a").each(function(){
  $(this).hover(function(){
      $(this).animate({width: "400px"}, {queue:false, duration:450});
      },function() {
        $(this).animate({width: "128px"}, {queue:false, duration:450});
    });
    });
  /*
      To use this you need to load jquery easing plugins
  */ 
    $(".demo.easing li a").each(function(){
  $(this).hover(function(){
      $(this).animate({width: "400px"}, {queue:false, duration:450, easing:'easeOutBack'});
      },function() {
        $(this).animate({width: "128px"}, {queue:false, duration:450, easing:'easeInBack'});
    });
    }); 
});
</script> 
 <ul class="demo">
    <li><a class="home" title="" href="http://LINK style="width: 128px; display: block; overflow: hidden;"><p><strong>Nume</strong><br>Descriere<br>Mini-drescriere</p></a></li>
    <li><a class="blog" title="" href="http://LINK style="width: 128px; display: block; overflow: hidden;"><p><strong>Nume</strong><br>Descriere<br>Mini-descriere</p></a></li>
    <li><a class="services" title="" href="http://LINK style="width: 128px; display: block; overflow: hidden;"><p><strong>Nume</strong><br>Descriere<br>Mini-descriere</p></a></li>
    <li><a class="portfolio" title="" href="http://LINK style="width: 128px; display: block; overflow: hidden;"><p><strong>Nume</strong><br>Descriere<br>Mini-descriere</p></a></li>
<li><a class="extrem" title="" href="http://LINK style="width: 128px; display: block; overflow: hidden;"><p><strong>Nume</strong><br>Descriere<br>Mini-descriere</p></a></li>
</ul>
Schimbati "LINK" cu linkul unde veti sa fie redirectionat userul care acceseaza meniul.
Si desigur Nume,Descriere si mini-descriere cu ce doriti sa adaugati.
Atentie!!:Nu uitati sa apasati pe Publica la index_box pentru ca modificarile sa fie luate in considerare.


• Pasul 2
Mergem in
P.A=>Afisare=>Culori=>CSS
si adaugam urmatorul cod:
Cod:
.demo li {
    display: inline;
    height: 90px;
    list-style: none outside none;
    margin: 0 15px 0 0;
    padding: 0;
}
.demo li a p {
    line-height: normal;
    padding: 0 0 0 135px;
}
.demo li a{
  display: inline-block!important;
  overflow: hidden;
  height: 90px;
  line-height:90px;
  width: 128px;
  white-space:nowrap;
  text-align:left;
}
.demo {
    color: #999999;
    font: italic 1.2em/1.2em Georgia,"Times New Roman",Times,serif;
    list-style: none outside none;
    margin-bottom: 10px;
    margin-top: 4px;
    padding: 0;
    text-align: center;
}
.demo {
    list-style: none outside none;
    margin: 10px 0;
    padding: 0;
}


.demo li a p strong {
    color: #336600;
    font-size: 24px;
}
ul li a.home {
    background: url("http://i40.servimg.com/u/f40/16/00/09/43/portof10.png") no-repeat scroll left top transparent;
}
ul li a.blog {
    background: url("http://i40.servimg.com/u/f40/16/00/09/43/portof10.png") no-repeat scroll left top transparent;
}
ul li a.services {
    background: url("http://i40.servimg.com/u/f40/16/00/09/43/portof10.png") no-repeat scroll left top transparent;
}
ul li a.portfolio {
    background: url("http://i40.servimg.com/u/f40/16/00/09/43/portof10.png") no-repeat scroll left top transparent;
}
ul li a.extrem{
    background: url("http://i40.servimg.com/u/f40/16/00/09/43/portof10.png") no-repeat scroll left top transparent;
}

Schimbati "http://i40.servimg.com/u/f40/16/00/09/43/portof10.png" cu imaginea dorita.
Daca intampinati greutati in a realiza acest meniu,postati si voi face si o verisune video mai explicita.

Comentariile utilizatorilor
Membru activ
avatar
la data de Lun 21 Noi - 16:22
iAngel Membru activ
Conectat
In demo,care este acel meniu?
Vizitator
avatar
la data de Lun 21 Noi - 16:25
Vizitato Vizitator
Conectat
Cel cu imaginea ET.COM .Nu uita sa treci cu mouse-ul peste el.
Vizitator
avatar
la data de Mier 23 Noi - 0:09
Vizitato Vizitator
Conectat
nu cumva lai luat depe fg-coding ? Oricum daca tu lai facut frumos.
Vizitator
avatar
la data de Mier 23 Noi - 0:23
Vizitato Vizitator
Conectat
Deci,ma omorati deja cu acest fg coding.Cine e fc coding?A inventat fg coding jquery?Scrie pe codu asta "Made in Fg Coding"?
Sa te informez pe tine,si pe toti fg coding-istii ca ,acest meniu este facut de un site numit Chazzuka,care il ofera gratuit.
Asa ma duc si eu la fgc si le zic: Mai mai mai,nu ati luat codu de pe chazzuka?Logic.Tot de pe acel site il au si ei.
Eu macar,din bun-simt,nu am eliminat numele autorului(site-ul) ca altii(fgc).
Alte intrebari ?
Vizitator
avatar
la data de Mier 23 Noi - 0:26
Vizitato Vizitator
Conectat
Nu , mersi de raspuns , puteai sa pui asta in tutorial , si atunci nu te mai intrebam
Vizitator
avatar
la data de Dum 27 Noi - 14:42
Vizitato Vizitator
Conectat
Foarte frumos bravo edge
Membru ET
avatar
la data de Joi 1 Dec - 13:43
Clik Membru ET
Conectat
Foarte frumos acest meniu !