求javascript导航栏图钉特效，点击图钉导航栏弹出，再点击图钉导航栏缩回，急

我想在网页中实现一个可伸缩导航条，像VS里的“工具箱”导航条一样，点击图钉“工具箱”弹出，再点击“工具箱”收回。很多程序都有这个特效。

以前的动易系统(asp版的)有这个功能,下个动易系统参考下吧,是用js+div来实现的

把如下代码加入 <body>区域中
<script>
function hideAll() {
for(i=0;i <odiv.length;i++) {
odiv[i].style.display="none";
}
}

function showObj(num) {

if (odiv[num].style.display=="none") {
hideAll();
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}

}
</script>
<table>
<tr >
<td>
<a href="#" onclick="showObj(0)">菜单一 </a> <br>
<div id="odiv" style="display:none">l1 <br>l2 <br>l3 </div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(1)">菜单二 </a> <br>
<div id="odiv" style="display:none">l11 <br>l12 <br>l13 </div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(2)">菜单三 </a> <br>
<div id="odiv" style="display:none">l111 <br>l112 <br>l113 </div>
</td>
</tr>
</table>

试试看~

我找到了贴出来给大家共享一下，并请帮我改改，我要的是点击图钉后DIV层隐藏到了左边或右边，再点击又显示出来，像visual studio里的工具箱和属性模块一样，但我找的是隐藏到了上边。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtTree.aspx.cs" Inherits="WebPageSearch_ExtTree" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ExtTree </title>
<script type="text/javascript" src="../JS/nifty.js"> </script>
<script type="text/javascript" src="../JS/JS.js"> </script>
<link rel="stylesheet" type="text/css" href="../CSS/niftyCorners.css" />
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css" />
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#DivSearch","all","#FFFFFF","#D4DDFF","border");
Rounded("div#DivResult","all","#FFFFFF","#D4DDFF","border");
SetOnLock();
SetTextBoxOnfocus();
}
</script>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body>
<form id="formExtTree" runat="server">
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 4px; top: 0px;">
<div id="DivSearch" onmouseover="ShowSearchDiv()">
<div align="right"> <img id="ImgLock" src=../Images/UnLock.jpg style="margin:0px;" onclick="SetOnLock()" onmouseover="SetClassName(this,'MouseOnLockImg')" onmouseout="SetClassName(this,'')"/> </div>
<div >
sdfgsdfgsdfgsdfgsdf </div>
</div>
<div> <img src=../Images/downMenu.jpg style="margin:0px; line-height:5px" onmouseover="ShowSearchDiv()" /> </div>
</div>
<input type="hidden" value="" id="HidLockType" runat="server" /> <br />
<div style="text-align:center">
</form>
</body>
</html>

下面是“JS.js”文件

function ShowSearchDiv()
{
var DivSearch=document.getElementById("DivSearch");
DivSearch.style.display="";
window.event.cancelBubble = true;
}
function HidSearchDiv()
{
var DivSearch=document.getElementById("DivSearch");
DivSearch.style.display="none";
}
function SetClassName(sender,setclass)
{
sender.className=setclass;
}
function SetOnLock()
{
var HidLockType=document.getElementById("HidLockType");
if(HidLockType)
{
var sender=document.getElementById("ImgLock");
if(HidLockType.value=="UnLock")
{
HidLockType.value="IsLock";
sender.src="../Images/Lock.jpg";
document.body.onmouseover=null;
var DivSearch=document.getElementById("DivSearch");
DivSearch.style.display="";
}
else
{
HidLockType.value="UnLock";
sender.src="../Images/UnLock.jpg";
document.body.onmouseover=HidSearchDiv;
}
}
}

另外有三个图片

downMenu.jpg //带三角的竖条
Lock.jpg //锁定钉
UnLock.jpg //解除锁定钉

等下午研究一下，

nifty.js

function NiftyCheck(){
if(!document.getElementById || !document.createElement)
return(false);
isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName);
if(Array.prototype.push==null){Array.prototype.push=function(){
this[this.length]=arguments[0]; return(this.length);}}
return(true);
}

function Rounded(selector,wich,bk,color,opt){
var i,prefixt,prefixb,cn="r",ecolor="",edges=false,eclass="",b=false,t=false;

if(color=="transparent"){
cn=cn+"x";
ecolor=bk;
bk="transparent";
}
else if(opt && opt.indexOf("border")>=0){
var optar=opt.split(" ");
for(i=0;i <optar.length;i++)
if(optar[i].indexOf("#")>=0) ecolor=optar[i];
if(ecolor=="") ecolor="#666";
cn+="e";
edges=true;
}
else if(opt && opt.indexOf("smooth")>=0){
cn+="a";
ecolor=Mix(bk,color);
}
if(opt && opt.indexOf("small")>=0) cn+="s";
prefixt=cn;
prefixb=cn;
if(wich.indexOf("all")>=0){t=true;b=true}
else if(wich.indexOf("top")>=0) t="true";
else if(wich.indexOf("tl")>=0){
t="true";
if(wich.indexOf("tr") <0) prefixt+="l";
}
else if(wich.indexOf("tr")>=0){
t="true";
prefixt+="r";
}
if(wich.indexOf("bottom")>=0) b=true;
else if(wich.indexOf("bl")>=0){
b="true";
if(wich.indexOf("br") <0) prefixb+="l";
}
else if(wich.indexOf("br")>=0){
b="true";
prefixb+="r";
}
var v=getElementsBySelector(selector);
var l=v.length;
for(i=0;i <l;i++){
if(edges) AddBorder(v[i],ecolor);
if(t) AddTop(v[i],bk,color,ecolor,prefixt);
if(b) AddBottom(v[i],bk,color,ecolor,prefixb);
}
}

function AddBorder(el,bc){
var i;
if(!el.passed){
if(el.childNodes.length==1 && el.childNodes[0].nodeType==3){
var t=el.firstChild.nodeValue;
el.removeChild(el.lastChild);
var d=CreateEl("span");
d.style.display="block";
d.appendChild(document.createTextNode(t));
el.appendChild(d);
}
for(i=0;i <el.childNodes.length;i++){
if(el.childNodes[i].nodeType==1){
el.childNodes[i].style.borderLeft="1px solid "+bc;
el.childNodes[i].style.borderRight="1px solid "+bc;
}
}
}
el.passed=true;
}

function AddTop(el,bk,color,bc,cn){
var i,lim=4,d=CreateEl("b");

if(cn.indexOf("s")>=0) lim=2;
if(bc) d.className="artop";
else d.className="rtop";
d.style.backgroundColor=bk;
for(i=1;i <=lim;i++){
var x=CreateEl("b");
x.className=cn + i;
x.style.backgroundColor=color;
if(bc) x.style.borderColor=bc;
d.appendChild(x);
}
el.style.paddingTop=0;
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,color,bc,cn){
var i,lim=4,d=CreateEl("b");

if(cn.indexOf("s")>=0) lim=2;
if(bc) d.className="artop";
else d.className="rtop";
d.style.backgroundColor=bk;
for(i=lim;i>0;i--){
var x=CreateEl("b");
x.className=cn + i;
x.style.backgroundColor=color;
if(bc) x.style.borderColor=bc;
d.appendChild(x);
}
el.style.paddingBottom=0;
el.appendChild(d);
}

function CreateEl(x){
if(isXHTML) return(document.createElementNS('http://www.w3.org/1999/xhtml',x));
else return(document.createElement(x));
}

function getElementsBySelector(selector){
var i,selid="",selclass="",tag=selector,f,s=[],objlist=[];

if(selector.indexOf(" ")>0){ //descendant selector like "tag#id tag"
s=selector.split(" ");
var fs=s[0].split("#");
if(fs.length==1) return(objlist);
f=document.getElementById(fs[1]);
if(f) return(f.getElementsByTagName(s[1]));
return(objlist);
}
if(selector.indexOf("#")>0){ //id selector like "tag#id"
s=selector.split("#");
tag=s[0];
selid=s[1];
}
if(selid!=""){
f=document.getElementById(selid);
if(f) objlist.push(f);
return(objlist);
}
if(selector.indexOf(".")>0){ //class selector like "tag.class"
s=selector.split(".");
tag=s[0];
selclass=s[1];
}
var v=document.getElementsByTagName(tag); // tag selector like "tag"
if(selclass=="")
return(v);
for(i=0;i <v.length;i++){
if(v[i].className.indexOf(selclass)>=0){
objlist.push(v[i]);
}
}
return(objlist);
}

function Mix(c1,c2){
var i,step1,step2,x,y,r=new Array(3);
if(c1.length==4)step1=1;
else step1=2;
if(c2.length==4) step2=1;
else step2=2;
for(i=0;i <3;i++){
x=parseInt(c1.substr(1+step1*i,step1),16);
if(step1==1) x=16*x+x;
y=parseInt(c2.substr(1+step2*i,step2),16);
if(step2==1) y=16*y+y;
r[i]=Math.floor((x*50+y*50)/100);
}
return("#"+r[0].toString(16)+r[1].toString(16)+r[2].toString(16));
}

做一个成型的导航
控制left属性即可

收藏 不显示删除回复显示所有回复显示星级回复显示得分回复 求javascript导航栏图钉特效，点击图钉导航栏弹出，再点击图钉导航栏缩回，急[问题点数:120分，结帖人:zhang13772562635]

收藏求javascript导航栏图钉特效，点击图钉导航栏弹出，再点击图钉导航栏缩回，急[问题点数:120分，结帖人:zhang13772562635]