网页左侧固定菜单栏的展开与收起

…………………………………………………………………………………………………
开发工具与关键技术：Visual Studio 2015 CSS3 JavaScript

作者：林敏静

撰写时间：2019年9月17日

…………………………………………………………………………………………………

通常我们写网页的导航菜单栏要么在头部上边，要么在左边，这里呢就跟大家分享在网页左侧的固定菜单栏，先看下网页效果，如下图：

特别说明一下这个网页布局是参考已有的一个网页的，当鼠标移动到左侧菜单栏时，左侧菜单栏就会展开，如下图：

这个实现效果很简单，就是利用CSS3，下面我们来看一下代码，如下图：

这个是菜单栏及其部分内容的源码，

这是CSS样式部分，鼠标没有移入之前菜单栏的宽度是60px,鼠标移入之后菜单栏的宽度就是240px，我还给了延迟0.03秒的动画效果，就是鼠标移入菜单栏0.03秒才执行展开，注意！这里我们变化的只是菜单栏的宽度，

再额外提下菜单栏里面导航选项展开的内置选项，代码如下图：

点击有内置选项的导航按钮就会展开内置选项，再点击别的按钮时，这个已经展开的按钮选项就会收起来，点击的按钮若有内置选项也会同时展开。

那么本篇文章就分享到这里啦！若有不足的地方，还望请多多指教！

网页左侧固定菜单栏的展开与收起相关推荐

展开关闭页面html,JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: 热门标签... js展开收起 js幻灯片 js特效广告代码对联广告 js弹出层 ...
网页右边固定php,左侧固定，右侧自适应的布局方式
这次给大家带来左侧固定,右侧自适应的布局方式,左侧固定,右侧自适应布局方式的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法: Document .one { position: abso ...
css+隐藏+左侧菜单栏,放在网页左侧的DIV+CSS隐藏菜单代码
放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cn body { background: #fff; font-family: "Lucida Grande", ...
Vue3+Element-Plus 实现左侧菜单折叠与展开功能二七
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 1. 在侧边栏内部,在侧边栏菜单区 ...
html 左边固定右边自动,css经典布局之左侧固定大小右侧自动适应
本文作者:IMWeb 赛冷思未经同意,禁止转载最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家 ...
Mr.J-- jQuery学习笔记(十六)--展开和收起动画折叠菜单的实现
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告与动 ...
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
一.uni-app中,固定宽高,文字超出部分,隐藏并显示省略号. .topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
javascript实现一段文字展开、收起（默认收起）
在线演示 html: <div id="content">2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地 ...

网页左侧固定菜单栏的展开与收起

网页左侧固定菜单栏的展开与收起

网页左侧固定菜单栏的展开与收起相关推荐

最新文章

热门文章