Искам да вкарам дизайн на javascript menu

Ivkoni_ · 7 Януари 2009

Искам да вкарам дизайн на javascript menu но незнам как. Някой ако може да ми помогне

svilkaa · 7 Януари 2009

Дай кода на това меню

Ivkoni_ · 7 Януари 2009

Код:

<head> 
<title>Cascading Menu</title> 
</head> 
<body> 
<script language="JavaScript"> 
function goToURL() { history.go(-1); } 
</script> 
<style> 
.menu 
{ 
background-color:#2B6Ebb; 
border:1px solid darkblue; 
width:150px; 
font-size:11px; 
font-family:verdana; 
position: absolute; 
font:bold; 
color: #ffffff; 
cursor: hand; 
} 
.item_panel 
{ 
width:150px; 
border-left:1px solid darkblue; 
border-right:1px solid darkblue; 
clip:rect(0,150,0,0); 
position:absolute; 
} 
.item_panel a 
{ 
text-decoration:none; 
color:black; 
cursor:hand; 
} 
.item 
{ 
background-color: #E9F0F8; 
width: 148px; 
font-size: 10px; 
font-family: verdana; 

} 
</style> 
<script language="JavaScript"> 
var height = 20; // height of the menu headers 
var iheight = 15; // height of the menu_items 
var bgc = "#E9F0F8" // background color of the item 
var tc = "black" // text color of the item 
var over_bgc = "white"; 
var over_tc = "#004891"; 
var speed = 0; 
var timerID = ""; 
var N = (document.all) ? 0 : 1; 
var width = 152; 
var self_menu = new Array(); 
function write_menu() 
{ 
smc = 0; // count the position of the self_menu 
document.write("<div style='position:absolute'>"); 
mn = 0; 
mni = 1; 
start = -1; 
for(i=0;i<Link.length;i++) 
{ 
la = Link[i].split("|"); 
if (la[0] == "0") 
{ 
if(start == 0) 
{ 
document.write("</div>"); 
h = csmc * iheight; 
tmn = mn; //-h 
self_menu[smc] = new Array(tmn,h,0,-2); 
smc++; 
mn--; 
} 
csmc = 0; 
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>"); 
self_menu[smc] = new Array(mn,height,0,mni); 
smc++; 
mni++; 
mn+=height; 
start = 1; 
} 
else 
{ 
if(start == 1) 
{ 
if(N)mn+=2; 
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>"); 
start = 0; 
} 

document.write("<a href='"+la[2]+"'"); 
if (la[3] != "") document.write(" target='" + la[3] + "' "); 
document.write("><div class='item' id='d"+i+"' style='height:"+iheight); 
if (N) document.write(";width:150"); 
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>"); 
csmc++; 
} 
} 
if (start == 0) 
{ 
document.write("</div>"); 
h = csmc * iheight; 
tmn = mn + 5; //-h 
self_menu[smc] = new Array(tmn,h,0); 
name = "down" + (self_menu.length-1); 
obj = document.getElementById(name); 
obj.style.borderBottomColor = "darkblue"; 
obj.style.borderBottomWidth = 1; 
obj.style.borderBottomStyle = "solid"; 
} 
document.write("</div>");} 
function color(obj) 
{ 
document.getElementById(obj).style.backgroundColor = over_bgc; 
document.getElementById(obj).style.color = over_tc 
} 

function uncolor(obj) 
{ 
document.getElementById(obj).style.backgroundColor = bgc; 
document.getElementById(obj).style.color = tc 
} 

function pull_down(nr,c) 
{ 
if (timerID == "") 
{ 
to = self_menu[nr+1][1] 
begin = nr + 2; 
if (timerID != "") clearTimeout(timerID); 
if (self_menu[nr+1][2] == 0) 
{ 
self_menu[nr+1][2] = 1; 
if(nr == self_menu.length-2) {to++;} 
epull_down(begin,to,0); 
} 
else 
{ 
to = 0; 
self_menu[nr+1][2] = 0; 
name = "down"+(nr+2); 
open_item = 0; 
for(i=0;i<nr;i++) 
{ 
if(self_menu[i][2] == 1) 
{open_item += self_menu[i][1]; 
} 
} 
if (N == false) {open_item-= (c*1)}; 
if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;} 
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height); 
epull_up(begin,to,val); 
} 
} 
} 

function epull_down(nr,to,nowv) 
{ 
name = "down" + (nr-1); 
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)"; 
for (i=nr;i<self_menu.length;i++) 
{ 
name = "down" + i; 
obj = document.getElementById(name); 
obj.style.top = parseInt(obj.style.top)+1; 
} 
nowv++; 
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed); 
else timerID = ""; 
} 

function epull_up(nr,to,nowv) 
{ 
name = "down" + (nr-1); 
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)"; 
for (i=nr;i<self_menu.length;i++) 
{ 
name = "down" + i; 
obj = document.getElementById(name); 
obj.style.top = parseInt(obj.style.top)-1; 
} 
nowv--; 
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed); 
else timerID = ""; 
} 

function startup(nr) 
{ 
write_menu(); 
if (nr != 0) 
{ 
for(i=0;i<self_menu.length;i++) 
{ 
if(self_menu[i][3] == nr) pull_down(i,nr) 
i==self_menu.length; 
} 
} 
} 
</script> 
<table width=150><tr><td> 
<script language="JavaScript"> 
//Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)" 
var Link = new Array(); 
Link[0] = "0|Home"; 
Link[1] = "1|Picture|page2.html|"; 
Link[2] = "1|Chat|page7.html|"; 
Link[3] = "1|Forom|http://tyistercho.web.data.bg/phpbb/|"; 
Link[4] = "1|Търсачка|page5.html|"; 
Link[5] = "0|Видео"; 
Link[6] = "1|Онлаин телевизия|page10.html|"; 
Link[7] = "1|Клипове|page7.html|"; 
Link[8] = "0|Екип"; 
Link[9] = "1|За контакт|page8.html|"; 
Link[10] = "0|Игри"; 
Link[11] = "1|Кракове|http://store4.data.bg/tyistercho/Keygens/|"; 
startup(4); 
</script> 
</td> 
</tr> 
</table><br><br><br><br><br><br> 
</body> 
</html>

Искам да се промени цвета, съдържанието и да е с заоблени ъгли.

svilkaa · 7 Януари 2009

За да смениш цвета е нужно да редактираш стиловете:

.menu {
background-color:#2B6Ebb;
border:1px solid darkblue;
width:150px;
font-size:11px;
font-family:verdana;
position: absolute;
font:bold;
color: #ffffff;
cursor: hand;
}
.item_panel {
width:150px;
border-left:1px solid darkblue;
border-right:1px solid darkblue;
clip:rect(0,150,0,0);
position:absolute;
}
.item_panel a {
text-decoration:none;
color:black;
cursor:hand;
}
.item {
background-color: #E9F0F8;
width: 148px;
font-size: 10px;
font-family: verdana;
}

За съдържанието:

<script language="JavaScript">
var Link = new Array();
Link[0] = "0|Home";
Link[1] = "1|Picture|page2.html|";
Link[2] = "1|Chat|page7.html|";
Link[3] = "1|Forom|http://tyistercho.web.data.bg/phpbb/|";
Link[4] = "1|Търсачка|page5.html|";
Link[5] = "0|Видео";
Link[6] = "1|Онлаин телевизия|page10.html|";
Link[7] = "1|Клипове|page7.html|";
Link[8] = "0|Екип";
Link[9] = "1|За контакт|page8.html|";
Link[10] = "0|Игри";
Link[11] = "1|Кракове|http://store4.data.bg/tyistercho/Keygens/|";
startup(4);
</script>

Заоблени ъгли:
- http://web-tourist.net/login/login/view.php?st=2123
- http://web-tourist.net/login/login/view.php?st=2094

Ivkoni_ · 7 Януари 2009

Мери а да питам да не отварям нова тема.
Значи имам дизайн, но искам да направя така че body.jpg да се разтяга надолу според зависи от съдържанието. Смисъл както е при форума phpbb2 като му сложиш форуми да слиза надолу.

Искам да вкарам дизайн на javascript menu

Ivkoni_

Registered

svilkaa

Registered

Ivkoni_

Registered

svilkaa

Registered

Ivkoni_

Registered