Bine ai venit pe DesignART !
-Forumul DesignART ofera servicii gratuite in domeniile Graphic Design si Coding !
-Pentru a beneficia de aceste servicii trebuie doar sa va INREGISTRATI si/sau sa va CONECTATI
-Innainte de a incepe sa postati,va sfatuim sa cititi REGULAMENTUL forumului !

Tutorial - jQuery and CSS3 Glooey Menu

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Zeus la data de Dum Mai 01, 2011 4:39 am

Tutorial - jQuery and CSS3 Glooey Menu


Prin acest tutorial va voi arata cum sa creati unul dintre cele mai noi meniuri realizate cu ajutorul plugin-urilor jQuery si codurilor CSS,CSS3.

Acest tip de meniu se poate utiliza la crearea unui template.
Previzualizare:[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Pentru a executa cu usurinta acest meniu,intrati in:
PA => Module => HTML => Administrare Pagini HTML => +Creeaza o noua pagina HTML

Aici vom introduce urmatoarele coduri:
1.Codurile JavaScript
Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://designart.bravehost.com/jQuery_Gooey_Menu.js"></script>

2.Codurile CSS,CSS3
Cod:

<style>
/* INCEPUT MENIU */
ul.designart_menu{
        border: 1px solid #666;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
        border-radius: 12px;
        position: absolute;
         width:auto;
        top: 250px;
        left: 350px;
   float: center;
   margin: auto;
   padding: 10px;
   list-style: none;
}

ul.designart_menu li{
display: inline;
}

ul.designart_menu li a{
        margin-left: 0px;
   float: left;
   padding: 4px 9px;
        font-family: Trebuchet MS,Tahoma;
   font-size: 13px;
        font-style: italic;
   font-weight: normal;
        color: #5f5f5f;
        text-shadow: 1px 1px 1px #fff;
   text-align: center;
   text-decoration: none;
   border-right: 0px solid #000000;
}

ul.designart_menu li.active{
      position:absolute;
      width:0;
      background: rgba(133, 130, 130, .20);
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -webkit-box-shadow: inset 0px 2px 2px #6E6E6E;
      -moz-box-shadow: inset 0px 2px 2px #6E6E6E;
      box-shadow: inset 0px 2px 2px #6E6E6E;
}
</style>
/* SFARSIT MENIU */

3.Structura HTML
Cod:

<ul id="gooeymenu2" class="designart_menu">
<li><a href="http://designart.forumhit.ro/">DesignART</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:0})
</script>

Sper ca va placut acest tutorial si ca reusiti sa realizati meniul ! Bafta !
***Daca intampinati probleme sau dificultati in realizarea acestui tutorial sa rugam sa postati in categoria [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Tutorial realizat de BODO | DesignART
***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !
avatar
Zeus
Administrator
Administrator

Mesaje Mesaje : 610
Credite Credite : 817
Reputatie : 6
Varsta Varsta : 22

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Vizitato la data de Dum Mai 01, 2011 4:43 am

Stiu meniu, imi place cum lai personalizat.
Bun tutorial.
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Aleku la data de Dum Mai 01, 2011 4:49 am

Foarte frumos, îţi mulţumim.
avatar
Aleku
Gold Member
Gold Member

Mesaje Mesaje : 325
Credite Credite : 304
Reputatie : 0
Varsta Varsta : 22

http://edtutorials.forumz.ro/

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de paull la data de Dum Mai 01, 2011 6:06 am

arata foarte bine :>:> bravo !
avatar
paull
Gold Member
Gold Member

Mesaje Mesaje : 116
Credite Credite : 147
Reputatie : 0
Varsta Varsta : 23

http://tutorials-own.forumhit.ro/

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Venom la data de Lun Mai 02, 2011 9:44 am

Si asta unde o sa apara pe forum? Cum il pot vedea?
avatar
Venom
Membru DesignART
Membru DesignART

Mesaje Mesaje : 22
Credite Credite : 24
Reputatie : 0
Varsta Varsta : 27

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de DarkStar la data de Lun Mai 02, 2011 9:47 am

Am mai vazut genul asta de meniu, destul de interesant cheers
avatar
DarkStar
Gold Member
Gold Member

Mesaje Mesaje : 119
Credite Credite : 104
Reputatie : 0
Varsta Varsta : 27

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta la data de Mar Mai 31, 2011 7:53 am

toate acestea trebuie introduse intr-o pagina html?
si sa bifez ca pagina de start nu?
asta am facut dar nu merge
avatar
franta
Membru DesignART
Membru DesignART

Mesaje Mesaje : 65
Credite Credite : 95
Reputatie : 0
Varsta Varsta : 29

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de DarkStar la data de Mar Mai 31, 2011 8:20 am

Adauga codul asta intr-o pagina html

Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://designart.bravehost.com/jQuery_Gooey_Menu.js"></script>

<!-- INCEPUT MENIU -->
<style>
ul.designart_menu{
        border: 1px solid #666;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
        border-radius: 12px;
        position: absolute;
        width:auto;
        top: 250px;
        left: 350px;
  float: center;
  margin: auto;
  padding: 10px;
  list-style: none;
}

ul.designart_menu li{
display: inline;
}

ul.designart_menu li a{
        margin-left: 0px;
  float: left;
  padding: 4px 9px;
        font-family: Trebuchet MS,Tahoma;
  font-size: 13px;
        font-style: italic;
  font-weight: normal;
        color: #5f5f5f;
        text-shadow: 1px 1px 1px #fff;
  text-align: center;
  text-decoration: none;
  border-right: 0px solid #000000;
}

ul.designart_menu li.active{
      position:absolute;
      width:0;
      background: rgba(133, 130, 130, .20);
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -webkit-box-shadow: inset 0px 2px 2px #6E6E6E;
      -moz-box-shadow: inset 0px 2px 2px #6E6E6E;
      box-shadow: inset 0px 2px 2px #6E6E6E;
}
</style>
<!-- SFARSIT MENIU -->


<ul id="gooeymenu2" class="designart_menu">
<li><a href="http://designart.forumhit.ro/">DesignART</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:0})
</script>
avatar
DarkStar
Gold Member
Gold Member

