首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生JS实现可折叠导航

但在代码中,并不能真的用for循环来做,那样在移动过程中js就会一直卡在循环中而不能执行其他代码,所以这里可以使用setInterval函数来做,它会每隔一段时间调用一次某个方法,格式为setInterval...nav.getBoundingClientRect().width == navTargetWidth){ clearInterval(CWLN); } } 调用时机为触发指定事件时调用,这里事件分为,点击按钮,鼠标进入导航...,鼠标移出导航三种。...当点击按钮后,判断当前导航是收缩还是展开状态,如果是收缩状态就将导航的宽和内容块的左外边距逐渐增长为展开时的值,反之同理。而判断是通过一个变量来标识导航状态实现。...leftNavIsClose; } 当鼠标进入和离开导航时: document.getElementsByClassName("left-nav")[0].onmouseenter = function

7.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android的Dialog弹出时隐藏导航效果,目前认为的最优解

    但是,但是,但是,用在无人值守的自助终端上,总是把之前隐藏掉的导航和状态显示出来。这是不可接受的。总不能让设备给用户随意摆弄吧,进入系统把你应用给搞没了都有可能。...项目中用到一个Android的ProgressDialog显示操作的进度条,机器要求是屏蔽或隐藏掉导航和虚拟按键的显示。...但是试了好多方法,也参考了网上的很多做法,隐藏安卓底部导航之后 弹出dialog或者popupwindow后,导航会再次显示出来,虽然可以设置在dialog的onStart中再次隐藏导航,但是会出现一个导航显示出来又马上隐藏掉的一个效果...这样会很影响体验,会闪一下虚拟再隐藏,或者隐藏了再显示回来。 经过一连串的尝试摸索,找到了个目前认为是见到过的最优解的方法。 如果谁有更好更简单的实现,欢迎留言,共同学习学习。...//全屏 View.SYSTEM_UI_FLAG_FULLSCREEN | //隐藏导航

    4.7K20

    BuildAdmin19:如何使用el-popover弹出框,实现个人资料页面

    导航菜单最后剩下两个功能需要实现:个人资料和系统设置。本篇文章文章主要实现个人资料部分,主要包括个人头像以及资料框的实现。设计如图,当前实现的导航菜单只有admin用户名,没有头像。...js实现在js部分,首先是对用户名定义,这些后面都可以从后端中通过api获取。时间YMD格式使用原始的Date实现比较麻烦,所以这里使用了moment.js,使用前npm安装即可。...来控制导航菜单的间距。...个人资料作为常规管理的菜单,在经过路由动态加载之后,会被渲染到菜单中。同时根据component对应的路径,我们定义adminInfo.vue页面,这个页面当前未实现网页内容,只有个人资料四个文字。...BuildAdmin05:如何玩转Vue路由动态加载BuildAdmin07:导航动态添加tabs,vue如何实现

    13110

    【CSS】课程网站头部制作 ② ( 导航测量 | 导航编写 | 代码示例 )

    标签结构 2、 CSS 样式 一、 导航测量 ---- 1、 左侧边界 导航 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航之间的距离设置成...盒子放在一行中 ; /* 导航设置 左浮动 */ .nav { float: left; } 导航中的无序列表 , 需要设置左浮动 , 才能将 块级元素 从左右到进行排列 ; /* 导航栏内部..., 还要设置一个下边框 : /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom...: 2px solid #00a4ff; } 3、最终显示效果 此时 , 鼠标经过 导航的 首页 选项 ; 三、 完整代码 ---- 1、 HTML 标签结构 完整代码 : <!...*/ .nav ul li a:hover { /* 鼠标经过导航链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff

    3.9K20

    CSS编写规范

    而成套的控件图片都应经过CSS Sprite处理过之后再使用,以减少图片的加载,也可以在上传图片的时候减少操作。...9、层级(z-index)必须清晰明确 页面弹窗、气泡为最高级(最高级为999),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比...nav 版权 copyright 侧 sidebar 滚动 scroll 栏目 column 内容 content 页面外围控制整体布局宽度 wrapper 标签 tags 左右中...左右中 left right center ②导航 内容 Id名 内容 Id名 导航 nav 右导航 rightsidebar 主导航 mainnav 菜单 menu 子导航 subnav 子菜单...,右边/左边宽度自适应布局(左右两边宽度固定,中间宽度自适应) 7)响应式布局 8)多元素水平居中 9)清除浮动方法 10)在移动端实现真正的1px线 11)css画三角形 12)多行文本省略号 五、js

    2.7K30

    微信小程序|Tab标签页

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章 问题描述 在使用小程序的时候会看到大多数都是在小程序的底部设置导航,然而会发现有一些小程序的顶部也会有导航,那么如何来设置小程序的...解决方案 Tab标签页是在小程序的顶部的一个导航,当点击它时会弹出属于这个标签的相应内容。需要vant组件库,将dist提前下载好然后保存到项目中。在小程序中调用组件库,并在正确引用就可以实现了。..."van-tab": "/dist/tab/index", "van-tabs": "/dist/tabs/index" } } 表 1 json代码 2.在js...title:设置切换标签时弹出的提示框; icon:设置提示框的图标。...可以用type来设置标签的形式,name设置标签名称,title标题等。

    4.5K40

    插槽的应用

    最近在做的项目是智慧屏项目,用于公司的电视屏展示,它采用的技术栈是vue+js+sass,项目很多采用的都是组件化,用组件化的优点就是可复用性高,减少代码冗余,组件化的思想在开发中很常见也很重要。...3.插槽 需求1:点击底部的导航,出现一个弹窗; 思路:因为导航都是一样的,因此我把导航做成了一个组件,起名叫Footer.vue 因为点击头部的和底部的导航都会出现一个弹窗,因此把这做成了一个弹窗组件...-- 底部导航 --> <div class="FooterNav" v-for="(item,...//这里有一个巧妙的地方就是:里面依次循环的图片宽高是不同的,给图片绑定一个类名,在<em>js</em>中做成一个数组依次读取它的样式。...在<em>弹出</em>框组件DialogBox.vue写方法close () { this.$emit(‘close’); } $em

    13010

    IDEA快捷键拆解系列(一)

    本系列从最顶部的导航,以及周围、中间区域的快捷键提示开始讲起。在此之前,请记住非常重要的一个快捷键: Alt + 下划线那个符号。 ?...File    举个栗子,最左上角有File这个导航项,所以对应的快捷键就是:Alt + F,其它任意有下划线的都是同样的操作,包括导航项展开的任意子项,只要选项中带有某一下划线的字符,我们就可以通过这种形式来进行快速定位...中间区域的快捷键 中间提示区域快捷键 作用 快捷键 拆解 Search Everywhere Double Shift 全局搜索,按两下Shift弹出此界面,再按两下Shift可以搜索非当前项目的文件(...,再按一下Ctrl+Shift+N可以搜索非当前项目的文件,右上角还可以设置搜索的文件类型 Go to File Recent Files Ctrl + E 按Ctrl+E可以弹出记录了最近操作的面板...左右方向键用于左右跳转,上下方向键用于切换,Enter用于打开选择 Recent Files Navigation Bar Alt + Home 跳转到项目的导航,也可以通过这种方式进行文件切换和打开

    69130

    Vue3 递归组件

    本文用10分钟左右的时间让你掌握 递归组件 的用法。 在此之前,你必须掌握:html + css + js + Vue3 基础用法,至少需要知道 Vue 组件 是什么。...左侧导航:根据路由层级生成的导航菜单。 多级表格(嵌套的表格)。 上手实操 经过前面的讲解,相信大家对 递归组件 已经有一定的概念了。 接下来通过一个简单的例子来讲解。...我没有写样式,大家将就一下,用想象力把这想象成网站的左侧导航吧。 这种导航,有在前端写死的;也有写业务是需要后端配置,前端把导航栏数据请求回来再生成路由的。...main.js import { createApp } from 'vue' import App from './App.vue' import RootNav from '....完整代码 main.js import { createApp } from 'vue' import App from './App.vue' import RootNav from '.

    97120

    基于Vue的电商后台管理系统「建议收藏」

    项目初始化 安装Vue脚手架 通过vue ui命令启动可视化窗口对Vue脚手架进行配置(需事先安装好Vue),命令键入成功后,会自动弹出配置页面,选择手动配置,勾选Babel(将高级JS语法转换为低级语法...预览初始页面 点击左侧边选择任务->serve->运行,预编译成功后点击启动app,将自动跳转至http://localhost:8080/#/,即搭建成功。...项目结构 用vscode打开刚刚创建的Vue脚手架,项目结构如下: node_modules:用于存放用包管理工具下载安装了的包 public:用于存放静态资源文件(不会经过webpack的打包处理)...src:用于存放项目的源码文件 assets:用于存放静态资源文件(会经过webpack的打包处理) components:用于存放vue组件 plugins:用于存放element.js router...实现导航守卫功能 至此,登录功能基本实现,但存在一个bug,即在用户未登录的情况下,在地址输入http://localhost:8080/#/home地址时,也可以跳转至后台。

    1.9K20

    【CSS】课程网站 Banner 制作 ② ( Banner 版心盒子测量 | Banner 版心盒子模型左侧导航代码示例 )

    20 像素的右内边距 ; 测量 测导航 文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ; 左侧的 侧导航 的 背景是 黑色半透明 背景 ; 使用吸管工具 ,...吸取 鼠标移动到 侧导航 上的颜色值 为 #00b4ff ; 侧导航中 , 默认状态下 , 文字默认颜色为白色 ; 二、Banner 版心盒子模型左侧导航代码示例 ---- 1、HTML...左侧侧导航 190 x 420 , 左右两侧各 20 像素内边距 */ width: 150px; /* 高度 420 像素 */ height: 420px; /* 上下没有内边距 , 左右各...*/ .nav ul li a:hover { /* 鼠标经过导航链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff...样式 */ .subnav { /* 设置左浮动 */ float: left; /* 左侧侧导航 190 x 420 , 左右两侧各 20 像素内边距 */ width: 150px;

    3.3K50

    Intellij IDEA神器居然还有这些小技巧?你知道吗??

    你可以使用CTRL+E弹出最近使用的文件。又或者使用CTRL+N和CTRL+SHIFT+N定位文件。 如何退出这个模式呢?...很简单,使用ALT+V弹出view视图,然后选择Exit Presentation Mode 即可。...可以使用alt+1把鼠标焦点定位到project视图里,然后直接使用ctrl+shift+左右箭头来移动分割线。...去掉导航 ---- 去掉导航,因为平时用的不多。 ? 可以把红色的导航去掉,让IDEA显得更加干净整洁一些。使用alt+v,然后去掉Navigation bar即可。...去掉这个导航后,如果你偶尔还是要用的,直接用alt+home就可以临时把导航显示出来。 ? 如果想让这个临时的导航消失的话,直接使用esc快捷键即可。

    62120
    领券