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

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

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

作者：林敏静

撰写时间：2019年9月17日

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

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

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

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

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

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

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

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

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