html左侧隐藏菜单栏,五分钟用HTML+CSS设计一个可隐藏的侧边导航栏（sidebar）

最新推荐文章于 2024-02-01 09:00:00 发布
VIP文章 最新推荐文章于 2024-02-01 09:00:00 发布
阅读量2.2k 收藏 2
点赞数
文章标签： html左侧隐藏菜单栏

准备工作

1、矢量图标网站https://ionicons.com/

2、配色网站https://flatuicolors.com/

3、jQuery-cdn

成品效果截图

展开后：

192181978_4_20200604024410819

展开前：

192181978_5_20200604024410960.png

废话不不多说上代码：

html代码：

sidebar
最低0.47元/天 解锁文章
weixin_39958248
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于html和CSS3制作简单侧边导航栏
12-30
本文为大家分享了一个侧边导航栏css示例，供大家参考，具体内容如下 效果图： html： XML/HTML Code复制内容到剪贴板 <div u00a0class=sidebar>       <ul>           <li>优先级                 <ul>                   <li><aonclickaonclick class=sidebar-selected>全部</a></li>                   <li><aonclickaonclick>P1</a></li>  
web前端基础（显示和隐藏及相关css）
Lxq0218的博客
05-24 437
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .li2{ display: none; /*隐藏，内容和位置都没有了*/ visibility: hidden;/*隐藏，内容没有了,位置还在*/ } *{ list-style: non
HTML+CSS：导航栏组件
最新发布
正在创作系列：【若冰说CSS】
02-01 1469
实现了一个导航栏的动画效果，当用户点击导航栏中的某个选项时，对应的选项卡会向左平移，同时一个小圆圈会出现在选项卡的中心，表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。
vant侧边导航栏SideBar
07-03
vant侧边导航栏SideBar
HTML制作折叠菜单_有+-号,一级二级菜单.zip
01-10
HTML制作折叠多级菜单_有+-号,一级二级菜单.zip
Qt导航栏Demo之侧边垂直菜单
02-17
Qt自带菜单栏为水平菜单栏，在很多实际应用中，需要用到左侧菜单导航栏，即垂直导航栏，本示例使用QMenu、QDialog、事件过滤、QPushButton、鼠标钩子函数等实现了侧边垂直菜单导航栏。
菜单栏的隐藏与显示
weixin_44585066的博客
08-22 783
首先需要配置jquery，不然会报错，达不到效果的，如果项目中早就下载了，那就往下看 1在package.json文件中的"dependencies": 下加入以下配置之后会出现install，下载即可 “jquery”: “^3.4.1”, 2之后在main.js中导入jquery import $ from ‘jquery’ 3在webpack.base.conf.js文件下导入以下配置 ...
HTML之实现可隐藏式导航栏
你的大数据学长
02-15 1万+
HTML之实现可隐藏导航栏预计目标部分代码展示关键代码解释frame框架用法hideOrDisplayNavFrame()函数解释结果展示 预计目标 论坛系统中左右两列的框架集结构便于浏览者导航，但同时也使得浏览者的工作区域变小。浏览者希望必要的时候可以隐藏框架集中的某个框架，以使得其他相邻的框架占据尽可能打的面积，如下图所示。现在希望在 tool.html 页面中放置一个自定义命令按钮，单机此按...
Web 学习之侧边隐藏菜单栏
程序员小白的博客
01-04 1244
制作侧边菜单栏
html左侧隐藏菜单栏,如何制作一个炫酷的隐藏侧边栏菜单
weixin_33262687的博客
05-30 4760
在网上经常可以看到一些效果非常酷的隐藏侧边栏菜单效果。隐藏侧边栏作为一种新的菜单布局方式已经被越来越多的人所接受，它给用户一种全新的体验。特别是在移动手机等小屏幕设备上，隐藏侧边栏就显得特别有用。它不会占用多余的空间，只有在需要的时候才显示出来。隐藏侧边栏菜单经常被使用在移动手机和一些触摸屏设备上。隐藏侧边栏最大的好处是不占用空间，并且只使用少量的javascript和CSS就可以制作出一个隐藏侧...
jQuery实现二级侧边导航菜单
ovocc的博客
03-21 1654
案例向
AutoHide.rar_C# 隐藏侧边栏_sidebar vc_侧边栏_侧边隐藏_自动隐藏
07-15
实现像VC2008侧边栏自动隐藏功能，具有参考价值。
微信小程序实现左侧滑动导航栏
10-16
主要为大家详细介绍了微信小程序实现左侧滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端学习（257）:flex-direction
歌谣的博客
12-30 288
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
html前端设计学习记录，导航栏菜单的设计与实现
AdSensca的博客
03-22 1022
导航栏菜单的设计与实现学习目标界面设计完整代码 学习目标 学习如何综合应用HTML与CSS开发导航栏菜单样式 界面设计 设计目标： 导航栏的创建 <nav> <ul> <li><a href="#" target="_blank">头条</a></li> <li><a href="#" target="_blank">娱乐</a>&lt
web前端，html+css+jquery实现水平菜单
翟浩浩Android专栏
09-27 1254
用到的知识点： 1 列表,常用属性 2 a元素，常用属性 3 显示隐藏 4 jquery点击事件，划过事件 html: html> html> head lang="en"> meta charset="UTF-8"> title>菜单title> link href="menu02.css" rel="stylesheet"
WEB前端(7)—— 简单的 HTML+CSS 导航栏案例
qq_46187519的博客
09-08 9088
适合每个新手的导航栏： 代码与运行效果如图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏</title> <style type="text/css"> ul{/*设置导航栏的框框*/ margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/
实现一个简洁朴素的左侧贴边导航栏html+CSS+javaScript
热门推荐
@zhujj_的博客
08-12 1万+
学习使用HTML、CSS、JavaScript 实现一个简易朴素的贴边竖直导航栏。
html三级菜单上下收缩,jQuery多级收缩菜单
weixin_35952290的博客
06-07 275
插件描述：jQuery左侧菜单点击自动收缩，使用json数据格式更新时间：2019/4/15 上午10:50:41更新说明：1.页面JS进行修改,取消原本直接定义的菜单,直接改用json文件用ajax请求.2.菜单用递归的方法写的,可以有无限级,但是超过五级得自己加CSS.nav_box.level["第几级"]em｛padding-left:50px;｝使用方法引用jquery和Left...
用html+css写一个抖音网页版侧边导航栏
05-22
以下是一个简单的抖音网页版侧边导航栏的HTML和CSS代码示例： HTML代码： ```html <div class="sidebar"> <a href="#" class="active">首页</a> <a href="#">关注</a> <a href="#">发现</a> <a href="#">附近</a> <a href="#">消息</a> <a href="#">我</a> </div> ``` CSS代码： ```css .sidebar { position: fixed; top: 50px; bottom: 0; left: 0; width: 80px; background-color: #fff; border-right: 1px solid #ddd; } .sidebar a { display: block; padding: 12px 16px; color: #999; text-decoration: none; font-size: 14px; text-align: center; transition: background-color 0.3s; } .sidebar a:hover { background-color: #f5f5f5; } .sidebar a.active { background-color: #ee1c23; color: #fff; } ``` 这段代码创建了一个固定在页面左侧的侧边导航栏，包含了抖音的几个主要页面链接。当鼠标悬停在链接上时，链接的背景色会变为灰色；当链接是当前页面时，链接的背景色为红色，文字为白色。你可以根据自己的需要进行修改和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值