Mesaje Mesaje : 119
Credite Credite : 104
Reputatie : 0
Varsta Varsta : 27

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta la data de Mar Mai 31, 2011 8:47 am

l-am adaugat si nu se vede nimic diferit a ramas la fel....
avatar
franta
Membru DesignART
Membru DesignART

Mesaje Mesaje : 65
Credite Credite : 95
Reputatie : 0
Varsta Varsta : 29

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Zeus la data de Mar Mai 31, 2011 9:00 am

Pur si simplu creeaza o noua pagina HTML,introdu codurile acolo,nu bifa nimic din optiunile de sus,lasa-le asa cum sunt si apasa PREVIZUALIZARE !
avatar
Zeus
Administrator
Administrator

Mesaje Mesaje : 610
Credite Credite : 817
Reputatie : 6
Varsta Varsta : 22

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta la data de Mar Mai 31, 2011 9:05 am

asta am si facut
Doriti sa utilizati partea de sus si de jos a paginii forumului dvs.?
Da Nu
Daca bifati "nu", va trebui sa introduceti un cod complet (cu tag-uri html, body, head...).
In acest caz, in momentul editarii paginii, editorul html este dezactivat.

Utilizati aceasta pagina ca pagina de start?
Nu Da
Daca bifati da, trebuie cel putin sa introduceti un link catre forumgratuit.ro.

le-am lasat asa cum erau ele
NU si NU
poate e de la tem am phpbb3
avatar
franta
Membru DesignART
Membru DesignART

Mesaje Mesaje : 65
Credite Credite : 95
Reputatie : 0
Varsta Varsta : 29

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Zeus la data de Mar Mai 31, 2011 9:08 am

Nu are importanta tema,din moment ce tu creezi o pagina html independenta !
Sigur gresesti sau omiti ceva !
avatar
Zeus
Administrator
Administrator

Mesaje Mesaje : 610
Credite Credite : 817
Reputatie : 6
Varsta Varsta : 22

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta la data de Joi Iun 02, 2011 5:11 am

