Opis: Pomicna navigacija, besplatna, pristupacna i prilagodljiva za vasu stranicu
Podrzava: Sve vrste foruma i web stranica koje dopustaju koristenje HTML-a
Koristeni kodovi: HTML, JavaScript, CSS
Moguca promjena dizajna: Da
Ispravni kodovi: Da
Slika: Klik
Demo: Klik
Autor: Marino - uz pomoć tutoriala
- Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript1.2">
if(!window.saveInnerWidth) {
window.onresize = resize;
window.saveInnerWidth = window.innerWidth;
window.saveInnerHeight = window.innerHeight;
}
function resize() {
if (saveInnerWidth < window.innerWidth ||
saveInnerWidth > window.innerWidth ||
saveInnerHeight > window.innerHeight ||
saveInnerHeight < window.innerHeight )
{
window.history.go(0);
}
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
var _id = 0, _pid = 0, _lid = 0, _pLayer;
var _mLists = new Array();
document.lists = _mLists;
var isNav4, isIE4, isNav6;
if (parseInt(navigator.appVersion.charAt(0)) >= 4) {
isNav6 = navigator.userAgent.indexOf("Gecko")!=-1?true:false;
isNav4 = (navigator.appName == "Netscape") ? true && !isNav6: false;
isIE4 = (navigator.appName.indexOf("Microsoft") != -1) ? true : false;
}
function List(visible, width, height, bgColor) {
this.setIndent = setIndent;
this.addItem = addItem;
this.addList = addList;
this.build = build;
this.rebuild = rebuild;
this.setFont = _listSetFont;
this._writeList = _writeList;
this._showList = _showList;
this._updateList = _updateList;
this._updateParent = _updateParent;
this.onexpand = null;
this.postexpand = null;
this.lists = new Array();
this.items = new Array();
this.types = new Array();
this.strs = new Array();
this.x = 0;
this.y = 0;
this.visible = visible;
this.id = _id;
this.i = 18;
this.space = true;
this.pid = 0;
this.fontIntro = false;
this.fontOutro = false;
this.width = width || 350;
this.height = height || 22;
this.parLayer = false;
this.built = false;
this.shown = false;
this.needsUpdate = false;
this.needsRewrite = false;
this.parent = null;
this.l = 0;
if(bgColor) this.bgColor = bgColor;
else this.bgColor = null;
_mLists[_id++] = this;
}
function _listSetFont(i,j) {
this.fontIntro = i;
this.fontOutro = j;
}
function setIndent(indent) { this.i = indent; if(this.i < 0) { this.i = 0; this.space = false; } }
function setClip(layer, l, r, t, b) {
if(isNav4) {
layer.clip.left = l; layer.clip.right = r;
layer.clip.top = t; layer.clip.bottom = b;
} else {
layer.style.pixelWidth = r-l;
layer.style.pixelHeight = b-t;
layer.style.clip = "rect("+t+","+r+","+b+","+l+")";
}
}
function _writeList() {
void(0);
var layer, str, clip;
for(var i = 0; i < this.types.length; i++) {
layer = this.items[i];
if(isNav4) layer.visibility = "hidden";
else layer.style.visibility = "hidden";
str = "";
if(isNav4) layer.document.open();
str += "<TABLE WIDTH="+this.width+" NOWRAP BORDER=0 CELLPADDING=0 CELLSPACING=0><TR>";
if(this.types[i] == "list") {
str += "<TD WIDTH=15 NOWRAP VALIGN=MIDDLE><A HREF=\"javascript:expand("+this.lists[i].id+");\"><IMG BORDER=0 SRC=\"http://2img.net/i/fa/prosilver/icon_topic_latest.gif\" NAME=\"_img"+this.lists[i].id+"\"></A></TD>";
_pid++;
} else if(this.space)
str += "<TD WIDTH=15 NOWRAP> </TD>";
if(this.l>0 && this.i>0) str += "<TD WIDTH="+this.l*this.i+" NOWRAP> </TD>";
str += "<TD HEIGHT="+(this.height-3)+" WIDTH="+(this.width-15-this.l*this.i)+" VALIGN=MIDDLE ALIGN=LEFT>";
if(this.fontIntro) str += this.fontIntro;
str += this.strs[i];
if(this.fontOutro) str += this.fontOutro;
str += "</TD></TABLE>";
if(isNav4) {
layer.document.writeln(str);
layer.document.close();
} else layer.innerHTML = str;
if(this.types[i] == "list" && this.lists[i].visible)
this.lists[i]._writeList();
}
this.built = true;
this.needsRewrite = false;
void(0);
}
function _showList() {
var layer;
for(var i = 0; i < this.types.length; i++) {
layer = this.items[i];
setClip(layer, 0, this.width, 0, this.height-1);
if(isIE4||isNav6) {
if(layer.oBgColor) layer.style.backgroundColor = layer.oBgColor;
else layer.style.backgroundColor = this.bgColor;
} else {
if(layer.oBgColor) layer.document.bgColor = layer.oBgColor;
else layer.document.bgColor = this.bgColor;
}
if(this.types[i] == "list" && this.lists[i].visible) {
this.lists[i]._showList();
}
}
this.shown = true;
this.needsUpdate = false;
}
function _updateList(pVis, x, y) {
var currTop = y, layer;
for(var i = 0; i < this.types.length; i++) {
layer = this.items[i];
if(this.visible && pVis) {
if(isNav4) {
layer.visibility = "visible";
layer.top = currTop;
layer.left = x;
} else {
layer.style.visibility = "visible";
if(isNav6){
layer.style.top = currTop;
layer.style.left = x;
} else {
layer.style.pixelTop = currTop;
layer.style.pixelLeft = x;
}
}
currTop += this.height;
} else {
if(isNav4) layer.visibility = "hidden";
else layer.style.visibility = "hidden";
}
if(this.types[i] == "list") {
if(this.lists[i].visible) {
if(!this.lists[i].built || this.lists[i].needsRewrite) this.lists[i]._writeList();
if(!this.lists[i].shown || this.lists[i].needsUpdate) this.lists[i]._showList();
if(isNav4)
layer.document.images[0].src = "http://i17.servimg.com/u/f17/13/77/68/91/na11.png";
else if(isNav6)
{
if(document.getElementById("_img"+this.lists[i].id))
document.getElementById("_img"+this.lists[i].id).src = "http://www.apartmentsmilicic.com/assets/down.gif";
} else {
eval('document.images._img'+this.lists[i].id+'.src = "http://www.froddo.net/ikone/right_42.png"');
}
} else {
if(isNav4)
layer.document.images[0].src = "http://www.apartmentsmilicic.com/assets/down.gif";
else if(isNav6)
{
if(document.getElementById("_img"+this.lists[i].id))
document.getElementById("_img"+this.lists[i].id).src = "http://www.apartmentsmilicic.com/assets/down.gif";
} else {
eval('document.images._img'+this.lists[i].id+'.src = "http://www.apartmentsmilicic.com/assets/down.gif"');
}
}
if(this.lists[i].built)
currTop = this.lists[i]._updateList(this.visible && pVis, x, currTop);
}
}
return currTop;
}
function _updateParent(pid, l) {
var layer;
if(!l) l = 0;
this.pid = pid;
this.l = l;
for(var i = 0; i < this.types.length; i++)
if(this.types[i] == "list")
this.lists[i]._updateParent(pid, l+1);
}
function expand(i) {
_mLists[i].visible = !_mLists[i].visible;
if(_mLists[i].onexpand != null) _mLists[i].onexpand(_mLists[i].id);
_mLists[_mLists[i].pid].rebuild();
if(_mLists[i].postexpand != null) _mLists[i].postexpand(_mLists[i].id);
}
function build(x, y) {
this._updateParent(this.id);
this._writeList();
this._showList();
this._updateList(true, x, y);
this.x = x; this.y = y;
}
function rebuild() { this._updateList(true, this.x, this.y); }
function addItem(str, bgColor, layer) {
var testLayer = false;
if(!document.all) document.all = document.layers;
if(!layer) {
if(isIE4 || !this.parLayer)
if(isNav6)
testLayer = document.getElementById('lItem'+_lid);
else
testLayer = eval('document.all.lItem'+_lid);
else {
_pLayer = this.parLayer;
if(isNav6){
testLayer = document.getElementById('lItem'+_lid);
} else {
testLayer = eval('_pLayer.document.layers.lItem'+_lid);
}
}
if(testLayer) layer = testLayer;
else {
if(isNav4) {
if(this.parLayer) layer = new Layer(this.width, this.parLayer);
else layer = new Layer(this.width);
} else return;
}
}
if(bgColor) layer.oBgColor = bgColor;
this.items[this.items.length] = layer;
this.types[this.types.length] = "item";
this.strs[this.strs.length] = str;
_lid++;
}
function addList(list, str, bgColor, layer) {
var testLayer = false;
if(!document.all) document.all = document.layers;
if(!layer) {
if(isIE4 || !this.parLayer)
if(isNav6)
testLayer = document.getElementById('lItem'+_lid);
else
testLayer = eval('document.all.lItem'+_lid);
else {
_pLayer = this.parLayer;
if(isNav6){
testLayer = document.getElementById('lItem'+_lid);
} else {
testLayer = eval('_pLayer.document.layers.lItem'+_lid);
}
}
if(testLayer) layer = testLayer;
else {
if(isNav4) {
if(this.parLayer) layer = new Layer(this.width, this.parLayer);
else layer = new Layer(this.width);
} else return;
}
}
if(bgColor) layer.oBgColor = bgColor;
this.lists[this.items.length] = list;
this.items[this.items.length] = layer;
this.types[this.types.length] = "list";
this.strs[this.strs.length] = str;
list.parent = this;
_lid++;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function menu_init() {
if(parseInt(navigator.appVersion) < 4) {
alert("Molimo koristite noviji browser.");
return;
}
var width, height = 22;
if(isNav4) width = 3*window.innerWidth/4;
else width = 3*document.body.clientWidth/4;
width=300;
var bgColor = "#003366";
l = new List(true, width, height+5, bgColor);
l.setFont("<FONT COLOR='#99CCFF' FACE='Arial,Helvetica' SIZE=-1><B>","</B></FONT>");
m = new List(false, width, height, "#336699");
m.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
m.addItem("Pridruzi se odmah");
m.addItem("Logiraj se");
m.addItem("Novosti");
m.addItem("Clanovi");
m.addItem("Kontakt");
m.addItem("Vodici");
l.addList(m, "Clanstvo");
o = new List(false, width, height, "#336699");
o.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
o.addItem("Kategorije");
o.addItem("Kategorija 1");
o.addItem("Kategorija 2");
o.addItem("Kategorija 3");
o.addItem("Kategorija 4");
l.addList(o, "Primjer 1");
d = new List(false, width, height, "#336699");
d.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
techNote = new List(true, width, height, "#6699CC");
techNote.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
d.addList(techNote, "Nova linija");
techNote.addItem("Primjer linije");
l.addList(d, "Aplikacije");
t = new List(false, width, height, "#336699");
t.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
t.addItem("Pomoc");
t.addItem("Primjer 1");
t.addItem("Primjer 2");
t.addItem("Primjer 3");
t.addItem("Primjer 4");
t.addItem("Primjer 5");
t.addItem("Primjer 6");
t.addItem("Primjer 7");
l.addList(t, "Technologije");
s = new List(false, width, height, "#336699");
s.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
s.addItem("Svasta 1");
s.addItem("Svasta 2");
s.addItem("Svasta 3");
s.addItem("Svasta 4");
s.addItem("Svasta 5");
s.addItem("Svasta 6");
s.addItem("Svasta 7");
l.addList(s, "Prazno 1");
l.addItem("Prazno 1");
l.addItem("Prazno 2");
l.addItem("Prazno 3");
l.addItem("Prazno 4");
l.build(0,0);
}
</SCRIPT>
<STYLE TYPE="text/css">
#spacer { position: absolute; height: 1120; }
</STYLE>
<STYLE TYPE="text/css">
#lItem0 { position:absolute; }
#lItem1 { position:absolute; }
#lItem2 { position:absolute; }
#lItem3 { position:absolute; }
#lItem4 { position:absolute; }
#lItem5 { position:absolute; }
#lItem6 { position:absolute; }
#lItem7 { position:absolute; }
#lItem8 { position:absolute; }
#lItem9 { position:absolute; }
#lItem10 { position:absolute; }
#lItem11 { position:absolute; }
#lItem12 { position:absolute; }
#lItem13 { position:absolute; }
#lItem14 { position:absolute; }
#lItem15 { position:absolute; }
#lItem16 { position:absolute; }
#lItem17 { position:absolute; }
#lItem18 { position:absolute; }
#lItem19 { position:absolute; }
#lItem20 { position:absolute; }
#lItem21 { position:absolute; }
#lItem22 { position:absolute; }
#lItem23 { position:absolute; }
#lItem24 { position:absolute; }
#lItem25 { position:absolute; }
#lItem26 { position:absolute; }
#lItem27 { position:absolute; }
#lItem28 { position:absolute; }
#lItem29 { position:absolute; }
#lItem30 { position:absolute; }
#lItem31 { position:absolute; }
#lItem32 { position:absolute; }
#lItem33 { position:absolute; }
#lItem34 { position:absolute; }
#lItem35 { position:absolute; }
#lItem36 { position:absolute; }
#lItem37 { position:absolute; }
#lItem38 { position:absolute; }
#lItem39 { position:absolute; }
#lItem40 { position:absolute; }
#lItem41 { position:absolute; }
#lItem42 { position:absolute; }
#lItem43 { position:absolute; }
#lItem44 { position:absolute; }
#lItem45 { position:absolute; }
#lItem46 { position:absolute; }
</STYLE>
<title>Navigacija © Marino</title></head>
<body onload="menu_init();">
<DIV ID="spacer"></DIV><DIV ID="lItem0" NAME="lItem0"></DIV><DIV ID="lItem1" NAME="lItem1"></DIV><DIV ID="lItem2" NAME="lItem2"></DIV><DIV ID="lItem3" NAME="lItem3"></DIV><DIV ID="lItem4" NAME="lItem4"></DIV><DIV ID="lItem5" NAME="lItem5"></DIV><DIV ID="lItem6" NAME="lItem6"></DIV><DIV ID="lItem7" NAME="lItem7"></DIV><DIV ID="lItem8" NAME="lItem8"></DIV><DIV ID="lItem9" NAME="lItem9"></DIV><DIV ID="lItem10" NAME="lItem10"></DIV><DIV ID="lItem11" NAME="lItem11"></DIV><DIV ID="lItem12" NAME="lItem12"></DIV><DIV ID="lItem13" NAME="lItem13"></DIV><DIV ID="lItem14" NAME="lItem14"></DIV><DIV ID="lItem15" NAME="lItem15"></DIV><DIV ID="lItem16" NAME="lItem16"></DIV><DIV ID="lItem17" NAME="lItem17"></DIV><DIV ID="lItem18" NAME="lItem18"></DIV><DIV ID="lItem19" NAME="lItem19"></DIV><DIV ID="lItem20" NAME="lItem20"></DIV><DIV ID="lItem21" NAME="lItem21"></DIV><DIV ID="lItem22" NAME="lItem22"></DIV><DIV ID="lItem23" NAME="lItem23"></DIV><DIV ID="lItem24" NAME="lItem24"></DIV><DIV ID="lItem25" NAME="lItem25"></DIV><DIV ID="lItem26" NAME="lItem26"></DIV><DIV ID="lItem27" NAME="lItem27"></DIV><DIV ID="lItem28" NAME="lItem28"></DIV><DIV ID="lItem29" NAME="lItem29"></DIV><DIV ID="lItem30" NAME="lItem30"></DIV><DIV ID="lItem31" NAME="lItem31"></DIV><DIV ID="lItem32" NAME="lItem32"></DIV><DIV ID="lItem33" NAME="lItem33"></DIV><DIV ID="lItem34" NAME="lItem34"></DIV><DIV ID="lItem35" NAME="lItem35"></DIV><DIV ID="lItem36" NAME="lItem36"></DIV><DIV ID="lItem37" NAME="lItem37"></DIV><DIV ID="lItem38" NAME="lItem38"></DIV><DIV ID="lItem39" NAME="lItem39"></DIV><DIV ID="lItem40" NAME="lItem40"></DIV><DIV ID="lItem41" NAME="lItem41"></DIV><DIV ID="lItem42" NAME="lItem42"></DIV><DIV ID="lItem43" NAME="lItem43"></DIV><DIV ID="lItem44" NAME="lItem44"></DIV><DIV ID="lItem45" NAME="lItem45"></DIV><DIV ID="lItem46" NAME="lItem46"></DIV>
<BR><center>
</body>
</html>
- Nadite sljedeci kod te izmjenite link slike
- Code:
str += "<TD WIDTH=15 NOWRAP VALIGN=MIDDLE><A HREF=\"javascript:expand("+this.lists[i].id+");\"><IMG BORDER=0 SRC=\"http://2img.net/i/fa/prosilver/icon_topic_latest.gif\" NAME=\"_img"+this.lists[i].id+"\"></A></TD>";
>>Kako promjeniti sadrzaj navigacije? - Nadite sljedece kodove te unesite naziva pod navodnike. Primjer:
- Code:
m.addItem("Logiraj se");
Tips
>> Kako izmjeniti tekst koji se prikazuje?
Nadam se da vam se svida i da ce vam koristiti tutorial. Uzivajte
Kod preuzet sa: http://www.forumoforumima.net