Bara de Meniu - Comunitatea uCoz

Pagina 1 din 1
1

Bara de Meniu

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 1 | 10:47 AM 08/05/2013

Hristos a Inviat ( in primul rand )

Am si eu o curiozitate si as vrea sa aflu cum as putea so pun in aplicare : o so i-au " batraneste "
Bara de Meniu : Pagina principala , forum , blog , contactati-ne eu vreau sa fac urmatorul lucru cand dai cu mausului pe butonul de pagina pricipala as vrea sa-mi apara dedesupt la aceasta pagina pe orizontala alte paginii .

Crede-ti ca se poate face asa ceva ?
sper ca ati inteles cam ce as vrea eu sa fac .

ArtyRo

Postări: 3502

Reputație: 140

Mesaj # 2 | 11:18 AM 08/05/2013

AdryanAdy, se poate, trebuie sa cunoasteti css-ul

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 3 | 3:50 PM 09/05/2013

Sincer sunt linie paralela sad

:( dar ma poti ajuta sa-mi zici cum se face si poate gasesc o pers. care stie sa lucreze si ma ajuta in privinta asta .

Adăugat (09/05/2013, 2:50 PM)
---------------------------------------------
Mai putea ajuta cu-n tuturorial in privinta asta Musantinu ???

Raver

Postări: 1227

Reputație: 70

Mesaj # 4 | 4:44 PM 09/05/2013

AdryanAdy, dacă vrei să obții acest rezultat: http://screencast.com/t/DwY1zco3aF , poți folosi în Panoul de Control -> Design-> Administrarea Design-ului (CSS) ->

Cod

#mainmenu{
      position:relative;
      border: 1px solid #222;
      background-color: #111;
      background-image: -moz-linear-gradient(#444, #111);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
      background-image: -webkit-linear-gradient(#444, #111);
      background-image: -o-linear-gradient(#444, #111);
      background-image: -ms-linear-gradient(#444, #111);
      background-image: linear-gradient(#444, #111);
      border-radius: 6px;
      -moz-border-radius: 6px;
      -o-border-radius: 6px;
      -webkit-border-radius: 6px;
      -ms-border-radius: 6px;
      box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
      -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
      -o-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
      -ms-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
      -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
      height:40px;

      padding:0;
      z-index:10
}
#mainmenu ul,
#mainmenu ul ul {
      list-style:none;
      padding:0;
      margin:0;
}
#mainmenu ul {
      clear:left;
      position:relative;
      right:50%;
      height:40px;
      float:right;
      text-align:center;
      font:12px Arial, Helvetica, sans-serif;
      text-transform:uppercase;
}
#mainmenu ul li {
      border-right: 1px solid #222;
      box-shadow: 1px 0 0 #444;
      -moz-box-shadow: 1px 0 0 #444;
      -o-box-shadow: 1px 0 0 #444;
      -ms-box-shadow: 1px 0 0 #444;
      -webkit-box-shadow: 1px 0 0 #444;
      position:relative;
      left:50%;
      float:left;
      height:40px;
      padding:0;
      margin:0
}
#mainmenu ul li:last-child {
      border:none;
      box-shadow:none
}
#mainmenu ul li a {
      display:block;
      color: #ccc;
      text-decoration: none;
      padding:13px 20px
}
#mainmenu ul li a:hover {
      background-color: #0186BA;
      background-image: -moz-linear-gradient(#04acec,  #0186ba);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
      background-image: -webkit-linear-gradient(#04acec, #0186ba);
      background-image: -o-linear-gradient(#04acec, #0186ba);
      background-image: -ms-linear-gradient(#04acec, #0186ba);
      background-image: linear-gradient(#04acec, #0186ba);
      color: #fafafa
}
#mainmenu ul li:hover > ul {
      opacity: 1;
      visibility: visible;
      margin: 0;
}


#mainmenu ul li ul {
      background: #444;
      background: -moz-linear-gradient(#444, #111);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
      background: -webkit-linear-gradient(#444, #111);
      background: -o-linear-gradient(#444, #111);
      background: -ms-linear-gradient(#444, #111);
      background: linear-gradient(#444, #111);
      border-radius: 3px;
      -moz-border-radius: 3px;
      -o-border-radius: 3px;
      -ms-border-radius: 3px;
      -webkit-border-radius: 3px;
      transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      text-transform:none;
      opacity: 0;
      visibility: hidden;
      position:absolute;
      left:0;
      top:40px;
      font-size:12px;
      height:auto;
      width:150px
}
#mainmenu ul li ul li {
      border:none;
      box-shadow: 0 1px 0 #111, 0 2px 0 #666;
      -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
      -o-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
      -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
      -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
      position:relative;
      left:0;
      float:none;
      height:auto;
      margin:0;
      text-align:left !important;
}
#mainmenu ul li ul li:last-child {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
}
#mainmenu ul li ul li a {
      padding:10px 8px;
      border:none
}


#mainmenu ul li ul li ul {
      top: 0;
      left: 150px;
      margin: 0 0 0 20px;
      _margin: 0; /*IE6 only*/
      box-shadow: -1px 0 0 rgba(255,255,255,.3);
      -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
      -o-box-shadow: -1px 0 0 rgba(255,255,255,.3);
      -ms-box-shadow: -1px 0 0 rgba(255,255,255,.3);
      -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#mainmenu ul ul li:first-child > a {
      border-radius: 3px 3px 0 0;
      -moz-border-radius: 3px 3px 0 0;
      -o-border-radius: 3px 3px 0 0;
      -ms-border-radius: 3px 3px 0 0;
      -webkit-border-radius: 3px 3px 0 0;
}
#mainmenu ul ul li:first-child > a:after {
      content: '';
      position: absolute;
      left: 40px;
      top: -6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #444;
}
#mainmenu ul ul ul li:first-child a:after {
      left: -6px;
      top: 50%;
      margin-top: -6px;
      border-left: 0;
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-right: 6px solid #3b3b3b;
}
#mainmenu ul ul li:first-child a:hover:after {border-bottom-color: #04acec}

#mainmenu ul ul ul li:first-child a:hover:after {
      border-right-color: #0299d3;
      border-bottom-color: transparent;
}
#mainmenu ul ul li:last-child > a {
      -moz-border-radius: 0 0 3px 3px;
      -webkit-border-radius: 0 0 3px 3px;
      border-radius: 0 0 3px 3px;

