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 !


Alăturați-vă forumului, este rapid și ușor

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 !
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Tutorial - jQuery and CSS3 Glooey Menu

+11
The Godfather
BaCk
Dystroy
Kidutz
[x]sTyL[e]
franta
DarkStar
Venom
paull
Aleku
Zeus
15 participanți

In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Zeus 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.catsboard.com/">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 !
Zeus
Zeus
Administrator
Administrator

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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


Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

http://edtutorials.forumz.ro/

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta 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
franta
franta
Membru DesignART
Membru DesignART

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de DarkStar 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.catsboard.com/">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>
DarkStar
DarkStar
Gold Member
Gold Member

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Zeus 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 !
Zeus
Zeus
Administrator
Administrator

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta 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
franta
franta
Membru DesignART
Membru DesignART

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Zeus 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 !
Zeus
Zeus
Administrator
Administrator

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de franta 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(
franta
franta
Membru DesignART
Membru DesignART

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de [x]sTyL[e] 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 ?
[x]sTyL[e]
[x]sTyL[e]
Administrator
Administrator

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

http://www.epicart.forumhit.ro

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

pai unde se pune?
franta
franta
Membru DesignART
Membru DesignART

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

http://www.counterzone.forum.st

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de [x]sTyL[e] 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
[x]sTyL[e]
[x]sTyL[e]
Administrator
Administrator

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

http://www.epicart.forumhit.ro

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Dystroy 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
Dystroy
Dystroy
Membru DesignART
Membru DesignART

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

https://designart.catsboard.com

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

Felicitari pentru meniu.
BaCk
BaCk
Membru Onorific
Membru Onorific

Mesaje Mesaje : 90
Credite Credite : 90
Reputatie : 0
Varsta Varsta : 30

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

Felicitări pentru realizare.
Arată foarte bine !
avatar
The Godfather
Gold Member
Gold Member

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

https://designart.catsboard.com/

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

http://proaim.wow3.info

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

https://designart.catsboard.com

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

https://designart.catsboard.com/

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

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

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

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

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

Sus In jos

Tutorial - jQuery and CSS3 Glooey Menu Empty Re: Tutorial - jQuery and CSS3 Glooey Menu

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum