CSDN博客

img david_zl

JavaScript 结合 CSS 制作带背景图的下拉菜单

发表于2004/7/14 15:57:00  2866人阅读

剥离动网论坛的 JavaScript & CSS 文件,手工做了一个自己的下拉菜单,不用类库真麻烦。

不过,还是先谢谢动网共享源码。

样式一

样式二

=============================

Demo.htm 代码

<html>
 <head>
  <title>演示动态创建菜单及 CSS 风格</title>
  <script language="javascript" src="hudark.js" type="text/JavaScript"></script>
  <link href="main.css" type="text/css" rel="stylesheet">
 </head>
 <body MS_POSITIONING="GridLayout">
  <TABLE height="588" cellSpacing="0" cellPadding="0" width="179" border="0" ms_2d_layout="TRUE">
   <TR>
    <TD width="0" height="0"></TD>
    <TD width="10" height="0"></TD>
    <TD width="169" height="0"></TD>
   </TR>
   <TR vAlign="top">
    <TD width="0" height="15"></TD>
    <TD colSpan="2" rowSpan="2">
     <form id="form1" method="post" runat="server">
      <TABLE height="162" cellSpacing="0" cellPadding="0" width="576" border="0" ms_2d_layout="TRUE">
       <TR vAlign="top">
        <TD width="168" height="136"></TD>
        <TD width="408"></TD>
       </TR>
       <TR vAlign="top">
        <TD height="26"></TD>
        <TD>
         <table ID="Table1" border="tableBorder2" cellSpacing="0" height="25" cellPadding="0" width="407"
          align="center">
          <tr>
           <td><A onmouseover="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&amp;boardid=0>腾讯</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&amp;boardid=0>主题数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&amp;boardid=0>总帖数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&amp;boardid=0>在线图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineinfo&amp;boardid=0>在线情况</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&amp;boardid=0>用户组在线图例</a></div>')">例1</A></td>
           <td>A2</td>
           <td><A onmouseover="showmenu2(event,'<div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&amp;boardid=0>腾讯</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&amp;boardid=0>主题数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&amp;boardid=0>总帖数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&amp;boardid=0>在线图例</a></div>')">例2</A></td>
          </tr>
          <tr>
           <td>B1</td>
           <td>B2</td>
           <td>B3</td>
          </tr>
         </table>
        </TD>
       </TR>
      </TABLE>
     </form>
    </TD>
    <TD></TD>
   </TR>
   <TR vAlign="top">
    <TD width="0" height="573"></TD>
    <TD></TD>
    <TD>
     <div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')"
      onmouseout="highlightmenu(event,'off');dynamichide(event)"></div>
    </TD>
   </TR>
   <FONT face="宋体"></FONT>
   <div class="menuskin2" id="popmenu2" onmouseover="clearhidemenu();highlightmenu2(event,'on')"
    onmouseout="highlightmenu2(event,'off');dynamichide(event)"></div>
  </TABLE>
 </body>
</html>

=============================

Main.css 代码

