Acasa /

Ajutor

Cum adaug gratuit un meniu pe site-ul meu?

Pasul 1: Alege stilul si apoi culoarea meniului dorit, dupa care apasa butonul 'Descarca Gratuit' pentru a descarca fisierul in format zip, ce contine toate fisierele necesare meniului.

Pasul 2: Copiaza folderul 'imagini', si fisierele 'meniu.css', 'meniu.js' si 'jquery.js', in acelasi folder in care se afla si pagina site-ului tau in care vrei sa adaugi meniul.

Pasul 3: Deschide fisierul 'index.html', in orice editor de texte. Copiaza si insereaza urmatorul cod in sectiunea <head> a paginii site-ului tau:

<link type="text/css" href="meniu.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="meniu.js"></script>

Pasul 4: Creeaza o lista de tip <ul> pentru meniul tau de navigare, in felul prezentat in continuare. Copiaza si insereaza urmatorul cod in sectiunea <body> a paginii site-ului tau:

<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Acasa</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Categorie 1</span></a>
<div><ul>
<li><a
href="#" class="parent"><span>Categorie 1.1</span></a>
<div><ul>
<li><a
href="#"><span>Categorie 1.1.1</span></a></li>
<li><a href="#"><span>Categorie 1.1.2</span></a></li>
</ul></div>
</li>
<li><a
href="#"><span>Categorie 1.2</span></a></li>
<li><a href="#"><span>Categorie 1.3</span></a></li>
<li><a href="#"><span>Categorie 1.4</span></a></li>
<li><a href="#"><span>Categorie 1.5</span></a></li>
<li><a href="#"><span>Categorie 1.6</span></a></li>
<li><a href="#" class="parent"><span>Categorie 1.7</span></a>
<div><ul>
<li><a
href="#"><span>Categorie 1.7.1</span></a></li>
<li><a href="#"><span>Categorie 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a
href="#"><span>Categorie 2</span></a></li>
<li><a href="#"><span>Categorie 3</span></a></li>
</ul></div>
</li>
<li><a
href="#"><span>Categorii</span></a>
<div><ul>
<li><a
href="#" class="parent"><span>Categorie 1</span></a>
<div><ul>
<li><a
href="#"><span>Categorie 1.1</span></a></li>
<li><a href="#"><span>Categorie 1.2</span></a></li>
</ul></div>
</li>
<li><a
href="#" class="parent"><span>Categorie 2</span></a>
<div><ul>
<li><a
href="#"><span>Categorie 2.1</span></a></li>
<li><a href="#"><span>Categorie 2.2</span></a></li>
</ul></div>
</li>
<li><a
href="#"><span>Categorie 3</span></a></li>
<li><a href="#"><span>Categorie 4</span></a></li>
<li><a href="#"><span>Categorie 5</span></a></li>
<li><a href="#"><span>Categorie 6</span></a></li>
<li><a href="#"><span>Categorie 7</span></a></li>
</ul></div>
</li>
<li><a
href="#"><span>Ajutor</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

Pasul 5: Modifica numele categoriilor dintre tag-urile <span> cu cele dorite, inlocuieste semnele '#' dintre ghilimele cu linkurile dorite si schimba structura meniului in orice mod doresti. Poti crea oricate categorii de meniu si de submeniu iti sunt necesare.

Nota: Nu uita sa folosesti declaratia 'DOCTYPE' pentru compatibilitate universala, ca de exemplu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Licenta: Gratuit, dar insereaza un link, oriunde doresti in pagina ta, catre acest site:

<a href="http://apiplus.ro/">Web Design by apiPlus</a>