Cerere script pentru un meniu

Vezi subiectul anterior Vezi subiectul urmator In jos

Rezolvat Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Joi 7 Ian - 17:47

Salut!
Vreau un meniu de link-uri pentru toate paginile. Am făcut niște imagini care arată  cam cum aș vrea să arate.
Momentan am nevoie de 7 link-uri în meniu, însă aș vrea să-mi spuneți cum aș putea adăuga sau șterge.
Butonul "Meniu", care va deschide meniul, să fie verde și semi-transparent. Deschiderea meniului să se facă prin click. Dacă puteți, aș vrea un efect de intrare/ieșire pentru deschiderea/închiderea meniului. După măsurătorile mele, butoanele trebuie să fie de 165 x 32 pentru a nu intra în forum-uri. Butoanele cu link-uri să nu fie 100% solide, să fie undeva pe la 70% opacity. De asemenea, vreau ca și butoanele să fie link, adică atunci când apăs pe buton, și nu pe text, să întru pe acel link.
Culorile pentru butoanele cu link-uri:
Butonul "Meniu": [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Primul de lângă "Meniu":  [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Al doilea: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Al treilea: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Al patrulea: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Al cincilea: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Al șaselea: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Al șaptelea: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]





Ultima editare efectuata de catre TheBadWorm in Joi 14 Ian - 22:01, editata de 1 ori

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de Vizitator la data de Joi 7 Ian - 18:01

Unde ai vazut meniul ala?

Vizitator
Vizitator


Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Joi 7 Ian - 18:21

Scriptul este mai jos. Eu vreau meniul cum am scris mai sus, nu așa.
CSS:
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] {
position: fixed;
bottom: 10px;
left: 10%;

width: 100px;
height: 100px;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] .trigger-button {
display: block;
width: 100px;
height: 100px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
position: absolute;
z-index: 5;
color: white;
-webkit-box-shadow: 0 0 3px rgba(50,50,50,.Cool;
-moz-box-shadow: 0 0 3px rgba(50,50,50,.Cool;
-o-box-shadow: 0 0 3px rgba(50,50,50,.Cool;
box-shadow: 0 0 3px rgba(50,50,50,.Cool;
-moz-box-shadow: 0 0 3px rgba(50,50,50,.Cool;
-o-box-shadow: 0 0 3px rgba(50,50,50,.Cool;
box-shadow: 0 0 3px rgba(50,50,50,.Cool;
text-align: center;
line-height: 100px;
font-size: 20px;
text-shadow: 0 0 3px [Trebuie sa fiti inscris si conectat pentru a vedea acest link];
cursor: default;
}

[Trebuie sa fiti inscris si conectat pentru a vedea acest link] ul {
position: absolute;
bottom: 50px;
padding: 0;
margin: 0;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] ul li {
margin: 0;
display: block;

opacity: 0.2;
position: absolute;
bottom: -60px; padding: 10px;
width: 80px;
height: 80px;
-webkit-transition: -webkit-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-moz-transition: -moz-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-o-transition: -o-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
transition: transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-webkit-transform-origin: 600px 50px;
-moz-transform-origin: 600px 50px;
-o-transform-origin: 600px 50px;
border: 0;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li {
bottom: -50px;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li:nth-child(1) {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: .9;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li:nth-child(2) {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
opacity: .8;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li:nth-child(3) {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
opacity: .7;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li:nth-child(4) {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
opacity: .6;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li:nth-child(5) {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
opacity: .5;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] ul li:nth-child(5) ~ li {
display: none;
}

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]:hover ul li:hover {
opacity: 1;
}
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] ul a {
display: block;

background-color: yellow;
border: solid 2px white;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(100%,100%,100%,.2)),
color-stop(1, rgba(100%,100%,100%,0))
);

line-height: 76px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;

text-align: center;
text-shadow: none;
text-decoration: none;
font-size: 30px;
color: [Trebuie sa fiti inscris si conectat pentru a vedea acest link];

-webkit-transition: background-color .4s;
-moz-transition: background-color .4s;
-o-transition: background-color .4s;
transition: background-color .4s;

-webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.5);
-o-box-shadow: 0 0 3px rgba(0,0,0,.5);
box-shadow: 0 0 3px rgba(0,0,0,.5);
}

[Trebuie sa fiti inscris si conectat pentru a vedea acest link] ul li:nth-child(odd) a{
background-color: teal;
}

[Trebuie sa fiti inscris si conectat pentru a vedea acest link] ul li:nth-child(n) a:hover {
background-color: green;
}
overall_header:


<div id="trigger">
<span class="trigger-button">Meniu</span>
<ul>
<li><a href="#">A</a></li>

<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
</ul>

</div>

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de Ionut la data de Joi 7 Ian - 18:59

cod-urile care le-ai postat nu functioneaza Haha Haha

Ionut
Membru Forumgratuit

Mesaje : 331
Varsta : 18
Data de inscriere : 01/11/2015
Multumiri : 30
3 avertismente

http://g-zone.bbflash.net/forum

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Joi 7 Ian - 19:56

Cod:
#trigger {
         position: fixed;
         bottom: 10px;
         left: 10%;
        
         width: 100px;
         height: 100px;
      }
      #trigger .trigger-button {
         display: block;
         width: 100px;
         height: 100px;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         -o-border-radius: 5px;
         border-radius: 5px;
         position: absolute;
         z-index: 5;
         color: white;
         -webkit-box-shadow: 0 0 3px rgba(50,50,50,.8);
         -moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
         -o-box-shadow: 0 0 3px rgba(50,50,50,.8);
         box-shadow: 0 0 3px rgba(50,50,50,.8);
         -moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
         -o-box-shadow: 0 0 3px rgba(50,50,50,.8);
         box-shadow: 0 0 3px rgba(50,50,50,.8);
         text-align: center;
         line-height: 100px;
         font-size: 20px;
         text-shadow: 0 0 3px #999;
         cursor: default;
      }
      
      #trigger ul {        
         position: absolute;
         bottom: 50px;
         padding: 0;
         margin: 0;
      }
      #trigger ul li {
         margin: 0;
         display: block;
        
         opacity: 0.2;
         position: absolute;
         bottom: -60px;         padding: 10px;
         width: 80px;
         height: 80px;
         -webkit-transition: -webkit-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         -moz-transition: -moz-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         -o-transition: -o-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         transition: transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
         -webkit-transform-origin: 600px 50px;
         -moz-transform-origin: 600px 50px;
         -o-transform-origin: 600px 50px;
         border: 0;
      }
      #trigger:hover ul li {
         bottom: -50px;
      }
      #trigger:hover ul li:nth-child(1) {
         -webkit-transform: rotate(10deg);
         -moz-transform: rotate(10deg);
         -o-transform: rotate(10deg);
         transform: rotate(10deg);
         opacity: .9;
      }
      #trigger:hover ul li:nth-child(2) {
         -webkit-transform: rotate(20deg);
         -moz-transform: rotate(20deg);
         -o-transform: rotate(20deg);
         transform: rotate(20deg);
         opacity: .8;
      }
      #trigger:hover ul li:nth-child(3) {
         -webkit-transform: rotate(30deg);
         -moz-transform: rotate(30deg);
         -o-transform: rotate(30deg);
         transform: rotate(30deg);
         opacity: .7;
      }
      #trigger:hover ul li:nth-child(4) {
         -webkit-transform: rotate(40deg);
         -moz-transform: rotate(40deg);
         -o-transform: rotate(40deg);
         transform: rotate(40deg);
         opacity: .6;
      }
      #trigger:hover ul li:nth-child(5) {
         -webkit-transform: rotate(50deg);
         -moz-transform: rotate(50deg);
         -o-transform: rotate(50deg);
         transform: rotate(50deg);
         opacity: .5;
      }
      #trigger ul li:nth-child(5) ~ li {
         display: none;
      }
      
      #trigger:hover ul li:hover {
         opacity: 1;
      }
      #trigger ul a {
        display: block;
        
        background-color: yellow;
        border: solid 2px white;
        background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, rgba(100%,100%,100%,.2)),
            color-stop(1, rgba(100%,100%,100%,0))
         );
        
           line-height: 76px;
           -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         -o-border-radius: 5px;
         border-radius: 5px;
        
        text-align: center;
        text-shadow: none;
        text-decoration: none;
        font-size: 30px;
        color: #111;
        
         -webkit-transition: background-color .4s;
         -moz-transition: background-color .4s;
         -o-transition: background-color .4s;
         transition: background-color .4s;
        
         -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
         -moz-box-shadow: 0 0 3px rgba(0,0,0,.5);
         -o-box-shadow: 0 0 3px rgba(0,0,0,.5);
         box-shadow: 0 0 3px rgba(0,0,0,.5);
      }
      
      #trigger ul li:nth-child(odd) a{
         background-color: teal;
      }
      
      #trigger ul li:nth-child(n) a:hover {
         background-color: green;
      }
