html菜单栏向左展开与收起,⽹页左侧固定菜单栏的展开与收起⽹页左侧固定菜单栏的展开与收起
…………………………………………………………………………………………………
开发⼯具与关键技术:Visual Studio 2015 CSS3 JavaScript
作者:林敏静
撰写时间:2019年9⽉17⽇
…………………………………………………………………………………………………
通常我们写⽹页的导航菜单栏要么在头部上边,要么在左边,这⾥呢就跟⼤家分享在⽹页左侧的固定菜单栏,先看下⽹页效果,如下图:
特别说明⼀下这个⽹页布局是参考已有的⼀个⽹页的,当⿏标移动到左侧菜单栏时,左侧菜单栏就会展开,如下图:
这个实现效果很简单,就是利⽤CSS3,下⾯我们来看⼀下代码,如下图:
这个是菜单栏及其部分内容的源码,
css鼠标点击样式
就是⿏标移⼊菜单栏0.03秒才执⾏展开,注意!这⾥我们变化的只是菜单栏的宽度,
再额外提下菜单栏⾥⾯导航选项展开的内置选项,代码如下图:
点击有内置选项的导航按钮就会展开内置选项,再点击别的按钮时,这个已经展开的按钮选项就会收起来,点击的按钮若有内置选项也会同时展开。
那么本篇⽂章就分享到这⾥啦!若有不⾜的地⽅,还望请多多指教!
标签:选项,内置,⽹页,收起,菜单栏,左侧,展开
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论