通常我们写网页的导航菜单栏要么在头部上边,要么在左边,这里呢就跟大家分享在网页左侧的固定菜单栏,先看下网页效果,如下图:
特别说明一下这个网页布局是参考已有的一个网页的,当鼠标移动到左侧菜单栏时,左侧菜单栏就会展开,如下图:
这个实现效果很简单,就是利用CSS3,下面我们来看一下代码,如下图:
这个是菜单栏及其部分内容的源码,
这是CSS样式部分,鼠标没有移入之前菜单栏的宽度是60px,鼠标移入之后菜单栏的宽度就是240px,我还给了延迟0.03秒的动画效果,就是鼠标移入菜单栏0.03秒才执行展开,注意!这里我们变化的只是菜单栏的宽度,
再额外提下菜单栏里面导航选项展开的内置选项,代码如下图:
点击有内置选项的导航按钮就会展开内置选项,再点击别的按钮时,这个已经展开的按钮选项就会收起来,点击的按钮若有内置选项也会同时展开。
那么本篇文章就分享到这里啦!若有不足的地方,还望请多多指教!
标签:选项,内置,网页,收起,菜单栏,左侧,展开
来源: https://blog.csdn.net/qq_44544363/article/details/100972505