超级完美的DIV+CSS+JS二级树形菜单，刷新保持展开状态

4星 · 超过85%的资源需积分: 49 106 浏览量更新于2024-09-20 收藏 46KB DOC 举报

"该资源提供了一个使用HTML、CSS和JavaScript实现的二级树型菜单解决方案，特别强调了在菜单展开后刷新页面不会影响菜单状态。原始代码存在一个问题，即#nav li的背景色设置未生效，但经过修正后，背景色问题已得到解决，并且代码已经充分注释，方便理解与使用。" 在这个菜单实现中，主要知识点包括： 1. **HTML 结构**：菜单基于`<ul>`和`<li>`元素构建，这是一般用于创建列表的HTML标签。`<ul>`用于创建无序列表，`<li>`则表示列表项。在二级菜单的场景下，二级菜单的`<li>`通常会嵌套在一级菜单的`<li>`内。 2. **CSS 样式**： - `list-style-type:none;`移除了默认的列表样式。 - `#nav`设置了整个菜单的宽度、行高和背景色。 - `#nav li`定义了一级菜单项的样式，包括边框、背景色、字体样式等。 - `#nav li:hover`和`:active`伪类用于控制鼠标悬停和点击时的样式变化。 - `padding-left`用于创建一级菜单项的左侧内边距，以为空出足够的空间展示二级菜单。 3. **JavaScript 功能**：虽然这段代码没有给出JavaScript部分，但在实现“刷新无影响”的功能时，通常会用到JavaScript来存储用户展开的菜单状态，例如使用`localStorage`或`sessionStorage`保存用户的交互状态，然后在页面加载时恢复这些状态。 4. **兼容性考虑**：`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`定义了文档类型，确保在不同浏览器中保持良好的兼容性。 5. **代码注释**：良好的注释有助于开发者理解和维护代码，这里的注释解释了各个CSS选择器的作用，帮助初学者快速理解代码逻辑。 6. **颜色和样式**：通过调整`background-color`、`color`和`font-weight`等属性，可以改变菜单的视觉效果，使其符合设计需求。这个资源对于想要学习如何创建响应用户交互、且在刷新后保持状态的菜单的开发者来说非常有用，尤其适合初级和中级前端开发者。

二级菜单，不论展开几个栏目，刷新不影响，原作中#nav li 的背景色和背景图片分开写

了，造成背景色不生效，本人已修正！绝对超级完美，并且基本都有注释哦~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIV+CSS+JS 二级树型菜单，展开后刷新无影响</title>

<!--

body { font-family: arial, 宋体, serif; font-size:12px; }

* { margin:0px; padding:0px; }

#nav { width:174px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个 ul 菜单的

行高和背景色*/

}

/*==================一级目录===================*/

#nav a { width: 174px; display: block; padding-left:20px; /*Width(一定要)，否则下面的 Li 会变

形*/

}

#nav li { border-bottom:#FFF 1px solid; /* 下面的一条白边 */ float:left; background-color:

#FECFD6; color:#DD1336; font-weight:bold; }

#nav li a:hover { background:#F85B78; /*一级目录 onMouseOver 显示的背景色*/ }

#nav a:link { color:#DD1336; text-decoration:none; }

#nav a:visited { color:#DD1336; 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:#ffecef; /*二级目录的背景色*/ font-weight:normal; }

#nav li ul a { padding-left:20px; width:174px;/* 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:#FFAA1C;/* 二级 onmouseover 的字体颜色、背景色*/

}

/*==============================*/

#nav li:hover ul { left: auto; }

#nav li.sfhover ul { left: auto; }

#content { clear: left; }

#nav ul.collapsed { display: none; }

-->

下载后可阅读完整内容，剩余5页未读，立即下载

张广森

粉丝: 48
资源: 7

超级完美的DIV+CSS+JS二级树形菜单，刷新保持展开状态

vue element-ul实现展开和收起功能的实例代码

jquery点击向上弹出二级菜单，再点击隐藏

嵌套ul li 实现简单的二级菜单

Div+CSS+JS树型菜单

无限级可刷新Js树型菜单

html树目录演示代码css+div+javascript

帮我用html + css + js 写一个可以展开收缩 还可以选择的树型结构

树型答题器：树

大气实用的的jQuery树型时间轴特效.zip

一个基于jQuery的树型插件(OrangeTree)使用介绍

最新资源

帮我用html + css + js 写一个可以展开收缩还可以选择的树型结构