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 - Colors Meniu

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Lun Mai 16, 2011 8:53 am

Tutorial - Colors Meniu



Colors Meniu
Salutare Vizitator , in acest tutorial am sa iti prezint meniul Colors Meniu si am sa te imvat si cum sa il aplici pe forumul tau.

Demo: http://emanuel-demonstrati.wikiforum.ro/h3-colors-meniu


Mod de instalare
1.CSS
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Cod:

#navigationMenu{
position:fixed;
top: 299px;
left: -36px;}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;}

#navigationMenu span{
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-o-transition: 0.25s; 
-moz-transition: 0.25s;
transition: 0.25s;}

#navigationMenu a{
background:url('http://i24.servimg.com/u/f24/16/24/00/51/butoan10.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;}


#navigationMenu a:hover span{
width:auto;
padding:0 20px;
overflow:visible; }

#navigationMenu a:hover{
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;}

#navigationMenu .home {
background-position:0 0;}

#navigationMenu .home:hover {
background-position:0 -39px;}

#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;}

#navigationMenu .about {
 background-position:-38px 0;}

#navigationMenu .about:hover {
 background-position:-38px -39px;}

#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;}

#navigationMenu .services {
background-position:-76px 0;}

#navigationMenu .services:hover {
 background-position:-76px -39px;}

#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;}

#navigationMenu .portfolio {
 background-position:-114px 0;}

#navigationMenu .portfolio:hover{
 background-position:-114px -39px;}

#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;}

#navigationMenu .contact {
 background-position:-152px 0;}

#navigationMenu .contact:hover {
background-position:-152px -39px;}

#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;}

a, a:visited,a:active {
color:#0196e3;
text-decoration:none;
outline:none;}

a:hover{
text-decoration:none;}

a img{
border:none;}


2.HTML
Adaugati codul urmator in in template-ul overall_header dupa codul

Cod:
  <!-- END hitskin_preview -->

Continutul codului.

  <!-- BEGIN switch_login_popup -->

Cod:

<ul id="navigationMenu">
<li>
            <a class="home" href="www.site.ro">
            <span>Home</span>
 </a>
</li>
 
<li>
              <a class="about" href="www.site.ro">
              <span>About</span>
</a>
</li>
 
<li>
              <a class="services" href="site.ro">
              <span>Profile</span>

</a>
</li>
 
<li>
            <a class="portfolio" href=www.site.ro">
            <span>FAQ</span>
</a>
</li>
 
<li>
        <a class="contact" href="www.site.ro">
            <span>Contact us</span>

</a>
</li>
</ul>



Tutorial realizat de Emanuel | DesignART

***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !


Ultima editare efectuata de catre Emanuel in Dum Iun 12, 2011 9:07 am, editata de 1 ori
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Aleku la data de Lun Mai 16, 2011 9:18 am

Demo:http://emanuel-demonstrati.wikiforum.ro/h3-colors-meniu
Pune spaţiu între Link şi :

Mulţumim de tutoriale, este folositor pentru o navigare mai rapidă.
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 - Colors Meniu

Mesaj Scris de DarkStar la data de Lun Mai 16, 2011 9:24 am

Codul este si pe forumgratuit, nu este facut de tine. Dar oricum, meniul asta mi se pare prea pretentios pentru forumurile de pe forumgratuit
avatar
DarkStar
Gold Member
Gold Member

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

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Lun Mai 16, 2011 9:57 am

DarkStar a scris:Codul este si pe forumgratuit, nu este facut de tine. Dar oricum, meniul asta mi se pare prea pretentios pentru forumurile de pe forumgratuit
Nu am precizat ca am creat eu meniul,eu doar am adaptat acest meniu pentru FG.
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de DarkStar la data de Lun Mai 16, 2011 10:58 am

Emanuele, nu ma prostesti tu pe mine. [Trebuie sa fiti inscris si conectat pentru a vedea acest link] Nu vad ce adaptare ai facut tu, poate cand zici adaptare te referi la copy paste
avatar
DarkStar
Gold Member
Gold Member

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

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Lun Mai 16, 2011 11:02 am