BODO a scris:Nu are importanta tema,din moment ce tu creezi o pagina html independenta !
Sigur gresesti sau omiti ceva !
am dat creare pagina html
am adaugat codul complet pe care mi l-ati lasat mai sus
nu am bifat nicio optiune din cele care sunt acolo
daca selectez ca pagina de start merge dar eu vreau sa o pun ca meniu la forum Sad(
avatar
franta
Membru DesignART
Membru DesignART

Mesaje Mesaje : 65
Credite Credite : 95
Reputatie : 0
Varsta Varsta : 29

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de [x]sTyL[e] la data de Joi Iun 02, 2011 10:22 pm

franta a scris:
BODO a scris:Nu are importanta tema,din moment ce tu creezi o pagina html independenta !
Sigur gresesti sau omiti ceva !
am dat creare pagina html
am adaugat codul complet pe care mi l-ati lasat mai sus
nu am bifat nicio optiune din cele care sunt acolo
daca selectez ca pagina de start merge dar eu vreau sa o pun ca meniu la forum Sad(

Si daca vrei ca meniu ce cauti la pagini HTML ?
avatar
[x]sTyL[e]
Administrator
Administrator

Mesaje Mesaje : 504
Credite Credite : 560
Reputatie : 0
Localizare Localizare : Suceava

http://www.epicart.forumhit.ro

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta la data de Vin Iun 03, 2011 8:06 am

pai unde se pune?
avatar
franta
Membru DesignART
Membru DesignART

Mesaje Mesaje : 65
Credite Credite : 95
Reputatie : 0
Varsta Varsta : 29

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Kidutz la data de Sam Iun 04, 2011 9:05 am

Frumos Smile Imi place mult.
avatar
Kidutz
Gold Member
Gold Member

Mesaje Mesaje : 111
Credite Credite : 137
Reputatie : 0
Varsta Varsta : 20
Localizare Localizare : Constanta

http://www.counterzone.forum.st

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de [x]sTyL[e] la data de Sam Iun 04, 2011 10:39 am

franta a scris:pai unde se pune?

Daca vrei sa il pui ca meniu pe forum pe phpbb3 , este necesara activarea widget-urilor. Codurile CSS le pui in foaia de stil css a forumului , iar cele HTML intr-un widget/ Pentru phpbb3 codurile html le pui in template. Wink
avatar
[x]sTyL[e]
Administrator
Administrator

Mesaje Mesaje : 504
Credite Credite : 560
Reputatie : 0
Localizare Localizare : Suceava

http://www.epicart.forumhit.ro

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Dystroy la data de Joi Iun 30, 2011 9:34 am

De mult cautam acest tutorial.Iti multumesc personal pentru ca l-ai creat,felicitari BOTO,ai respectul meu
avatar
Dystroy
Membru DesignART
Membru DesignART

Mesaje Mesaje : 51
Credite Credite : 67
Reputatie : 0
Varsta Varsta : 22
Localizare Localizare : Pe glob

http://designart.forumhit.ro

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de BaCk la data de Sam Iul 02, 2011 11:50 pm

Felicitari pentru meniu.
avatar
BaCk
Membru Onorific
Membru Onorific

Mesaje Mesaje : 90
Credite Credite : 90
Reputatie : 0
Varsta Varsta : 23

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de The Godfather la data de Mier Iul 20, 2011 12:59 pm

Felicitări pentru realizare.
Arată foarte bine !

The Godfather
Gold Member
Gold Member

Mesaje Mesaje : 143
Credite Credite : 169
Reputatie : 6
Varsta Varsta : 21
Localizare Localizare : Constanța

http://designart.forumhit.ro/

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Kocos la data de Mier Iul 20, 2011 1:23 pm

Bun tutorialul , este de folos
avatar
Kocos
Gold Member
Gold Member

Mesaje Mesaje : 354
Credite Credite : 166
Reputatie : 3
Varsta Varsta : 21
Localizare Localizare : Arad

http://proaim.wow3.info

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Mr.Pagnel la data de Lun Iul 25, 2011 3:10 am

Deci asa se facea acel meniu, multumesc
avatar
Mr.Pagnel
Moderator
Moderator

Mesaje Mesaje : 345
Credite Credite : 432
Reputatie : 3
Varsta Varsta : 27
Localizare Localizare : Rm. Valcea

http://designart.forumhit.ro

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de m0Ney * la data de Lun Aug 01, 2011 2:30 am

Foarte bun și în același timp foarte simplu.
Mulțumim de munca depusă.
avatar
m0Ney *
Membru DesignART
Membru DesignART

Mesaje Mesaje : 25
Credite Credite : 30
Reputatie : 3
Varsta Varsta : 20

http://designart.forumhit.ro/

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Clik la data de Joi Aug 11, 2011 12:37 pm

Cel mai frumos Meniu care l-am vazut,bravo !
avatar
Clik
Membru DesignART
Membru DesignART

Mesaje Mesaje : 38
Credite Credite : 50
Reputatie : 0
Varsta Varsta : 20
Localizare Localizare : Oradea

http://www.gamez-muzica.forumz.ro

Sus In jos

Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum