0747 761 287 contact@graphicpedia.ro Cluj-Napoca, România
Navigation-Bar-HTML-CSS3-Tutorial2

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:

Navigation Bar HTML-CSS3 Tutorial



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:

Navigation Bar HTML-CSS3 Tutorial

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:

Navigation Bar HTML-CSS3 Tutorial