学着写的一个二级菜单
作者:admin 日期:2006-12-12
javascript的重要性随着ajax的应用不言而喻,我也要去啃那本javascript权威了.原来很排斥的,现在也要看了.学着写了一个很简单的二级菜单,静态的.
点击下载此文件
关键是在于这个js
和一个样式表
a
{
text-decoration: none;
}
a,a:visited
{
color:#000; background: inherit;
}
body
{
margin: 0; padding:20px; font-size: 12px;
}
dt
{
font-size: 22px; font-weight: bold; margin: 0 0 0 15px;
}
dd
{
margin: 0 0 0 15px;
}
h4
{
margin: 0; padding: 0; font-size:18px; text-align: center;
}
p
{
margin: 0; padding:0 0 0 18px;
}
p a, p a:visited
{
color: #00f; background: inherit;
}
.TreeMenu img.s
{
cursor: hand; vertical-align: middle;
}
.TreeMenu ul
{
padding: 0;
}
.TreeMenu li
{
list-style: none; padding:0;
}
.Closed ul
{
display: none;
}
.Child img.s
{
background: none; cursor: default;
}
#categoryTree ul
{
margin: 0 0 0 17px;
}
#categoryTree img.s
{
width: 34px; height:18px;
}
#categoryTree .Opened img.s
{
background: url(opened.gif) no-repeat 0 1px;
}
#categoryTree .Closed img.s
{
background: url(closed.gif) no-repeat 0 1px;
}
#categoryTree .Child img.s
{
background: url(child.gif) no-repeat 13px 2px;
}
#categoryTree
{
float: left; width:249px; border: 1px solid #99beef; background: #D2E4FC; color: inherit; margin: 3px; padding: 3px;
}
因为很简单,所以就不再多说了.
点击下载此文件
关键是在于这个js
复制内容到剪贴板 程序代码
和一个样式表
复制内容到剪贴板 程序代码
a
{
text-decoration: none;
}
a,a:visited
{
color:#000; background: inherit;
}
body
{
margin: 0; padding:20px; font-size: 12px;
}
dt
{
font-size: 22px; font-weight: bold; margin: 0 0 0 15px;
}
dd
{
margin: 0 0 0 15px;
}
h4
{
margin: 0; padding: 0; font-size:18px; text-align: center;
}
p
{
margin: 0; padding:0 0 0 18px;
}
p a, p a:visited
{
color: #00f; background: inherit;
}
.TreeMenu img.s
{
cursor: hand; vertical-align: middle;
}
.TreeMenu ul
{
padding: 0;
}
.TreeMenu li
{
list-style: none; padding:0;
}
.Closed ul
{
display: none;
}
.Child img.s
{
background: none; cursor: default;
}
#categoryTree ul
{
margin: 0 0 0 17px;
}
#categoryTree img.s
{
width: 34px; height:18px;
}
#categoryTree .Opened img.s
{
background: url(opened.gif) no-repeat 0 1px;
}
#categoryTree .Closed img.s
{
background: url(closed.gif) no-repeat 0 1px;
}
#categoryTree .Child img.s
{
background: url(child.gif) no-repeat 13px 2px;
}
#categoryTree
{
float: left; width:249px; border: 1px solid #99beef; background: #D2E4FC; color: inherit; margin: 3px; padding: 3px;
}
因为很简单,所以就不再多说了.
上一篇: 一个很好用的TabMenu
下一篇: Alert(),Confirm(),prompt()三者的区别
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
下一篇: Alert(),Confirm(),prompt()三者的区别
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 310 | 查看次数: 30937
发表评论