第二章 JavaScript显示菜单效果--推动式菜单

最新推荐文章于 2024-10-10 06:32:25 发布

summer0214

最新推荐文章于 2024-10-10 06:32:25 发布

阅读量431

点赞数

分类专栏： JavaScript实例讲解文章标签： javascript function firefox border string float

本文链接：https://blog.csdn.net/summer0214/article/details/3663660

版权

JavaScript实例讲解专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果演示：

JavaScript代码：

DIV+CSS代码：

　　*{margin:0;padding:0;border:0;}
　　#nav {
　　　width:180px;
　　　line-height: 24px;
　　　list-style-type: none;
　　　text-align:left;
　　　/*定义整个ul菜单的行高*/
　　}
　　/*==================一级目录===================*/
　　#nav a {
　　　width: 220px;
　　　display: block;
　　　padding-left:10px;
　　　font-size:13px;
　　　/*Width(一定要)，否则下面的Li会变形*/
　　}
　　#nav li {
　　　background:#D0FFFF; /*一级目录的背景色*/
　　　border-bottom:#FFF 1px solid; /*下面的一条白边*/
　　　float:left;
　　　//float：left,本不应该设置，但由于在Firefox不能正常显示继承Nav的width,限制宽度，li自动向下延伸
　　}
　　#nav li a:hover{
　　　background:#CC0000; /*一级目录onMouseOver显示的背景色*/
　　}
　　#nav a:link {
　　　color:#666; text-decoration:none;
　　}
　　#nav a:visited {
　　　color:#666;text-decoration:none;
　　}
　　#nav a:hover {
　　　color:#FFF;text-decoration:none;font-weight:bold;
　　}
　　/*==================二级目录===================*/
　　#nav li ul {
　　　list-style:none;
　　　text-align:left;
　　}
　　#nav li ul li{
　　　background:#ACD6FF; /*二级目录的背景色*/
　　}
　　#nav li ul a{
　　　padding-left:30px;
　　　width:200px;
　　　/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
　　}
　　/*下面是二级目录的链接样式*/
　　#nav li ul a:link {
　　　color:#666; text-decoration:none;
　　}
　　#nav li ul a:visited {
　　　color:#666;text-decoration:none;
　　}
　　#nav li ul a:hover {
　　　color:#F3F3F3;
　　　text-decoration:none;
　　　font-weight:normal;
　　　background:#CC0000;
　　　/* 二级onmouseover的字体颜色、背景色*/
　　}
　　/*==============================*/
　　#nav li:hover ul {
　　　left: auto;
　　}
　　#nav li.sfhover ul {
　　　left: auto;
　　}
　　#content {
　　　clear: left;
　　}
　　#nav ul.collapsed{
　　　display: none;
　　}
　　#PARENT{
　　　width:300px;
　　　padding-left:20px;
　　}

<body>与</body>之间代码：

　<div id="PARENT">
　　<ul id="nav">
　　　<li>
　　　　<a href="#Menu=ChildMenu1" οnclick="DoMenu('ChildMenu1')">第一章 JavaScript显示日期时间</a>
　　　　<ul id="ChildMenu1" class="collapsed">
　　　　　<li><a href="unit 1-1.html" target="_blank">日期星期</a></li>
　　　　　<li><a href="unit 1-2.html" target="_blank">数字时钟</a></li>
　　　　　<li><a href="unit 1-3.html" target="_blank">背景数字时钟</a></li>
　　　　</ul>
　　　</li>
　　　<li>
　　　　<a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">第二章 JavaScript显示菜单效果</a>
　　　　<ul id="ChildMenu2" class="collapsed">
　　　　　<li><a href="unit 2-1.html" target="_blank">导航条式菜单</a></li>
　　　　　<li><a href="unit 2-2-1.html">二维树型菜单</a></li>
　　　　　<li><a href="unit 2-2-2.html">二维下拉推动式菜单</a></li>
　　　　　<li><a href="unit 2-2-3.html">二维隐藏下拉式菜单</a></li>
　　　　　<li><a href="unit 2-2-4.html">二维隐藏右显示式菜单</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="#">以下章节还在建设中</a></li>
　　</ul>
　</div>