Pentru Header (partea superioară a website-ului) adaugă:

Cod

Câteva cursuri utile de CSS/HTML pot fi găsite aici.

Be the change you want to see in the world. M Gandhi.

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 5 | 6:35 PM 10/05/2013

Rever am scris codu dat de tine

Cod

#mainmenu{
       position:relative;
       border: 1px solid #222;
       background-color: #111;
       background-image: -moz-linear-gradient(#444, #111);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
       background-image: -webkit-linear-gradient(#444, #111);
       background-image: -o-linear-gradient(#444, #111);
       background-image: -ms-linear-gradient(#444, #111);
       background-image: linear-gradient(#444, #111);
       border-radius: 6px;
       -moz-border-radius: 6px;
       -o-border-radius: 6px;
       -webkit-border-radius: 6px;
       -ms-border-radius: 6px;
       box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       -o-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       -ms-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       height:40px;

       padding:0;
       z-index:10
  }
  #mainmenu ul,
  #mainmenu ul ul {
       list-style:none;
       padding:0;
       margin:0;
  }
  #mainmenu ul {
       clear:left;
       position:relative;
       right:50%;
       height:40px;
       float:right;
       text-align:center;
       font:12px Arial, Helvetica, sans-serif;
       text-transform:uppercase;
  }
  #mainmenu ul li {
       border-right: 1px solid #222;
       box-shadow: 1px 0 0 #444;
       -moz-box-shadow: 1px 0 0 #444;
       -o-box-shadow: 1px 0 0 #444;
       -ms-box-shadow: 1px 0 0 #444;
       -webkit-box-shadow: 1px 0 0 #444;
       position:relative;
       left:50%;
       float:left;
       height:40px;
       padding:0;
       margin:0
  }
  #mainmenu ul li:last-child {
       border:none;
       box-shadow:none
  }
  #mainmenu ul li a {
       display:block;
       color: #ccc;
       text-decoration: none;
       padding:13px 20px
  }
  #mainmenu ul li a:hover {
       background-color: #0186BA;
       background-image: -moz-linear-gradient(#04acec,  #0186ba);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
       background-image: -webkit-linear-gradient(#04acec, #0186ba);
       background-image: -o-linear-gradient(#04acec, #0186ba);
       background-image: -ms-linear-gradient(#04acec, #0186ba);
       background-image: linear-gradient(#04acec, #0186ba);
       color: #fafafa
  }
  #mainmenu ul li:hover > ul {
       opacity: 1;
       visibility: visible;
       margin: 0;
  }


  #mainmenu ul li ul {
       background: #444;
       background: -moz-linear-gradient(#444, #111);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
       background: -webkit-linear-gradient(#444, #111);
       background: -o-linear-gradient(#444, #111);
       background: -ms-linear-gradient(#444, #111);
       background: linear-gradient(#444, #111);
       border-radius: 3px;
       -moz-border-radius: 3px;
       -o-border-radius: 3px;
       -ms-border-radius: 3px;
       -webkit-border-radius: 3px;
       transition: all .2s ease-in-out;
       -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
       -ms-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       text-transform:none;
       opacity: 0;
       visibility: hidden;
       position:absolute;
       left:0;
       top:40px;
       font-size:12px;
       height:auto;
       width:150px
  }
  #mainmenu ul li ul li {
       border:none;
       box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       -o-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       position:relative;
       left:0;
       float:none;
       height:auto;
       margin:0;
       text-align:left !important;
  }
  #mainmenu ul li ul li:last-child {
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       box-shadow: none;
  }
  #mainmenu ul li ul li a {
       padding:10px 8px;
       border:none
  }


  #mainmenu ul li ul li ul {
       top: 0;
       left: 150px;
       margin: 0 0 0 20px;
       _margin: 0; /*IE6 only*/
       box-shadow: -1px 0 0 rgba(255,255,255,.3);
       -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
       -o-box-shadow: -1px 0 0 rgba(255,255,255,.3);
       -ms-box-shadow: -1px 0 0 rgba(255,255,255,.3);
       -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
  }

  #mainmenu ul ul li:first-child > a {
       border-radius: 3px 3px 0 0;
       -moz-border-radius: 3px 3px 0 0;
       -o-border-radius: 3px 3px 0 0;
       -ms-border-radius: 3px 3px 0 0;
       -webkit-border-radius: 3px 3px 0 0;
  }
  #mainmenu ul ul li:first-child > a:after {
       content: '';
       position: absolute;
       left: 40px;
       top: -6px;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-bottom: 6px solid #444;
  }
  #mainmenu ul ul ul li:first-child a:after {
       left: -6px;
       top: 50%;
       margin-top: -6px;
       border-left: 0;
       border-bottom: 6px solid transparent;
       border-top: 6px solid transparent;
       border-right: 6px solid #3b3b3b;
  }
  #mainmenu ul ul li:first-child a:hover:after {border-bottom-color: #04acec}

  #mainmenu ul ul ul li:first-child a:hover:after {
       border-right-color: #0299d3;
       border-bottom-color: transparent;
  }
  #mainmenu ul ul li:last-child > a {
       -moz-border-radius: 0 0 3px 3px;
       -webkit-border-radius: 0 0 3px 3px;
       border-radius: 0 0 3px 3px;

