DHTML Menüü

Külastaja kes veebisaidil tahab kiiresti ringi liikuda, vajab mugavat menüüd.

Tihti kasutatakse selleks raamistust kuid see hõivab terve lehekülje sektsiooni ning jätab sisule vähe ruumi. Parem lahendus oleks menüü fikseerimine. S.t. et lehe kerimisel menüü seisab paigal.

Sellel lehel, all paremas nurgas on menüü. Ta hõivab ainult väikese osa leheruumist ning kõik lingid on varjatud v.a. üks. Külastaja saab igal ajal kiiresti kasutada menüüd, klikkides sellele lingile mis avab kogu menüü.

Pane tähele: see skript ei tööta IE's.

Sellise menüü tegemiseks on vaja kõigepealt JavaScript'i koodi mis hakkab olema dokumendi "head" sektsioonis.

var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById;
if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else {
var nsDOM = ((navigator.appName.indexOf('Netscape') != -1)
&& (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) {
if (stdDOM) return wS ? document.getElementById(objectId).style:
document.getElementById(objectId);
if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId];
if (nsDOM) return document.layers[objectId];
}
function objWidth(objectID) {var obj = xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;}
function objHeight(objectID) {var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;}
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}
function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
var xxx = 0; var yyy = 0;
function start() {var w = objWidth('hovmenu');var h = objHeight('hovmenu');xxx = Math.floor(pageWidth()-w-20);yyy = Math.floor(pageHeight()-h - 20);moveit();setObjVis('hovmenu','visible');}
function moveit() {var x = (posLeft()+xxx) + 'px';var y = (posTop()+yyy) + 'px';moveObjTo('hovmenu',x,y);}
window.onload = start;
window.onscroll = start;
window.onresize = start;
function toggleDisplay(objectID) {var objs = xDOM(objectID,1); var vis = objs.display; objs.display = (vis == "block") ? 'none' : 'block';start(); return false;}
var ag = navigator.userAgent.toLowerCase();var isG = (ag.indexOf('gecko') != -1);var isR=0;if (isG) {t = ag.split('rv:'); isR = parseFloat(t[1]);}if ( isR) setInterval('moveit()',50);

Kopeeri see kood ja "seivi" nimega hovmenu.js.

Järgmiseks on vaja CSS koodi mille abil saab menüüd meelepäraseks muuta.

Kopeeri see stiililehe kood ja "seivi" nimega hovmenu.css.

Nüüd lisame JavaScript'i ja stiililehe dokumendi "head" sektsiooni.

 <script type="text/javascript" src="hovmenu.js"></script>

 <link rel="stylesheet" href="hovmenu.css" type="text/css" />

Viimaseks toiminguks on HTML koodi lisamine dokumendi "body" sektsiooni. Menüü ilmub automaatselt ekraani all paremas nurgas siis kui lehekülg on alla laetud. Ei ole vahet kuhu kood kirjutada. Selleks, et üldist dokumendi struktuuri mitte liiga sassi ajada, soovitan eelpool mainitu kood kirjutada kohe <body> märgise järele v. </body> märgise ette.

Selline on kood mida olen kasutanud siin lehel. Allajoonitud kood tuleb kirjutada täpselt nii nagu on siin. Ülejäänut saab muuta vastavalt vajadusele.

<div id="hovmenu"><divid="menu">

    <a href="aaa.html">1. Link kuhugi</a><br>
    <a href="bbb.html">2. Teine link kuhugi</a><br>
    <a href="ccc.html">3. Veel üks link</a>

                           </div>
<a href="##"onclick="toggleDisplay('menu');">Menüü</a></div>

Menüü

KOJU DHTML Sissejuhatus

DHTML Menüü DHTML Näited

Kasulikud lingid

W3schools About.com Arvutiabi Külalisteraamat