Navigation Bar HTML/CSS3 Tutorial
In tutorialul de astazi vom realiza o bara de navigare folosind limbajul HTML si CSS3, fara a avea nevoie de adobe photoshop sau orice alt program grafic. Ca editor de cod vom folosi Notepad++ care este gratuit si poate fi descarcat de aici.
Pentru inceput deschidem Notepad++ si introducem urmatorul cod:
<html>
<ul class=”menu”>
<li><a href=”#”>HOME</a></li>
<li><a href=”#”>ARTICOLE UTILE</a></li>
<li><a href=”#”>INSPIRATIE</a></li>
<li><a href=”#”>TUTORIALE PHOTOSHOP</a></li>
<li><a href=”#”>WORDPRESS THEMPLATES</a></li></ul>
</html>
Dupa ce ati introdus codul salvam fisierul in format .html cu numele care doriti dvs. eu am ales navbar.html. Browserul va traduce codul cam asa:
Creem un document nou in Notepad++ dupa care introducem codul:
.menu,
.menu ul,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}.menu {
height: 40px;
width: 701px;
background: -webkit-linear-gradient(top, #00acff 0%,#007edc 100%);-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
Acum salvam documentul in fomat .css cu numele style (style.css), dupa care mergem in fisierul navbar.html si adaugam urmatoare linie:
<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css” >
Salvam apoi testam. Browserul va traduce codul cam asa:
Acum vom merge iar in style.css si vom mai adauga urmatoarele linii:
.menu li a {
display: block;
padding: 0 14px;
margin: 5px 0;
line-height: 30px;
text-decoration: none;border-right: 1px solid #00abfe;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.2);}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }.menu li:hover > a { color: #ffffff; }
Salvam, dupa care vom avea urmatorul rezultat:
