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;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
Function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
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! 
|
7926 afisari |
15 min
|
Incepator