nu l-am gresit cu nimic , si tot meniu intial imi apare sad

vrand sa-mi iasa ceva de genu :

Raver

Postări: 1227

Reputație: 70

Mesaj # 6 | 4:32 PM 11/05/2013

AdryanAdy, mergi în Panoul de Control -> Design-> Administrarea Design-ului (CSS) -> Introdu la finalul acestui fișier codul CSS de mai sus după care Salvează.

Mergi apoi în Panoul de Control -> "Design" (Adm. bar) -> "Administrarea design-ului (șabloane)" -> "Secțiuni globale" -> "partea superioară a website-ului" și introdu codul HTML tot la sfârșitul câmpului de acolo, după care salvează.

După ce ai făcut asta, meniul va apărea sub textul "Site-ul meu",

Dă-ne de știre dacă a funcționat acum. Oricum, trebuie să urmezi și niște cursuri de HTML/CSS, pentru că te vor ajuta să te descurci singur, pe viitor!

Be the change you want to see in the world. M Gandhi.

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 7 | 5:40 PM 11/05/2013

Exista cumva cum pot sa copiez codul de aici si sa-l pun in Panoul de control ca la mine faza cu Copy-Past nu prea merge .... si daca fereasca Dumnezeu mai si gresesc un . sau , scriu codu acela del visez noaptea .

Raver

Postări: 1227

Reputație: 70

Mesaj # 8 | 10:08 PM 11/05/2013