Defapt DarkStar, eu habr nu aveam de acel topic ,eu am preluat codurile meniului de aici: http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/ .Multumit?
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de [x]sTyL[e] la data de Mar Mai 24, 2011 9:33 am

DarkStar a scris:Emanuele, nu ma prostesti tu pe mine. [Trebuie sa fiti inscris si conectat pentru a vedea acest link] Nu vad ce adaptare ai facut tu, poate cand zici adaptare te referi la copy paste

Nu este de pe forumgratuit, este de la tutorialzine 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 - Colors Meniu

Mesaj Scris de Vizitato la data de Mar Mai 24, 2011 12:11 pm

nu va mai contraziceti atata codul este pe net si gata nu la facut nimeni de aici Razz
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de 4Adm la data de Dum Iun 12, 2011 8:11 am

de exemplu daca folosesc phpbb3 si nu merge sa bag la templaturi unde e overall_header unde as putea sa le bag sa imi mearga?
avatar
4Adm
Membru DesignART
Membru DesignART

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

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Dum Iun 12, 2011 9:06 am

4Adm a scris:de exemplu daca folosesc phpbb3 si nu merge sa bag la templaturi unde e overall_header unde as putea sa le bag sa imi mearga?
Incearca sa-l pui intr-un widget.
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de 4Adm la data de Dum Iun 12, 2011 10:32 am

unde ca nu prea le am cu widgeturile imi poti explica ?
avatar
4Adm
Membru DesignART
Membru DesignART

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

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de black la data de Dum Iun 12, 2011 10:57 am

se poate pune si pe versunea phubb3??
avatar
black
Membru Nou
Membru Nou

Mesaje Mesaje : 7
Credite Credite : 11
Reputatie : 0
Varsta Varsta : 20

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Bogdanell ;x la data de Dum Iun 12, 2011 11:22 am

Pe phubb3 nu se poate
avatar
Bogdanell ;x
Membru DesignART
Membru DesignART

Mesaje Mesaje : 28
Credite Credite : 32
Reputatie : 0
Varsta Varsta : 21
Localizare Localizare : Craiova

http://www.trafictv.wikiforum.ro

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de black la data de Dum Iun 12, 2011 11:47 am

aha....ok ms
avatar
black
Membru Nou
Membru Nou

Mesaje Mesaje : 7
Credite Credite : 11
Reputatie : 0
Varsta Varsta : 20

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de eu+tu la data de Joi Iun 16, 2011 6:02 am

