E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Javascript

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DEVELOPMENT  /  Javascript  /  Navigare (2)

Meniu derulant simplu

19.08.2008
Meniu derulant simplu

Un meniu derulant foarte simplu realizat pe un singur nivel cu efect de Timeout.

Total vizualizari: 18179 18179 afisari   |   Comentarii  10   |   Rating   |   (9 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  www.javascript-array.com  
Autor:  JavaScript Array
Download
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza


Este un meniu derulant pe un nivel, cu efect de Timeout.Acest script se poate salva prin link-ul download de mai sus.

Daca te intereseaza o secventa de instructiuni avansata, vezi Multi-Level Drop-Down Menu ,bazata pe o simpla lista neordonata de forma arborescenta.

Pe Internet exista numeroase secvente de instructiuni cu denumirea "Drop Down Menu". Intr-o zi, aveam nevoie sa fac un astfel de meniu pentru site-ul meu. Am scotocit printr-o gramada de site-uri si arhive cu scripturi. Si am gasit ceea ce cautam. Pe Net circulau doua categorii de scripturi. Prima - scripturi complet lipsite de valoare. A doua - unele prea complexe, incarcate si care costau.

Si din aceasta cauza ne-am gandit sa realizam urmatorul script:

Exemplu

Acest meniu poate fi localizat oriunde in pagina:

Cod HTML

Codul HTML este simplu si nu necesita tabele. Foloseste o lista neordonata pentru articolele din meniu si straturi ascunse langa elementele-parinti.

Elementele - parinti si straturile ascunse au identificatori unici. De asemenea, acestea au o subrutina de tratare a evenimentelor onmouseover (la trecerea mouse-ului peste) si onmouseout (atunci cand mouse-ul nu mai este trecut peste)

<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

Cod CSS

Eticheta < li > are declararea float: left;. Stratul de submeniu are visibility: hidden; (vizibilitatea:ascunsa) si position: absolute; (pozitie: necodificat) Eticheta ancora este setata pe display: block;(afisare: blocata). Restul este obisnuita ornamentatie de rigoare:

#sddm
{ margin: 0;
      padding: 0;
      z-index: 30} 
#sddm li
{ margin: 0;
      padding: 0;
      list-style: none;
      float: left;
      font: bold 11px arial} 
#sddm li a
{ display: block;
      margin: 0 1px 0 0;
      padding: 4px 10px;
      width: 60px;
      background: #5970B2;
      color: #FFF;
      text-align: center;
      text-decoration: none} 
#sddm li a:hover
{ background: #49A3FF} 
#sddm div
{ position: absolute;
      visibility: hidden;
      margin: 0;
      padding: 0;
      background: #EAEBD8;
      border: 1px solid #5970B2} 
      #sddm div a
      { position: relative;
            display: block;
            margin: 0;
            padding: 5px 10px;
            width: auto;
            white-space: nowrap;
            text-align: left;
            text-decoration: none;
            background: #EAEBD8;
            color: #2875DE;
            font: 11px arial} 
      #sddm div a:hover
      { background: #49A3FF;
            color: #FFF}

Cod JavaScript

Insereaza acest cod intre etichetele < head > si < /head >. Urmareste codul pentru a vedea comentariile:

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0; 
// deschide stratul ascuns
function mopen(id)
{ 
      // anuleaza close-timer-ul (pentru inchiderea pop-upurilor
      // dupa o perioada de timp pre-determinata)
      mcancelclosetime(); 
      // inchide stratul vechi
      if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 
      // obtine urmatorul strat si afiseaza-l
      ddmenuitem = document.getElementById(id);
      ddmenuitem.style.visibility = 'visible'; 
}
// inchide stratul afisat
function mclose()
{
      if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
} 
// mergi la close timer
function mclosetime()
{
      closetimer = window.setTimeout(mclose, timeout);
} 
// anuleaza close timer
Function mcancelclosetime()
{
      if(closetimer)
      {
            window.clearTimeout(closetimer);
            closetimer = null;
      }
} 
// inchide stratul la click-out
document.onclick = mclose;

Si asta e! Tot ce trebuie sa faci acum este sa adaugi cateva stiluri de schimbare a aspectului unei legaturi cand mouse-ul se afla deasupra ei (hover styles) si astfel sa ii adaugi o nota personala. Amuza-te!

Pagina:
1
comenteaza printeaza
Alte tutoriale Javascript:
Noteaza acest tutorial
Rating tutorial
 
(9 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (10) spune-ti parerea
kisskmy , Duminica, 29 Iunie 2014, ora 21:30
#10

va rog sa ma ajutati si pe mine sa pun acest meniu pe un blog creat prin blogger.com. spuneti ca acest cod html trebuie introdus oriunde in pagina... in care pagina? va rog multt ajutati-ma. blogul e acesta : sana-shop.blogspot.it
va multumesc anticipat

Raporteaza acest comentariu ca injurios!
alexandervsakexander , Vineri, 27 Septembrie 2013, ora 09:59
#9

Buna ziua. M-am inscris pe acest site cu un scop precis. Am nevoie de un meniu derulant pt blogul meu

http://alexandervsalexander.blogspot.ro/

Pot aplica acest meniu pe blogspot? Daca nu, cum pot face pt blogspot?

Raporteaza acest comentariu ca injurios!
Pustiu Pustiu , Sambata, 26 Ianuarie 2013, ora 13:09
#8

@alikleo: asa cum scrie si in tutorial, oriunde in pagina ta. In arhiva de download tu ai un fisier html model si fisierul css necesar.

Raporteaza acest comentariu ca injurios!
alikleo , Vineri, 25 Ianuarie 2013, ora 19:32
#7

Iar cel pe care putem sa-l descarcam de mai sus,unde il inseram?

Raporteaza acest comentariu ca injurios!
idomiralin , Luni, 19 Septembrie 2011, ora 13:22
#6
pentru css si javascript si pentru html. dar nu merge si asa. poate aveti o idee mai buna.

Am uitat sa mentionez ca am adaugat acest meniu ca obiect gadget la blog si ma gandeam ca trebuie pus

Raporteaza acest comentariu ca injurios!
idomiralin , Luni, 19 Septembrie 2011, ora 13:19
#5

Eu ma tot chinui sa il folosesc pe blog si nu imi merge. Se deruleaza pentru 1-2 secunde si nu pot sa intru pe acelea care se deruleaza. Poate ma puteti ajuta!

Multumesc!

Raporteaza acest comentariu ca injurios!
egipteanu , Vineri, 15 Aprilie 2011, ora 21:37
#4

CUM POT SA FAC UN MENIU DERULANT IN ACCES 2007?

Raporteaza acest comentariu ca injurios!
Ionut , Miercuri, 11 Martie 2009
#3

vochin_ionel

Ce vrei tu sa faci e ceva mai complicat. Poti face printr-un JSON definit cu toate modelele si marcile de telefoane, sau prin AJAX (JAVASCRIPT + PHP), asta in cazul in care nu vrei sa se faca refresh la pagina.

O sa vorbesc cu cei de la e-learn sa faca un tutorial cu JSON sa vezi cum se utilizeaza, dar indiferent ce metoda vrei sa adopti e nevoie sa stii si ceva programare. Metoda cu JSON e mai simplu de realizat si de inteles.

Raporteaza acest comentariu ca injurios!
vochin_ionel , Marti, 10 Martie 2009
#2

as vrea sa creez un site de telefoane mobile...cu 2 meniuri.....unu in care poti sa iti alegi marca telefonului si al dioilea sa poti sa iti alegi modelul telefonului.....
iar cand selectez marca vrea sa imi apara la in meniul model doar modelele de la aceea marca selectata.....ma puteti ajuta????????

Raporteaza acest comentariu ca injurios!
lorin , Marti, 11 Noiembrie 2008
#1

Idee originala
Foarte util in realizarea sitului
L-am folosit , si va multumesc pentru timpul castigat la proiectare.

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4430
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4330
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4290
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4130
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Outlook Flash Photoshop Dreamweaver Ruby on Rails Fireworks JSON MySQL COREL DRAW HTML Sony Vegas Powerpoint SEO RoR PHP AJAX Java Word CSS Lightroom Fotografie Vista Illustrator StyleSheet XML Excel Swift 3D Javascript Gimp SWF Verilog Action Script PSD XHTML Python Bridge
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software