overall_header
Cod:
<div id="trigger">
      <span class="trigger-button">Meniu</span>
      <ul>
         <li><a href="#">A</a></li>

         <li><a href="#">B</a></li>
         <li><a href="#">C</a></li>
         <li><a href="#">D</a></li>
         <li><a href="#">E</a></li>
         <li><a href="#">F</a></li>
      </ul>

   </div>

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Sam 9 Ian - 14:39

Hei! Nu aș putea face eu un script, pentru acest meniu, într-un program?
Învăț html, css și java de 3 luni, însă nu pot face un asemenea script, e complicat. Există programe care m-ar putea ajuta cu acest script?

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Dum 10 Ian - 18:03

Se poate face?

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Mier 13 Ian - 19:35

Cum aș putea pune meniul [Trebuie sa fiti inscris si conectat pentru a vedea acest link] ?

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de Vizitator la data de Mier 13 Ian - 19:47

@TheBadWorm a scris:Cum aș putea pune meniul acesta ?
HTML:
Cod:
<ul id="navigation">
            <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>

CSS:
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(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
}
ul#navigation .about a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
}
ul#navigation .rssfeed a  {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
}
ul#navigation .photos a    {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
}

Javascript:
Cod:
            $(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);
                    }
                );
            });

Vizitator
Vizitator


Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Mier 13 Ian - 23:00