AdryanAdy, verifică acum și spune-ne dacă ai obținut rezultatul pe care îl doreai.

Be the change you want to see in the world. M Gandhi.

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 9 | 1:06 PM 13/05/2013

Unde trebuie sa intru sa iau acele " setarii " care duce catre fiecare pagina si sa le bag in setarile care mi le-a dat Raver ca sa ma duca la paginile care doresc eu ??

Raver

Postări: 1227

Reputație: 70

Mesaj # 10 | 2:50 PM 13/05/2013

AdryanAdy, explică te rugăm mai detaliat ce rezultat ai nevoie să obții pentru că nu prea înțelegem momentan..Mai mult ar fi util să ne pui la dispoziție o structură clară a meniurilor și submeniurilor pe care o dorești..

Be the change you want to see in the world. M Gandhi.

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 11 | 1:58 AM 15/05/2013

Imi cer eu scuze ca n-am fost destul de explicit de prima data .
Acesta e site-ul [url]=http://fullextrem.ucoz.ro/][/url] , intial cand dai de exemplu pe Forum te trimite pe pagina forumului ... eu vreau sa mut totul sus ; adica dupa cum se vede . Eu sus deja am notat cam unde ar trebui puse fiecare .

Intrebarea si nelamurirea e urmatoarea :
Unde ar trebui sa intru sa i-au setarile de la Pagina Principala , Blog , Forum sa le pun sus acolo.

Si pe urma dupa i-au acel cod ( exemplu Forum ) unde ar trebui sa intru sa-l pun in : Panoul de Control -> Design-> Administrarea Design-ului (CSS) sau in Partea superioara a site-ului
sper ca acu am explicat mai bine ce as dori

Adăugat (15/05/2013, 0:58 AM)
---------------------------------------------
Va rog din suflet dati-mi si mie o lamurire ( as putea reface ceva ce dintr-o prostie am stricat ) sau mai bine zis in ideea de a numai va stresa , am sters ceva

Cod

acel href="si-am bagat dupa zisele cuiva codu acela sa duca la Forum . In ideea sa repar am dat pe sablon intial ca sa revina cum am aratat mai sus si cum mi se facuse si mi-a revenit la sablonu initial. Si acu tot scriu la Partea superioara acele coduri dar tot degeaba ba mi se ingusteaza , ba imi dispare toata pagina .

Ma poate ajuta cineva in acest sens ??

Material modificat de AdryanAdy - Luni, 13/05/2013, 4:45 PM

Felicia

Postări: 1326

Reputație: 55

Mesaj # 12 | 9:15 PM 16/05/2013

Ai incercat codul:

Cod

<div id="mainmenu">
<ul>
<li><a href="/">Pagina principală</a>
</li>
<li><a href="/blog">Blog</a>
</li>
<li><a href="/forum">Forum</a>
</li>
<li><a href="/index/0-3">Contactaţi-ne</a>
</li>
<li><a href="/index/membrii/0-5">Membrii</a>
</li>
<li><a href="/index/pagina_ta/0-6">Pagina Ta</a>
</li>
</ul>
</div>

Good things come to those who wait!

AdryanAdy

Postări: 51

Reputație: 0

Mesaj # 13 | 11:46 AM 17/05/2013

Multumesc Felicia , am incercat si merge

dar cand dau sa creez o pagina cum dau sa aflu de exemplu codu acesta <li><a href="/index/pagina_ta/0-6">Pagina Ta</a>

Material modificat de AdryanAdy - Vineri, 17/05/2013, 12:10 PM

Joker6185

Postări: 145

Reputație: 3

Mesaj # 14 | 6:51 PM 17/05/2013

Citat (AdryanAdy)

dar cand dau sa creez o pagina cum dau sa aflu de exemplu codu acesta <li><a href="/index/pagina_ta/0-6">Pagina Ta</a>

Ca sa afli linkul la o pagina creata de tine te duci aici : Principală » Editor de pagini » Administrarea intrărilor vezi in lista pagina care ai creat-o te uiti linkul si il pui in cod. La pagina nu e ca in Manager de Fisiere ca sa iti dea codul HTML deodata cum vrei tu

Citat

<li><a href="/index/pagina_ta/0-6">Pagina Ta</a>

ci iti da doar linkul dupa care tu il pui in cod

http://CMovies.net Priveşte filme online CMovies

Bara de Meniu

Pagina 1 din 1
1

Ultimele teme de discuție

Teme de discuție populare