Azi este Marti, 13 de Mai.2017

cu reduceri

Meniu orizontal simplu pentru blogul tau


meniu orizontal simplu pentru blogul tauCu câteva luni în urmă am aratat cateva meniuri pe care le poti adăuga la blog-ul tau rapid şi uşor.

Ei bine, azi a venit rândul să iti arat un nou meniu de navigare orizontal, un pic mai complex, dar simplu de implementat.

Poti vedea un exemplu a acestui meniu aici.

Pentru adaugarea meniu-lui mergi la Desen --> Element HTML/Javascript si adaugi urmatorul cod:
Meniu orizontal simplu pentru blogul tau
<hr />
<div id="meniu">
<ul id="navi1">
<li><a href="URL_LINK">Acasa</a></li>
<li><a href="URL_LINK">Desen</a></li>
<li><a href="URL_KINK">Stiri</a></li>
<li><a href="URL_LINK">Contact</a></li>
</ul>
</div>

<style type="text/css">
#navi1 {
margin:0px;
padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
color:#000000;
margin:5px;
padding:3px;
width: 100px;
border:1px solid black;
text-align:center;
list-style:none;
font-family: Segoe UI, Arial;
font-size: 14px;
float:left;
}
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
color:#000000;
border:1px solid black;
}
#navi1 li a:hover {
color: #003366;
font-style: Italic;http://www.blogger.com/img/blank.gif
text-decoration: none;
}
#navi1 a {
color: #CCCCCC;
font-weight: bold;
}
</style>
Bun acum poti modifica tot ce este de culoare rosie cu informatia ce doresti sa apara in meniu si inlocuirea URL_LINK cu link-ul unde vrei sa fie directionata respectiva informatie.

Daca cauti un meniu orizontal interesant cu efetul Dock il poti gasi aici

Related Posts:

  • Cautare cu efect!Acest lucru de a folosi jQuery este foarte usor, desi pe mine nu ma convinge, stiu ca este noua moda, dar îmi place să contrazic şi să caute alternative la bibliotecile de scripting, care sunt confortabile, dar, stiti ca un s… Read More
  • Meniu vertical - clase CSSAdaug azi un nou meniu vertical folosind clase CSS, acesta utilizeaza o imagine de fond unica pentru a realiza 3 efecte diferite.Pentru incorporarea lui intr-un blog se respecta urmatori pasi:1. Copiaeza urmatoarea imagine in… Read More
  • Animatie - Exemplu de acordeon cu CSSAcest exemplu de acordeon create numai cu CSS si care lucreaza în mod normal, în orice browser, dar este pregatit sa functioneze corect în Chrome, Opera şi Firefox 4.Exemplu acordeon orizontal este cel care se potriveste cel … Read More
  • Meniu expandabil cu CSSDaca as spune ca tranziţiile folosesc pentru orice, este o exagerare, dar ... foloseste pentru aproape orice. De data aceasta, sa vedem modul în care acestea ar putea fi aplicate pentru a crea meniuri expandabile.Cred că HTML… Read More
  • Efecte acordeonUn efect foarte interesant de acordeon pe verticala (vezi aici acelasi efec dar pe orizontala)Ori de cate ori efectuam orice actiune pe o eticheta si dam clic pe ea pentru a interactiona, doar cu CSS nu este suficient, avem n… Read More

2 comentarios:

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc