CSS Tabbed Menu cu Javascript

Am căutat pe internet despre cum să realizez un meniu tip taburi, şi deşi sunt foarte multe soluţii cu jquery de exemplu, sau chiar alte javascripturi, am întâmpinat probleme când venea vorba de rezistenţa scriptului la diferite încercări.

O primă problemă a meniurilor jquery a fost că la al doilea refresh la pagină uneori nu mi se încărca scriptul, asta însemna că meniul nu funcţiona.

Soluţia ce vreau să o prezint este 100% operabilă. Nu se blochează, şi este vorba doar despre CSS. Un mic script java va realiza inserţia unui atribut ce va avea fie display: none fie display: block. Simplu şi eficient nu? Să vedem …

css-tabbed-menu-javascript

Meniul ar putea avea forma asta :

<!–Start CSS Tabmenu –>
<ol id=”tab”>
<li><a href=”#despre”>Despre mine</a></li>
<li><a href=”#produse”>Produse</a></li>
<li><a href=”#contact”>Contact</a></li>
</ol>
<!–End CSS Tabmenu –>

Conţinutul împărţit ar putea arăta sub forma:

<div id=”despre” class=”content”>

Acest exemplu vă arată cum funcţionează CSS Tabbed Menu cu Javascript

</div>
<div id=”produse” class=”content inactive”>
<h3>Lista cu produse:</h3>
<ul>
<li>Produsul 1</li>
<li>Produsul 2</li>
<li>Produsul 3</li>
</ul>
</div>
<div id=”contact” class=”content inactive”>

Pentru mai multe informaţii lăsaţi un comentariu aici!

</div>

Div-ul ce nu are class inactive este cel ce va fi vizibil când pagina respectivă se încarcă. Deci puteţi schimba ce secţiune se va vedea prima dată.

În style.css poţi introduce designul pentru meniu, în exemplu avem:

div.content.inactive {display: none;}
ol#tab{height: 1.5em;list-style: none;margin: 0;padding: 0;width: 100%;float: right;margin: 0.5em 0;font-size: 14px;border-bottom: 2em solid #F5A914;}
ol#tab li {float: left;margin: 0 10px 0 10px;border-bottom: 3px solid #805427;padding: 0 5px;}
ol#tab li a.active { background-color: #f5a914; background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#tab a { background: #feeac9; color: #805427; display: block; float: left; height: 1.5em; padding: 5px 10px;text-decoration: none;border: 1px solid #805427;}
ol#tab a:hover { background-color: #f9d8a2; background-position: 0 -120px;}

Încarcă în directorul temei tale în folderul „js” scriptul java activtab.js pentru a-l putea folosi. Şi acum în footer.php introducem codul javascript:

<script type=”text/javascript” src=”/js/activtab.js”></script>
<script type=”text/javascript”>// <![CDATA[
activatables(‘index’, [‘despre’, ‘produse’, ‘contact’]);
// ]]></script>

Informatiile din [‘despre’, ‘produse’, ‘comanda’] corespund cu id-urile din href din meniu dar şi cu secţiunile de pe site unde se află continutul pentru fiecare buton tab. Ele pot fi schimbate integral! indexsimbolizează cuvântul ce va apărea în url alături de denumirea secţiunii. Şi el poate fi schimbat!

Acum scriptul este 100% funcţionabil. Pentru exemplul de mai sus

Demo aici

Descarcă exemplul CSS Tabbed Menu cu Javascript

Articol etichetat cu:,

Care este gandul tau?