左侧导航菜单div+css样式_css左侧菜单资源-CSDN下载

共12个文件

css：3个

js：3个

svg：2个

左侧导航

3星 · 超过75%的资源需积分: 46 156 浏览量 2015-11-03 15:41:35 上传评论 2 收藏 44KB RAR 举报

在网页设计中，左侧导航菜单是常见的布局方式，尤其在内容丰富的网站中，它能帮助用户快速定位并浏览各级页面。本主题聚焦于使用div和css实现这样的菜单样式，特别是适用于FAQ（常见问题解答）页面的分层级、可折叠的设计。我们需要理解div和css的基础知识。`div`是HTML中的一个块级元素，它主要用于组织和布局网页内容。通过设置div的样式，我们可以控制其在页面上的位置、大小和外观。而CSS（层叠样式表）则是用来描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言，它允许我们将样式规则与结构分离，使网页设计更加灵活和易维护。在创建左侧导航菜单时，我们通常会用到以下CSS属性和技巧： 1. **布局定位**：使用`position`属性（如`relative`、`absolute`或`fixed`）来确定菜单在页面上的位置。对于左侧导航，通常使用`position: fixed`使其始终固定在屏幕左侧。 2. **盒模型**：通过`margin`、`padding`、`border`以及`box-sizing`属性调整菜单项的边距、内填充和边框，从而控制菜单的整体尺寸和间距。 3. **层次结构**：利用`display`属性创建层级结构，如`none`和`block`，实现菜单项的折叠和展开。例如，将子菜单的`display`设置为`none`，当父菜单被点击时，通过JavaScript或CSS伪类（如`:hover`、`:active`）改变其状态为`block`。 4. **过渡效果**：通过`transition`属性添加平滑的动画效果，如展开或折叠菜单时的透明度变化或高度变化，提升用户体验。 5. **响应式设计**：利用媒体查询（`media queries`）确保菜单在不同设备和屏幕尺寸下仍能保持良好的可用性，可能需要调整菜单的宽度、字体大小或布局方式。 6. **颜色和字体**：通过`color`、`background-color`、`font-family`等属性设定菜单的视觉风格，使其与网站整体设计协调。 7. **悬停和选中状态**：使用伪类`:hover`和`:active`为鼠标悬停和点击的菜单项添加不同的样式，突出用户交互。 8. **无障碍性**：考虑使用`aria`属性（如`aria-expanded`、`aria-haspopup`）增强菜单的无障碍性，帮助使用辅助技术的用户理解菜单的状态。在具体实现时，我们可以创建一系列的div元素，每个代表一个菜单项，并根据它们的层级关系嵌套。通过CSS选择器（如后代选择器、子元素选择器等）来分别定义各级菜单的样式。对于分层级的可折叠菜单，可以利用JavaScript或者纯CSS（例如使用`checkbox` hack）来实现菜单项的展开和折叠。在提供的文件"20151030_115352159"中，可能包含了实现这种菜单样式的HTML和CSS代码。通过学习和分析这些代码，你可以更深入地理解如何将上述理论知识应用到实际项目中。同时，也可以借鉴并修改这些代码以适应自己的项目需求，或者作为创建新菜单样式的起点。记得在实践中不断尝试和优化，以打造出既美观又实用的左侧导航菜单。

资源推荐

资源详情

资源评论

收起资源包目录

左侧导航菜单div+css样式.rar （12个子文件）

20151030_115352159

index.html 3KB

img

cd-icons.svg 2KB

main.js 569B

modernizr.js 15KB

jquery-2.1.1.min.js 82KB

fonts

icomoon.woff 1KB

icomoon.ttf 1KB

icomoon.svg 2KB

icomoon.eot 2KB

css

default.css 5KB

reset.css 1KB

style.css 6KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery多级下拉垂直手风琴代码 - 代码笔记</title> <link href='https://fonts.useso.com/css?family=Jaldi:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/default.css"> <script src="js/modernizr.js"></script> </head> <body> <ul class="cd-accordion-menu animated"> <li class="has-children"> <input type="checkbox" name ="group-1" id="group-1" checked> <label for="group-1">Group 1</label> <ul> <li class="has-children"> <input type="checkbox" name ="sub-group-1" id="sub-group-1"> <label for="sub-group-1">Sub Group 1</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li class="has-children"> <input type="checkbox" name ="sub-group-2" id="sub-group-2"> <label for="sub-group-2">Sub Group 2</label> <ul> <li class="has-children"> <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3"> <label for="sub-group-level-3">Sub Group Level 3</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li class="has-children"> <input type="checkbox" name ="group-2" id="group-2"> <label for="group-2">Group 2</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li class="has-children"> <input type="checkbox" name ="group-3" id="group-3"> <label for="group-3">Group 3</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li class="has-children"> <input type="checkbox" name ="group-4" id="group-4"> <label for="group-4">Group 4</label> <ul> <li class="has-children"> <input type="checkbox" name ="sub-group-3" id="sub-group-3"> <label for="sub-group-3">Sub Group 3</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> </ul> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/main.js"></script> <div style="text-align:center;margin:-10px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>

评论收藏

内容反馈