Jeste da sam direktno prozvan, ali stvarn mislim da postoji gomila toga na netu. ali hajde da objasnim princip. Napomena ovo je samo osnovni primer iz glave, stilovi i funkcije mogu biti totalno drugaciji.
Menu se nalazi u posebnom layer-u (<div>) koji je inicijalno saktiven:
<style>
.menuLayer { position:absolute; visibility: hidden; }
</style>
onda napravis par menija, (kao na microstoft.com) i u njima stavis bilo kakav html sadrzaj, obicno idu linkovi:
<div id=menu1 class=menuLayer style='left: 300; top:20; width:150; height: 100; background:#808080'>
<a href='url11'>item11</a><br>
<a href='url12'>item12</a><br>
<a href='url13'>item13</a><br>
</div>
<div id=menu2 class=menuLayer style='left: 300; top:20; width:150; height: 100; background:#808080'>
<a href='url21'>item21</a><br>
<a href='url22'>item22</a><br>
<a href='url23'>item23</a><br>
</div>
Zatim moras da definises kada se pokazuju meniju, odnosno kada korisnik predje preko nekog linka. ZNaci ako imas neki link:
<a href='menu1'>menu broj 1</a>
moras da mu dodas handler:
<a href='menu1' onmouseover='showMenu(1)'>menu broj 1</a>
a taj handler definises preko javascripta:
<script>
function showMenu(broj)
{
ref = document.getElementById('menu' + broj);
ref.style.visibility = 'visible';
}
</script>
Da bi se menu sklanjao mora se definisati i ta funkcija, znaci doda se i
<script>
function hideMenu (broj)
{
ref = document.getElementById('menu' + broj);
ref.style.visibility = 'hidden';
}
</script>
pa bi onda kompletan menu link bio
<a href='menu1' onmouseover='showMenu(1);' onmouseout='hideMenu(1);'>menu broj 1</a>
ostali linovi bi bili slicni:
<a href='menu2' onmouseover='showMenu(2);' onmouseout='hideMenu(2);'>moj meni broj 2</a>
Jos jednom napominjem da je ovo napravlujeno najjednostavnije moguce da bi pocetnici mogli da razumeju. Funkcije showMenu i hideMenu mogu se zameniti jednom funkcijom toggleMenu:
<script>
function toggleMenu (broj)
{
ref = document.getElementById('menu' + broj);
ref.style.visibility = (ref.style.visibility == 'visible') ? 'hidden' : 'visible';
}
</script>
pa onda href izgleda:
<a href='menu1' onmouseover='toggleMenu(1);' onmouseout='toggleMenu(1);'>menu broj 1</a>
Dodatno, u osnovnom drop-down meniju, stavke se mogu definisati kao novi layeri (div) pa bi to moglo da izgleda ovako:
<style>
.menuLayer { position:absolute; visibility: hidden; }
.subMenuLayer { width:100%; height:20; background:#f0f0f0; border:1px solid black; }
</style>
<div id=menu1 class=menuLayer style='left: 300; top:20; width:150; height: 100; background:#808080'>
<div class=subMenuLayer id=menu1_1 onMouseOver='toggleMenu(1);' onMouseOut='toggleMenu(1);'><a href='url11'>item11</a></div>
<div class=subMenuLayer id=menu1_2 onMouseOver='toggleMenu(2);' onMouseOut='toggleMenu(2);'><a href='url11'>item12</a></div>
<div class=subMenuLayer id=menu1_3 onMouseOver='toggleMenu(3);' onMouseOut='toggleMenu(3);'><a href='url11'>item13</a></div>
</div>
Da bi se dobio crossbrowser code potrebno je zameniti funkcije:
<script>
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) { return (isNS4 ? getRef(id) : getRef(id).style); }
</script>
pa se onda zameni funkcija toggleMenu:
<script>
function toggleMenu (broj)
{
sty = getSty('menu' + broj);
if (isDOM) sty.visibility = (sty.visibility == 'visible') ? 'hidden' : 'visible';
if (isNS4) sty.visibility = (sty.visibility == 'show') ? 'hide : 'show';
}
</script>
pa se na mouseover mogu menjati i boje manuitems...
<script>
function toggleMenu (broj)
{
sty = getSty('menu' + broj);
is_visible = (sty.visibility == 'visible');
sty.background = (is_visible) ? #0000ff : #f0f0f0;
if (isDOM) sty.visibility = (is_visible) ? 'hidden' : 'visible';
if (isNS4) sty.visibility = (is_visible) ? 'hide : 'show';
}
</script>
Ovo jos moze dodatno da se optimizuje ali i ovo je za pocetak vise nego dovoljno. Ako nesto ne radi, onda ima neka slovna greska jer ovo pisem iz glave :-)) Nadam se da nisam ugusio.
Goran Pilipović fka bluesman