A:link { COLOR: #000000; TEXT-DECORATION: none }
A:active { COLOR: #000000; TEXT-DECORATION: none }
A:visited { COLOR: #000000; TEXT-DECORATION: none }
A:hover { COLOR: #4455aa; filter:alpha(50); TEXT-DECORATION: none; }

B:link { COLOR: #000000; TEXT-DECORATION: none }
B:active { COLOR: #000000; TEXT-DECORATION: none }
B:visited { COLOR: #000000; TEXT-DECORATION: none }
B:hover { COLOR: #4455aa; TEXT-DECORATION: none; }
 
BODY { SCROLLBAR-FACE-COLOR: #dee3e7; FONT-SIZE: 11px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #dee3e7; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #d1d7dc; SCROLLBAR-ARROW-COLOR: #006699; SCROLLBAR-TRACK-COLOR: #efefef; FONT-FAMILY: Verdana,宋体; SCROLLBAR-DARKSHADOW-COLOR: #98aab1 }
FONT { LINE-HEIGHT: normal }
TD { FONT-SIZE: 11px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana,宋体 }
TH { FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(Skins/Default/css/default/bg1.gif); COLOR: white; BACKGROUND-COLOR: #4455aa }
TD.TableTitle2 { BACKGROUND-COLOR: #e4e8ef }
TD.TableBody1 { LINE-HEIGHT: normal; BACKGROUND-COLOR: #ffffff }
TD.TableBody2 { LINE-HEIGHT: normal; BACKGROUND-COLOR: #e4e8ef }
TD.TopDarkNav { BACKGROUND-IMAGE: url(Skins/Default/css/default/topbg.gif) }
TD.TopLighNav { BACKGROUND-IMAGE: url(Skins/Default/css/default/bottombg.gif) }
TD.TopLighNav1 { BACKGROUND-IMAGE: url(Skins/Default/css/default/tabs_m_tile.gif) }
TD.TopLighNav2 { BACKGROUND-COLOR: #ffffff }
 
.tableBorder1 { BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; WIDTH: 98%; BORDER-BOTTOM: 1px; BACKGROUND-COLOR: #6595d6 }
.tableBorder2 { BORDER-RIGHT: #dedede 1px solid; BORDER-TOP: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; WIDTH: 98%; BORDER-BOTTOM: #dedede 1px solid; BACKGROUND-COLOR: #efefef }

#TableTitleLink A:link { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:visited { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:active { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:hover { COLOR: #ffffff; TEXT-DECORATION: underline }
 
INPUT { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
SELECT { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
TEXTAREA { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
OPTION { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
 
.normalTextSmall { FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif }
.menuskin { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BACKGROUND-IMAGE: url(Skins/Default/tencent.jpg); VISIBILITY: hidden; FONT: 12px Verdana; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; BACKGROUND-COLOR: #efefef }
.menuskin A { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; BEHAVIOR: url(inc/noline.htc); COLOR: black; TEXT-DECORATION: none }

.menuskin2 { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BACKGROUND-IMAGE: url(Skins/Default/tencent.jpg); VISIBILITY: hidden; FONT: 12px Verdana; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; BACKGROUND-COLOR: #efefef alpha(5) }
.menuskin2 B { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; BEHAVIOR: url(inc/noline.htc); COLOR: black; TEXT-DECORATION: none }
 
#mouseoverstyle {  BORDER-RIGHT: #597db5 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #597db5 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 2px; BORDER-LEFT: #597db5 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #597db5 1px solid; BACKGROUND-COLOR: #c9d5e7; }
#mouseoverstyle A { COLOR: black; }

#mouseoverstyle2 {  COLOR:White; BORDER-RIGHT: #597db5 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #597db5 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 2px; BORDER-LEFT: #597db5 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #597db5 1px solid; BACKGROUND-COLOR: #c9d5e7 alpha(5); }
#mouseoverstyle2 B { COLOR: black; }

.menuitems { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px }
.menuitems2 { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px; }

A.navlink:link { COLOR: #000000; TEXT-DECORATION: none }
A.navlink:visited { COLOR: #000000; TEXT-DECORATION: none }
A.navlink:hover { COLOR: #003399; TEXT-DECORATION: none }

.BrightClass { BACKGROUND-COLOR: #d7d7d7 }
 
DIV.quote { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f3f3f3; PADDING-BOTTOM: 5px; MARGIN: 5px 20px; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid }
DIV.HtmlCode { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND: #fdfddf; PADDING-BOTTOM: 5px; MARGIN: 5px 20px; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: ncursive }

 

====================================

Hudark.js 代码

//Pop-it menu- By Dynamic Drive - Modified by Wbird
//For full source code and more DHTML scripts, visit  http://www.dynamicdrive.com
//This credit MUST stay intact for use

var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=18 //菜单距连接文字顶端距离

var fo_shadows=new Array()
var linkset=new Array()

////No need to edit beyond here

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,vmenu,mod)
{
 if (!document.all&&!document.getElementById&&!document.layers)
  return
  
 which=vmenu
 
 clearhidemenu()
 ie_clearshadow()
 
 menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
 menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
 
 if (ie4||ns6)
  menuobj.innerHTML=which
 else{
  menuobj.document.write(''+which+'')
  menuobj.document.close()
 }
 
 menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
 menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
 
 eventX=ie4? event.clientX : ns6? e.clientX : e.x
 eventY=ie4? event.clientY : ns6? e.clientY : e.y
 
 var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
 var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
 
 if (rightedge  menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
 else
  menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
  
 if (bottomedge  menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
 else
  menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
   
 menuobj.thestyle.visibility="visible"
 ie_dropshadow(menuobj,"#999999",3)
 
 return false
}

function showmenu2(e,vmenu,mod)
{
 if (!document.all&&!document.getElementById&&!document.layers)
  return
  
 which=vmenu
 
 clearhidemenu()
 ie_clearshadow()
 
 menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu2") : ns4? document.popmenu : ""
 menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
 
 if (ie4||ns6)
  menuobj.innerHTML=which
 else{
  menuobj.document.write(''+which+'')
  menuobj.document.close()
 }
 
 menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
 menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
 
 eventX=ie4? event.clientX : ns6? e.clientX : e.x
 eventY=ie4? event.clientY : ns6? e.clientY : e.y
 
 var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
 var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
 
 if (rightedge  menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
 else
  menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
  
 if (bottomedge  menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
 else
  menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
   
 menuobj.thestyle.visibility="visible"
 ie_dropshadow(menuobj,"#999999",3)
 
 return false
}

function ie_y(e){ 
 var t=e.offsetTop; 
 while(e=e.offsetParent){ 
  t+=e.offsetTop; 
 } 
 return t; 

function ie_x(e){ 
 var l=e.offsetLeft; 
 while(e=e.offsetParent){ 
  l+=e.offsetLeft; 
 } 
 return l; 
}
 
function ie_dropshadow(el, color, size)
{
 var i;
 for (i=size; i>0; i--)
 {
  var rect = document.createElement('div');
  var rs = rect.style
  rs.position = 'absolute';
  rs.left = (el.style.posLeft + i) + 'px';
  rs.top = (el.style.posTop + i) + 'px';
  rs.width = el.offsetWidth + 'px';
  rs.height = el.offsetHeight + 'px';
  rs.zIndex = el.style.zIndex - i;
  rs.backgroundColor = color;
  var opacity = 1 - i / (i + 1);
  rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
  //el.insertAdjacentElement('afterEnd', rect);
  fo_shadows[fo_shadows.length] = rect;
 }
}

function ie_clearshadow()
{
 for(var i=0;i {
  if (fo_shadows[i])
   fo_shadows[i].style.display="none"
 }
 
 fo_shadows=new Array();
}

function contains_ns6(a, b)
{
 while (b.parentNode)
  if ((b = b.parentNode) == a)
   return true;
 return false;
}

function hidemenu()
{
 if (window.menuobj)
  menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
 ie_clearshadow()
}

function dynamichide(e)
{
 if (ie4&&!menuobj.contains(e.toElement))
  hidemenu()
 else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  hidemenu()
}

function delayhidemenu()
{
 if (ie4||ns6||ns4)
  delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu()
{
 if (window.delayhide)
  clearTimeout(delayhide)
}

function highlightmenu(e,state)
{
 if (document.all)
  source_el=event.srcElement
 else if (document.getElementById)
  source_el=e.target
  
 if (source_el.className=="menuitems")
 {
  source_el.id=(state=="on")? "mouseoverstyle" : ""
 }
 else{
  while(source_el.id!="popmenu")
  {
   source_el=document.getElementById? source_el.parentNode : source_el.parentElement
   if (source_el.className=="menuitems")
   {
    source_el.id=(state=="on")? "mouseoverstyle" : ""
   }
  }
 }
}

function highlightmenu2(e,state)
{
 if (document.all)
  source_el=event.srcElement
 else if (document.getElementById)
  source_el=e.target
  
 if (source_el.className=="menuitems2")
 {
  source_el.id=(state=="on")? "mouseoverstyle2" : ""
 }
 else{
  while(source_el.id!="popmenu2")
  {
   source_el=document.getElementById? source_el.parentNode : source_el.parentElement
   if (source_el.className=="menuitems2")
   {
    source_el.id=(state=="on")? "mouseoverstyle2" : ""
   }
  }
 }
}

if (ie4||ns6)
 document.onclick=hidemenu

//HTML过滤函数
function HTMLEncode(text)
{
 text = text.replace(/&/g, "&") ;
 text = text.replace(/"/g, """) ;
 text = text.replace(/ text = text.replace(/>/g, ">") ;
 text = text.replace(/'/g, "’") ;

 return text ;
}

 

====================================

用到的图片文件

/Skins/Default 的目录

2004-07-13  16:05                   82 minus.gif
2004-07-13  16:05                   85 plus.gif
2004-07-13  23:02                2,521 dvmenubg3.gif
2003-11-21  02:31                  819 btn_pers_tile.gif
2004-07-14  10:18               11,745 hudark.jpg
2004-07-14  10:40               11,212 hudark3.jpg
2004-07-14  10:40               11,212 tencent.jpg

/Skins/Default/css/default 的目录

2004-07-13  16:03                   53 topbg.gif
2004-07-13  16:03                  268 bg1.gif
2004-07-13  16:03                   53 bottombg.gif
2004-07-13  16:03                   99 tabs_m_tile.gif

0 0

相关博文

我的热门文章

img
取 消
img