Meniu Black uCoz - Comunitatea uCoz

Mesaj # 1 | 4:38 PM 03/06/2012

Descriere script:

Un meniu vertical perfect pentru cei cu un design închis .

Informații script:

Dificultate: Începător

Modificat și tradus de DarkLight.

Testat: Funcționează fară probleme.

DEMO: aici

Imaginile au fost urcate pe un site personal pentru a nu a avea probleme cu ștergerea lor de pe site-urile externe.

Metodă de instalare:

Tutorial pentru cei cu Control Panel in limba engleză.

Mai jos aveți 2 metode pentru adăuga acest meniu pe site-urile voastre .

Metoda 1

Pentru a instala acest meniu trebuie să descărcați următorul fișier (click pentru a descărca) și să îl "urci" (upload) pe site în root (/).

Dacă nu știți să folosiți FileZilla pentru a uploada fișierele mai repede pe site,aruncați o privire aici.

După ce ați urcat fișierele pe site trebuie să introduceți în Design management (CSS) următorul cod CSS (Cascading Style Sheets)

Code

/* MENIU */
                             a.menu_tip1 {display:block; width:172px; height:18px; text-align:left; background:url('/meniu/b_nab_mn.png'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 14px;}
                             a.menu_tip2 {display:block; width:152px; height:18px; text-align:left; background:url('/meniu/b_nab_mn.gif'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 35px;}
                             a.menu_tip3 {display:block; width:152px; height:18px; text-align:left; background:url('/meniu/b_nab_mn.gif'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 35px;}
                             a.menu_tip1:link, a.menu_tip2:link, a.menu_tip3:link { text-decoration:none; color:#848484;}
                             a.menu_tip1:visited, a.menu_tip2:visited, a.menu_tip3:visited { text-decoration:none; color:#848484;}
                             a.menu_tip1:hover, a.menu_tip2:hover, a.menu_tip3:hover { text-shadow:0 0 5px #fff; -moz-border-radius:3px;-webkit-border-radius:3px; border-radius: 3px; color:#fff; background-position:0px -23px;}
                             a.menu_tip1:active, a.menu_tip2:active, a.menu_tip3:active { text-shadow:0 0 5px #fff; -moz-border-radius:3px;-webkit-border-radius:3px; border-radius: 3px; color:#fff; background-position:0px -23px;}
                             /* ---- */

Acum după ce ați introdus codul de mai sus,introduceți următorul cod unde doriți să vă apară meniul:

Code

<a class="menu_tip1" href="javascript://" rel="nofollow" onclick="$('#menu_1').slideToggle('slow');">MENIU</a>
                             <div id="menu_1" style="display: none;" align="left">
                             <a class="menu_tip2" href="/">HOME</a>
                             <a class="menu_tip2" href="/forum">FORUM</a>
                             <a class="menu_tip2" href="/gb">GUEST BOOK</a>
                             <a class="menu_tip3" href="/dir">WEB DIRECTOR</a>
                             </div>

                             <a class="menu_tip1" href="javascript://" rel="nofollow" onclick="$('#menu_2').slideToggle('slow');">CATEGORIA 1</a>
                             <div id="menu_2" style="display: none;" align="left">
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip3" href="#"> LINK</a>
                             </div>

                             <a class="menu_tip1" href="javascript://" rel="nofollow" onclick="$('#menu_01').slideToggle('slow');">CATEGORIA 2</a>
                             <div id="menu_01" style="display: none;" align="left">
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip3" href="#"> LINK</a>
                             </div>

                             <a class="menu_tip1" href="javascript://" rel="nofollow" onclick="$('#menu_3').slideToggle('slow');">CATEGORIA 3</a>
                             <div id="menu_3" style="display: none;" align="left">
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip2" href="#"> LINK</a>
                             <a class="menu_tip3" href="#"> LINK</a>
                             </div>

                             <a class="menu_tip1" href="#"> LINK</a>
                             <a class="menu_tip1" href="#"> LINK</a>
                             <a class="menu_tip1" href="#"> LINK</a>


                             <a class="menu_tip1" href="javascript://" rel="nofollow" onclick="$('#menu_4').slideToggle('slow');">CATEGORIA 4</a>
                             <div id="menu_4" style="display: none;" align="left">
                             <a class="menu_tip3" href="#"> URL</a>
                             </div>

Sfaturi:

Vă recomand să introduceți acest cod într-un block nou .

# reprezintă adresa URL (link-ul) îl puteți schimba cu adresa url a unui modul:

Exemplu:

Pentru Blog schimbați "#" cu "/blog".
Pentru Forum schimbați "#" cu "/forum".
Pentru Guestbook schimbați "#" cu "/gb".

Link-ul de bază <a class="menu_tip2" href="#"> LINK</a>

îl puteți modifica după cum doriți:

<a class="menu_tip2" href="/forum"> Forum</a>

Metoda 2

Este o metodă mai simplă deoarece nu trebuie să descărcați nici un fișier.

Introduceți între <head> și </head>codul:

Code

Iar unde vreți să apară introduceți al 2-lea cod de la Metoda 1.

Dacă întâmpinați probleme nu ezitați să lăsați un comentariu.

Ultimul update Duminică, 03/06/2012, 3:56 PM

Sursa 7ucoz

uCozer

Material modificat de TotEu - Luni, 04/06/2012, 4:29 PM

Ultimele teme de discuție

Teme de discuție populare