Meniu vertical cu jQuer foarte elegant

Vezi subiectul anterior Vezi subiectul urmator In jos

Meniu vertical cu jQuer foarte elegant

Mesaj Scris de benkes la data de Lun Mai 07, 2012 11:02 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

benkes
Novice
Novice

Bara Warn : Nu are Greseli
Mesaje : 6
Reputatie : 1
Data de inscriere : 07/05/2012
Varsta : 27
Localizare : Timisoara

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

Sus In jos

Re: Meniu vertical cu jQuer foarte elegant

Mesaj Scris de Gudzone la data de Mar Mai 08, 2012 5:03 am

cheers




I GodZone




Reclama ta aici cu doar 1 euro pe luna,Y!m:hous.mussic@yahoo.com sau Skype: gheorgheci pentru detalii !!!
I GodZone

Gudzone
Administrator
Administrator

Bara Warn : Nu are Greseli
Mesaje : 890
Reputatie : 29
Data de inscriere : 14/11/2011
Varsta : 20
Localizare : Chisinau

Vezi profilul utilizatorului http://godzone.forummo.com

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum