Javascript og CSS i slide-down menu
Jeg har hentet en slide down menu som jeg vil have til at passe med mit design! Hvis der er andre "slide down menu" scripts som er lettere og style kan jeg godt bruge det istedet, men det skal gerne virke lige som det her.Her er min slidedown menu script:
--------------------------------------------
CSS'en der fulgte med:
<!-- Paste this code into the CSS section of your HTML document -->
.menu {
position:relative;
background-color:gold;
border:1px solid darkblue;
width:150;
font-size:11px;
font-family:verdana;
font:bold;
position:absolute;
cursor:se-resize;
}
.item_panel {
width:150;
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:lightyellow;
width:148;
font-size:10px;
font-family:verdana;
}
--------------------------------------------
Selve scriptet:
<!-- Paste this code into an external JavaScript file named: sliding_menu.js.js -->
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: ScriptBreaker :: http://www.scriptbreaker.com/ */
var height = 20; // height of the menu headers
var iheight = 15; // height of the menu_items
var bgc = "lightyellow" // background color of the item
var tc = "black" // text color of the item
var over_bgc = "silver";
var over_tc = "red";
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;
}
}
}
--------------------------------------------
Det der sættes ud på siden:
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="sliding_menu.js.js"></script>
<!-- Paste this code into the BODY section of your HTML document -->
<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|Home|http://www.javascriptsource.com|";
Link[2] = "1|More Scripts|http://www.javascript.com|";
Link[3] = "1|Contact|http://www.javascriptsource.com/contact-us.html|";
Link[4] = "1|Traffic|http://www.thecounter.com|";
Link[5] = "0|Access";
Link[6] = "1|Login|Login.asp|";
Link[7] = "1|Logout|Logout.asp|"
Link[8] = "0|Scripts";
Link[9] = "1|Asp|http://www.javascriptsource.com|";
Link[10] = "1|JavaScript|http://www.javascriptsource.com|";
Link[11] = "0|Links";
Link[12] = "1|JavaScript sites|http://www.javascripts.com|blank";
startup(4);
</script>
</td></tr></table>
--------------------------------------------
Jeg bruger et design som jeg har hentet fra oswd.org og i kan se et eksempel her:
http://www.oswd.org/design/preview/id/2842
CSS'en ser sådan her ud:
--------------------------------------------
body {
margin: 25px 0px 0px 0px;
background-color: #FFFFFF;
background-image: url(images/bg.gif);
background-position: center;
background-repeat: repeat-y;
text-align: center;
}
/***********************************
CONTAINERS
***********************************/
#main {
width: 720px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #FFFFFF;
}
#top-nav {
width: 715px;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 55%;
color: #999999;
text-align: right;
vertical-align: bottom;
height: 18px;
line-height: 18px;
padding-right: 5px;
border-width: 0px 0px 1px 0px;
border-style: solid;
background-color: #FFFFFF;
}
#navigation {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: bold;
color: #FF9900;
background-color: #FAFAFA;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 5px 15px 5px;
width: 150px;
border-color: #CCCCCC;
border-style: solid;
border-width: 0px 1px 1px 0px;
text-align: right;
}
#content {
margin-left: 170px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #666666;
text-decoration: none;
width: 535px;
text-align: left;
padding: 5px 5px 15px 5px;
background-color: #FFFFFF;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #999999;
padding: 40px 0px 10px 0px;
text-align: center;
clear: left;
background-color: #FFFFFF;
}
/***********************************
LINKS
***********************************/
a {
color: #666666;
text-decoration: none;
}
a.small-navigation {
color: #999999;
text-decoration: none;
}
a.small-navigation:hover {
color: #FF9900;
}
a.navigation {
color: #666666;
border-width: 0px 0px 0px 5px;
border-color: #DEDEDE;
border-style: solid;
text-decoration: none;
display: block;
padding: 3px 0px 3px 5px;
text-align: left;
font-weight: normal;
}
a.navigation:hover {
border-color: #FF9900;
background-color: #EFEFEF;
}
/***********************************
MISCELLANEOUS
***********************************/
#header {
padding: 5px 0px 5px 0px;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 1px 0px;
background-color: #FFFFFF;
}
hr {
width: 100%;
height: 0px;
text-align: center;
border-color: #CCCCCC;
border-style: dashed;
border-width: 0px 0px 1px 0px;
}
h1 {
color: #FF9900;
font-size: 180%;
text-decoration: none;
text-align: right;
margin: 0px 0px 15px 0px;
font-weight: normal;
padding: 2px 50px 0px 0px;
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #FF9900;
background-color: #FFFFFF;
}
p {
border-color: #999999;
border-style: dashed;
border-width: 0px 0px 1px 0px;
padding: 0px 0px 10px 0px;
margin-top: 10px;
}
--------------------------------------------
Det er den der navigation den skal styles efter. Jeg ved godt det er et langt spørgsmål, men jeg håber der er nogen der kan hjælpe. Som sagt hvis der er et nemmere slide-down-script så kan det sagtens bruges. Der er et eksempel på mit nuværende script her: http://javascript.internet.com/navigation/slide-down-menu.html i venstre side!