Nu merge...

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de mr.franta la data de Joi 14 Ian - 10:21

Ce anume nu functioneaza la acel meniu? puteti pune un print screen?

mr.franta
Membru onorific
Membru onorific

masculin

Mesaje : 1072
Varsta : 28
Localizare : giurgiu
Data de inscriere : 18/02/2012
Multumiri : 69
Niciun avertisment

http://www.frannnta-design.com/

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Joi 14 Ian - 15:36

Păi nu apare, simplu... Ar fi trebuit să modific ceva în script-uri?

Pagina html apare așa:
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de mr.franta la data de Joi 14 Ian - 17:50

Unde anume vreti sa adaugat meniu? in pagina html sau undeva pe forum?

mr.franta
Membru onorific
Membru onorific

masculin

Mesaje : 1072
Varsta : 28
Localizare : giurgiu
Data de inscriere : 18/02/2012
Multumiri : 69
Niciun avertisment

http://www.frannnta-design.com/

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Joi 14 Ian - 18:30

Exact unde am spus în primul post, adică pe toate paginile în partea stângă.
Am pus javascript-ul pe "toate paginile"

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de Vizitator la data de Joi 14 Ian - 19:43

Scoate tot ce ai adaugat si adauga acest cod in overall_header:
Cod:
  
<ul id="navigation">
            <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>
<style>  
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(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
}
ul#navigation .about a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
}
</style>
<script>
  
            $(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>
Daca vrei sa il pui in pagina HTML, pe langa codul de mai sus adauga si acest cod(la inceput):
Cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Vizitator
Vizitator


Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de TheBadWorm la data de Joi 14 Ian - 21:59

Andrei34 a scris:Scoate tot ce ai adaugat si adauga acest cod in overall_header:
Cod:
  
<ul id="navigation">
            <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>
<style>  
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(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
}
ul#navigation .about a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
}
</style>
<script>
  
            $(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>
Daca vrei sa il pui in pagina HTML, pe langa codul de mai sus adauga si acest cod(la inceput):
Cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Mulțumesc, am rezolvat!
topic rezolvat

TheBadWorm
Membru Forumgratuit

Mesaje : 53
Varsta : 17
Data de inscriere : 03/01/2016
Multumiri : 0
Niciun avertisment

http://freezetime.forumz.ro

Sus In jos

Rezolvat Re: Cerere script pentru un meniu

Mesaj Scris de Emanuel la data de Joi 14 Ian - 23:40

topic rezolvat

Emanuel
Membru onorific
Membru onorific

masculin

Mesaje : 2960
Data de inscriere : 06/11/2012
Multumiri : 821
Niciun avertisment

http://www.infinigame.org/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum