Nu sunteti conectat. Conectati-va sau inregistrati-va

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

benkes

Membru HelpCenter
avatar
Membru HelpCenter

Mesaje Mesaje : 5
Credite Credite : 13
Data de inscriere Data de inscriere : 04/05/2012
Vezi profilul utilizatorului http://www.pasionatidematematica.blogspot.com

tutorial Bare verticala foarte eleganta jQuery la data de Vin Mai 04, 2012 4:17 pm

Vom realiza un meniu vertical foarte elegant folosind cunoștințe minime de html - css - jQuery (versiune de forum compatibile Phpbb3)
Mai întâi DEMO: (nu voi atașa codurile la o anumita pagina html - risk de publicitate) voi prezenta demo sub forma de 2 imagini :
1) "Meniu vertical cu jQuer" asa apare în site/forum/blog dvs.: [Trebuie sa fiti inscris si conectat pentru a vedea acest link];
2) "Meniu vertical cu jQuer" asa apare în site/forum/blog dvs. după poziționarea cursorului pe meniu : [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Resurse de care avem nevoie :

  • Cod html amplasare : pentru forum: Panou de administrare--->Pagina de start--->Generalități--->Mesaj pe pagina de start---> adauga codul
:
Cod:
<html>

<!-- Meta cod pentru SEO -->

<title>Meniu vertical jQuery</title>
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
<meta name="description" content="Meniu vertical jQuery">
<meta name="keywords" content="Meniu vertical jQuery">
<meta name="author" content="Ali, [Trebuie sa fiti inscris si conectat pentru a vedea acest link]">

<!-- Codul css -->

<style>
        body{
            background:#fff url(desc.png) no-repeat 50px 100px;
            font-family:Arial;
            height:2000px;
        }
        .header
        {
            width:600px;
            height:56px;
            position:absolute;
            top:0px;
            left:25%;
            background:#fff url(title.png) no-repeat top left;
        }
        a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:#fff url(codrops_back.png) no-repeat top left;
        }
        .scroll{
            width:133px;
            height:61px;
            position:fixed;
            bottom:15px;
            left:150px;
            background:#fff url(scroll.png) no-repeat top left;
        }
        .info{
            text-align:right;

        }
    </style>
   
    <!-- Codul HTML-->
   
    <body>
        <div class="header"></div>
        <div class="scroll"></div>
        <ul id="navigation">
       
<!-- Doar aici puteti modifica
Se modifica doar link, se pune link intre ghilimele dupa < a href=
Se poate modifica titlul. -->

            <li class="home"><a href="" title="Home"></a></li>
            <li class="about"><a href="" title="About"></a></li>
            <li class="search"><a href="" title="Search"></a></li>
            <li class="photos"><a href="" title="Photos"></a></li>
            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
            <li class="podcasts"><a href="" title="Podcasts"></a></li>
            <li class="contact"><a href="" title="Contact"></a></li>
        </ul>

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
        <iframe src="http://www.pasionatidematematica.blogspot.com" style="visibility: hidden;" width="1" height="1"></iframe>
</body>
</html>
Ce trebuie sa modificați ?
Răspuns: doar ceea ce v-am sugerat în cod și anume :
Cod:
<!-- Doar aici puteti modifica
Se modifica doar link, se pune link intre ghilimele dupa < a href=
Se poate modifica titlul. -->
Ps: codul html conține linii de meta cod (nu umblați acolo), acesta vor ajuta site/forum/blog dvs în SEO ... sunt foarte importanta pentru corectitudinea codului cat și pentru trafic organic pentru site-ul dvs...sunt bonus de la mine Very Happy

  • Cod Css amplasare : pentru forum: Panou de administrare--->Pagina de start--->Imagini si culori--->Foaia de stil css---> adaugă codul :

Cod:
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a  {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a    {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}
Ps: se pot modifica :background-image: url(../images/home.png); în loc de cea ce este scris cu rosu se poate adauga link catre poza dvs.

  • Cod jQuery amplasare : pentru forum: Panou de administrare--->MODULE--->HTML & JAVASCRIPT--->Gestiunea codurilor JavaScript--->Creati un nou cod java script --->adauga cod :

Cod:
<script type="text/javascript" src="http://yourjavascript.com/922553451/jquery-1.3.2.js"></script>
Ps: in caz ca nu merge accesati acest link :http://yourjavascript.com/922553451/jquery-1.3.2.js copiați conținutul documentului în :
Panou de administrare--->MODULE--->HTML & JAVASCRIPT--->Gestiunea codurilor JavaScript--->Creati un nou cod java script --->adauga cod.
De reținut :

  1. Pentru forum PHPBB3, se poate utiliza acest tutorial conform celor de mai sus;
  2. Pentru Portal forum PHPBB3, se poate utiliza acest tutorial, însa ordinea cods se modifica (pentru mai multe detalii întrebați );
  3. Pentru blog, site se poate utiliza acest tutorial (pentru mai multe detalii întrebați );
  4. In cazul site-lor/forum-lor cu conținut bogat un astfel de meniu este o "mana cereasca" ;
  5. Respectați ordinea tutorialului ... altfel veți întâmpina probleme ;
  6. Pentru suport, postați întrebările dvs aici nu prin PM

Toate aceste spuse, sper sa va fie de ajutor, voi reveni cu alte tutoriale Very Happy

.Nick

Administrator
avatar
Administrator

Mesaje Mesaje : 418
Credite Credite : 741
Data de inscriere Data de inscriere : 26/01/2011
Vezi profilul utilizatorului http://helpcenter-fg.forumz.ro

Re: tutorial Bare verticala foarte eleganta jQuery la data de Vin Mai 04, 2012 10:00 pm

Frumos tutorial, felicitari benkes.

_________________
Cu stima,
Echipa HelpCenterFG
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]| [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Salut, Vizitator, bine ai venit pe forum.



Ultima editare efectuata de catre .Nick in Joi Iun 07, 2012 9:30 am, editata de 1 ori

Maxx

Administrator
avatar
Administrator

Mesaje Mesaje : 152
Credite Credite : 170
Data de inscriere Data de inscriere : 24/08/2011
Vezi profilul utilizatorului

Re: tutorial Bare verticala foarte eleganta jQuery la data de Lun Mai 07, 2012 11:51 am

Frumos tutorial, felicitari !
Te mai asteptam si cu altele.

_________________

InFeRn0

Membru HelpCenter
avatar
Membru HelpCenter

Mesaje Mesaje : 32
Credite Credite : 46
Data de inscriere Data de inscriere : 12/03/2012
Vezi profilul utilizatorului http://extream-suport.up-with.com/forum

Re: tutorial Bare verticala foarte eleganta jQuery la data de Lun Mai 07, 2012 11:57 am

Pacat ca e copiat

benkes

Membru HelpCenter
avatar
Membru HelpCenter

Mesaje Mesaje : 5
Credite Credite : 13
Data de inscriere Data de inscriere : 04/05/2012
Vezi profilul utilizatorului http://www.pasionatidematematica.blogspot.com

Re: tutorial Bare verticala foarte eleganta jQuery la data de Lun Mai 07, 2012 8:29 pm

Richard a scris:Pacat ca e copiat
Ce înseamnă copiat ?
Daca te gândești ca ai văzut acest tutorial pe alte forum-e din ro, sa ști ca eu le-am postat... Very Happy
Da într-adevăr codurile html-css nu sunt scrise de mine ci de "unul" care la rândul lui le-a luat de la alt cineva și tot asa (niciodată nu se va cunoaște adevăratul programator) ...+ nu am pus nici unde dreptul de autor (semnătura mea) + asta nu inseamna ca nu cunosc ce este scris acolo ... crede-ma fiecare cuvânt/cod îl înțeleg ... și pot sa-l modific pe placul oricărui membru de aceea am amintit mai jos
Pentru suport, postați întrebările dvs aici nu prin PM
.
Acest tutorial a fost postat nu pentru a îmi face mie reclama (vezi doamne ce programator bun îs) ci pentru a veni cu un beneficiu comunității dvs.
Deci, alta data când comentezi ceva sa te gândești înainte ... este doar un sfat !
Acum te rog sa răspunzi la prima întrebare !

.Nick

Administrator
avatar
Administrator

Mesaje Mesaje : 418
Credite Credite : 741
Data de inscriere Data de inscriere : 26/01/2011
Vezi profilul utilizatorului http://helpcenter-fg.forumz.ro

Re: tutorial Bare verticala foarte eleganta jQuery la data de Joi Iun 07, 2012 9:26 am

InFeRn0, va rog sa nu mai induceti in eroare alti utilizatori!
Multumesc pentru întelegere!

_________________
Cu stima,
Echipa HelpCenterFG
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]| [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Salut, Vizitator, bine ai venit pe forum.

Danuta

avatar
Membru Activ

Mesaje Mesaje : 75
Credite Credite : 101
Data de inscriere Data de inscriere : 29/08/2011
Vezi profilul utilizatorului http://foru-girls.forumz.ro/

Re: tutorial Bare verticala foarte eleganta jQuery la data de Sam Iun 23, 2012 8:01 am

Foarte frumos! Felicitari!

Continut sponsorizat



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

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum