CSS-Meniu animat[phbb2,punbb]

Meniu animat pentru Phbb2 si PunBB

Salut! CSS-Meniu animat[phbb2,punbb] 296278

In acest tutorial va voi arata cum puteti face un meniu animat pentru versiunile Phbb2 si PunBB.
Demo:[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

• Pasul 1
Mergem in P.A=>Afisare=>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]Temmplaturi=>General=>index_box
si adaugati urmatorul cod:

Cod:

 <script type="text/javascript">
$(function(){
   /*
      Jquery Horizontal Slide Navigation
      [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
    
      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. CSS-Meniu animat[phbb2,punbb] 230108

Atentie!!:Nu uitati sa apasati pe [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Publica la index_box pentru ca modificarile sa fie luate in considerare.

• Pasul 2
Mergem in
P.A=>Afisare=>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]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 "https://i.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. CSS-Meniu animat[phbb2,punbb] 230108

Comentarii

In demo,care este acel meniu?

Re: CSS-Meniu animat[phbb2,punbb]
iAngelLun 21 Noi - 16:22

Cel cu imaginea ET.COM .Nu uita sa treci cu mouse-ul peste el.

Re: CSS-Meniu animat[phbb2,punbb]
VizitatoLun 21 Noi - 16:25

nu cumva lai luat depe fg-coding ? Oricum daca tu lai facut frumos.

Re: CSS-Meniu animat[phbb2,punbb]
VizitatoMier 23 Noi - 0:09

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 ?