nu merge am bagat codu la generalitati si imi mergea pana sa bag altu dar acu nu mre Sad(
avatar
eu+tu
Membru DesignART
Membru DesignART

Mesaje Mesaje : 17
Credite Credite : 32
Reputatie : 0
Varsta Varsta : 33

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Joi Iun 16, 2011 6:06 am

black te rog sa scrii corect romaneste si fara prescurtari , Bogdanell ;x va rog sa nu mai dezinformati membri !

Eu+tu pentru versiunea phpbb3 intri in Panou- Afisare-Pagina de start-generaltiti-mesajul de pe pagina de start
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de eu+tu la data de Joi Iun 16, 2011 6:12 am

imi merge dar uite cum se vede [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]


Ultima editare efectuata de catre eu+tu in Joi Iun 16, 2011 6:14 am, editata de 1 ori
avatar
eu+tu
Membru DesignART
Membru DesignART

Mesaje Mesaje : 17
Credite Credite : 32
Reputatie : 0
Varsta Varsta : 33

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Joi Iun 16, 2011 6:13 am


si incearca sa pui asta
Cod:
      <style type="text/css">
    #navigationMenu{
      position:fixed;
            top: 10px;
            left: 0px;
    }
   
    #navigationMenu li{
      list-style:none;
      height:39px;
      padding:2px;
      width:40px;
    }
   
    #navigationMenu span{
      width:0;
      left:38px;
      padding:0;
      position:absolute;
      overflow:hidden;
   
      font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
      font-size:18px;
      font-weight:bold;
      letter-spacing:0.6px;
      white-space:nowrap;
      line-height:39px;
     
      /* CSS3 Transition: */
      -webkit-transition: 0.25s;
      /*-o-transition: 0.25s;*/
     
      /* Future proofing (these do not work yet): */
      -moz-transition: 0.25s;
      transition: 0.25s;
    }
   
    #navigationMenu a{
      background:url('http://img52.imageshack.us/img52/3637/navigationf.jpg') no-repeat;
   
      height:39px;
      width:38px;
      display:block;
      position:relative;
    }
   
    /* General hover styles */
   
    #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
    #navigationMenu a:hover{
      text-decoration:none;
     
      /* CSS outer glow with the box-shadow property */
      -moz-box-shadow:0 0 5px #9ddff5;
      -webkit-box-shadow:0 0 5px #9ddff5;
      box-shadow:0 0 5px #9ddff5;
    }
   
    /* Green Button */
   
    #navigationMenu .home {  background-position:0 0;}
    #navigationMenu .home:hover {  background-position:0 -39px;}
    #navigationMenu .home span{
      background-color:#7da315;
      color:#3d4f0c;
      text-shadow:1px 1px 0 #99bf31;
    }
   
    /* Blue Button */
   
    #navigationMenu .about { background-position:-38px 0;}
    #navigationMenu .about:hover { background-position:-38px -39px;}
    #navigationMenu .about span{
      background-color:#1e8bb4;
      color:#223a44;
      text-shadow:1px 1px 0 #44a8d0;
    }
   
    /* Orange Button */
   
    #navigationMenu .services { background-position:-76px 0;}
    #navigationMenu .services:hover { background-position:-76px -39px;}
    #navigationMenu .services span{
      background-color:#c86c1f;
      color:#5a3517;
      text-shadow:1px 1px 0 #d28344;
    }
   
    /* Yellow Button */
   
    #navigationMenu .portfolio { background-position:-114px 0;}
    #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
    #navigationMenu .portfolio span{
      background-color:#d0a525;
      color:#604e18;
      text-shadow:1px 1px 0 #d8b54b;
    }
   
    /* Purple Button */
   
    #navigationMenu .contact { background-position:-152px 0;}
    #navigationMenu .contact:hover { background-position:-152px -39px;}
    #navigationMenu .contact span{
      background-color:#af1e83;
      color:#460f35;
      text-shadow:1px 1px 0 #d244a6;
    }
   
   
    a, a:visited,a:active {
      color:#0196e3;
      text-decoration:none;
      outline:none;
    }
   
    a:hover{
      text-decoration:none;
    }
   
    a img{
      border:none;
    }
   
    </style>
   
    <ul id="navigationMenu">
        <li>
          <a class="home" href="forum.htm">
                <span>Home</span>
            </a>
        </li>
     
        <li>
          <a class="about" href="#">
                <span>About</span>
            </a>
        </li>
     
        <li>
          <a class="services" href="/profile.forum?mode=editprofile">
                <span>Profile</span>
            </a>
        </li>
     
        <li>
          <a class="portfolio" href="portal.htm">
                <span>Portal</span>
            </a>
        </li>
     
        <li>
          <a class="contact" href="/contact.forum">
                <span>Contact us</span>
            </a>
        </li>
    </ul>
Link catre forumul tau te rog pentru a putea rezolva problema !


Ultima editare efectuata de catre razvan in Joi Iun 16, 2011 6:15 am, editata de 1 ori
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de eu+tu la data de Joi Iun 16, 2011 6:20 am

multumesc chiar merge
avatar
eu+tu
Membru DesignART
Membru DesignART

Mesaje Mesaje : 17
Credite Credite : 32
Reputatie : 0
Varsta Varsta : 33

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Joi Iun 16, 2011 6:20 am

Cu placere ( altadata te rog sa deschizi un subiect in sectiunea de suport )
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de eu+tu la data de Joi Iun 16, 2011 6:57 am

k
avatar
eu+tu
Membru DesignART
Membru DesignART

Mesaje Mesaje : 17
Credite Credite : 32
Reputatie : 0
Varsta Varsta : 33

Sus In jos

Re: Tutorial - Colors Meniu

Mesaj Scris de Vizitato la data de Joi Iun 16, 2011 6:58 am

Ai primt inca o mustrare pentru spam !
Eu zic eu aud ...
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Colors Meniu

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