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

基于Bootstrap的CSS3响应式滑动侧边布局代码解析附源码下载

bootstrap-vertical-menu是一款基于Bootstrap的CSS3响应式滑动侧边布局模板。...该滑动侧边布局在大屏幕中以侧边的形式存在,在小屏幕设备中,菜单会被移动到屏幕的底部,只显示菜单的图标。 ?...使用方法 使用该滑动侧边布局模板需要引入Boostrap相关依赖文件,制作图标需要引入font-awesome.css字体图标文件,以及模板本身需要的bootstrap-vertical-menu.css... CSS样式 侧边菜单的宽度可以通过.navbar-vertical-left来控制,默认是宽160像素(菜单展开后的宽度)。默认侧边菜单的高度和屏幕一样高。...在小屏幕中,菜单显示在屏幕的下方,菜单文字会被隐藏,只显示菜单项图标。

3.3K10

WordPress主题开发必备函数wp_list_categories获取分类列表

WordPress主题开发必备函数wp_list_categories获取分类列表,将分类以列表的形式显示链接。...点击分类的链接,就可以访问该分类下的所有文章的存档页面; wp_list_categories()函数一般用于侧边分类目录归档,这在一般的wordpress博客中我们可以常见到。...也可以通过wp_list_categories()函数来制作网站头部导航菜单,这在大多数的CMS主题中我们就可以常常看到。 '',//排除分类树,即分类及其下的分类'include'=>'',//排除的分类,即显示的分类'hierarchical...'=>true,//是否将分类分级'title_li'=> __('Categories'),//列表标题的名称'show_option_none'=> __('No categories'),/

1.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

8.滑动事件处理

上面是三个viewPager相互嵌套,这么就需要对滑动事件进行处理 首先我们不需要viewpager1滑动,因为每次滑动的时候它的控件就拦截了它的事件,侧边的每次滑的时候就跑了出来,所以这里是这样处理的...,即显示侧边,但是3的话是拦截,让侧边显示出来,这样的话就相互矛盾了,到底是拦截还是拦截了?...} else {// 如果是第一个页面,需要显示侧边, 请求控件拦截 getParent().requestDisallowInterceptTouchEvent(false);// 拦截...,因为侧边把它的滑动事件拦截了。...右划, 而且是第一个页面, 需要控件(mainactivity)拦截,菜单就出来了 2. 左划, 而且是最后一个页面, 需要控件(viewpager2)拦截,会滑动2的下一个页面 * 3.

77320

8.滑动事件处理

上面是三个viewPager相互嵌套,这么就需要对滑动事件进行处理 首先我们不需要viewpager1滑动,因为每次滑动的时候它的控件就拦截了它的事件,侧边的每次滑的时候就跑了出来,所以这里是这样处理的...,即显示侧边,但是3的话是拦截,让侧边显示出来,这样的话就相互矛盾了,到底是拦截还是拦截了?...} else {// 如果是第一个页面,需要显示侧边, 请求控件拦截 getParent().requestDisallowInterceptTouchEvent(false);// 拦截...,因为侧边把它的滑动事件拦截了。...右划, 而且是第一个页面, 需要控件(mainactivity)拦截,菜单就出来了 2. 左划, 而且是最后一个页面, 需要控件(viewpager2)拦截,会滑动2的下一个页面 * 3.

1K120

WordPress 初学者词汇表(术语解释)

除了主题之外,还使用主题来显示自定义。当您想对主题(实际代码)进行核心更改时,您需要使用主题来继续更新您的主题。...一个流行的例子是 StudioPress 创建的 Genesis 主题,它在网络上有大量可用的主题。Genesis主题包括所有核心主题功能,而主题包括自定义样式和布局。...在 WordPress 中,您可以非常轻松地创建菜单,并且有内置设置可以将菜单分配到特定位置(例如,主菜单侧边菜单、页脚菜单等)。...Siderbar(侧边侧边显示帖子或页面上的支持内容。一些网站选择不使用侧边,但如果您这样做,您可以放置小部件(例如关于部分、相关帖子、时事通讯订阅表格或其他任何内容)。...根据您的 WordPress 主题(或页面构建器),侧边通常是左侧或右侧的垂直列,尽管根据帖子类型或页面,某些设计可能具有两个侧边甚至自定义侧边

7.1K20

建站日志

TODO LIST 暂无 2021-08-23 添加打赏榜 2021-07-24 最近Waline评论被恶意攻击了,修改了配置: 评论之前必须先注册登录 评论需要经过审核才可发布 2021-06-05 菜单支持菜单...2018-09-18 添加了图片懒加载插件hexo-lazyload-image 出于强迫症,还是关闭了的统计功能,目的是为了解决下边的问题二。...2018-08-21 最近发现了两个问题: 如果文章写小标题,是不会生成文章目录的,如果启用了leancloud的阅读计数功能,这时候这篇文章的阅读页面的侧边就会失去affix.js的固定定位效果;...(该bug在火狐浏览器下偶尔会触发,在360浏览器下百分百触发) 如果启用了计数,在360浏览器下如果滚动页面时,侧边的底部无法和正文模块的底部持平,侧边底部会比正文模块的短一些。...问题二对于强迫症来说很难受,要么关闭计数,要么不使用360浏览器。

4.2K30

wordpress导航菜单详解及改造

对于wordpress主题来说 wp的菜单是必不可少的 可以用于制作导航 也可以做侧边、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要的东西 话不多说 现在先讲一下菜单的创建 首先要开启导航菜单功能...' )); } add_action('init', 'register_my_menus'); 代码内的菜单名与别名根据实际需要来起 当然照我所写代码也可 具体怎么使用稍后会讲 然后在wp后台菜单显示如下...container_idul节点id值 container_classul节点class值 menu_classul节点class值 menu_idul节点id值 before菜单链接前的文本 after...菜单链接后的文本 link_before每个菜单链接文本前的文本 link_after每个菜单链接文本后的文本 depth菜单深度 containerfalse 时去除div标签 items_wrap值为...可以看到,生成的class名太多了 但图中红线划中的地方 在某些情况下对我们是很有帮助的 例如通过点击导航某个栏目 跳转到这个栏目的页面时 导航此栏目位置高亮 观察导航结构 我们会发现 该栏目会有一个类名

3K70

webpack+vue项目实战(二,开发管理系统主页面)

而且首页这个菜单可以点击,执行跳转,其它两个菜单又有菜单,点击只是一个菜单显示与隐藏的操作。 所以,侧边的数据肯定是一个数组,并且是一个对象数组。...每个对象至少有四个属性(要显示的文字,跳转的url,是否有菜单,是否当前菜单)。然后对于有菜单菜单,要给一个属性控制是否展开显示菜单,要一个属性,储存菜单。..., url--跳转的url,tag--当前的标识, hasExtend--是否有二级菜单,fold--是否展开extend--菜单) 2.遍历侧边的数据 <ul class...看到运行结果,侧边出来了。然后,下一步! 3.给侧边写相关的一些操作 关于侧边的操作,比较简单,无非就是点击菜单,跳转路由,标志当前项以及菜单下面子菜单显示与隐藏。...--如果有二级菜单,遍历菜单-->

1.5K10

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边菜单生成、标签开发)

页面比较简单,主要分为左侧的菜单,顶部的导航(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签,之后就是主页面显示区域。...侧边菜单开发 我们之前讲权限的地方已经给大家看过了返回的菜单数据,并封装成了树形结构,所以我们这里菜单就根据保存的菜单数据渲染菜单就可以了。...,并传递给组件进行遍历渲染。...-- 此处嵌套el-icon也可正常显示,嵌套了之后可以使用el-menu预设的样式,且在折叠的时候不会闪动 --> <el-icon ><svg-icon class="...,之后会判断这是个<em>菜单</em>(一级<em>菜单</em>)还是个页面(二级<em>菜单</em>),同时也支持一些只有一个二级<em>菜单</em>的一级<em>菜单</em>直接<em>显示</em>二级<em>菜单</em>,这个是否直接<em>显示</em>根据我们在编辑<em>菜单</em>时配置的alwaysShow决定,后面也会简单的说一下<em>菜单</em>管理的配置项

3.4K31

总结一下最近学习的后台管理系统的前端权限设计

本文以思路为主,不会写出全部代码 基础工作 首先还是后台管理系统的基础工作,登录,侧边,导航什么的,因为给的时间实在太紧,我就直接用的网上已经有的基础框架 vue-admin-template...菜单表设计 因为 vue-admin-template 框架中,侧边是根据路由生成的,所以我们只要用一个菜单表维护路由就行了,不需要单独再搞一个侧边管理,为了满足渲染路由所必须的参数,我们需要告诉后端我们都需要什么参数...字段 含义 备注 title 标题 用于侧边标题展示 icon 图标 用于侧边图标展示 type 类型 区分目录/菜单/按钮 parentId 级id 记录父子关系 name...:list hidden 是否渲染在侧边 有一些路由我们需要可以访问,又不想让它出现在侧边 *以上仅列出我们所必须的字段,像创建时间,创建人,排序等可以与后端协商按需求添加 角色分配 菜单表搞好之后...,我们只需要判断该节点是否是节点就可以了 let menuId = res.data.menuId // 后端返回的id字符串 '1,3,4,5,8,9' let _arr = menuId.split

68450

Hexo-NexT搭建个人博客(三)

一、菜单中标签与侧边中标签关联的问题   以我的博客为例,关于菜单中的选项 与侧边中的选项,由于顶部菜单中位置有限,所以我就想在顶部菜单中不显示标签这一项,于是我在 主题配置文件 中 将 menu...配置项中的标签这一个选项给注释掉了,所以它不会在菜单显示,但是代表没有这个页面,这个页面是存在的,我们只是使其不显示在顶部的菜单中而已,我们可以直接输入绝对地址来查看这个页面,例如:https...但是与此同时,我们发现侧边中的标签选项只能显示标签数量,不能点击。   这是因为侧边中的点击链接是根据菜单中对应的项来添加的,什么意思呢?...就是说如果顶部菜单中有 标签 这一项,那么就会给侧边中标签这一项也添加点击链接;如果顶部菜单中没有标签这一项,那么就不给侧边中标签这一项添加点击链接,导致侧边中的标签项只有显示数据,不提供点击链接...如果我们不想在菜单显示标签项,但是希望侧边中的标签项 可以点击,该怎么做呢?

32310

Android入门教程 | DrawerLayout 侧滑

DawerLayout 分为侧边菜单和主内容区两部分: 主内容区要放在侧边菜单前面,还有就是主内容区最好以 DrawerLayout 最好为界面的根布局,否则可能会出现触摸事件被屏蔽的问题。...侧滑菜单部分的布局必须设置 layout_gravity 属性,表示侧滑菜单是在左边还是右边,设置了 layout_gravity="start/left" 的视图才会被认为是侧滑菜单。...使用的注意事项 主内容视图一定要是 DrawerLayout 的第一个视图 主内容视图宽度和高度需要 match_parent 必须显示指定侧滑视图的 android:layout_gravity 属性...android:layout_gravity = "start" 时,从左向右滑出菜单 android:layout_gravity = "end"时,从右向左滑出菜单 推荐使用left和right...现在侧边放的是RelativeLayout。 也可以放一个RecyclerView。 抽屉出来时推动页面 监听侧滑的滑动事件,使用ActionBarDrawerToggle。

2.1K10

handsome主题下载:一款十分华丽且功能强大的Typecho主题

基于boostrap3框架内置丰富css和js组件:可自定义性极强。内置5套独立页面的自定义模板:豆瓣书单、时光机、文章归档、留言板、友情链接。...) 增加头图样式交错模式(即大头图和小头图根据奇偶以次显示)(后台外观设置——外观设置——头图样式选择) 增加侧边分类中有分类情况下分类是否显示(外观设置——主题增强功能) 优化 摘要中排除login...加密文字 回复可见必须是评论审核后 优化了最后一点风格,深红色变成了淡红色 优化了黑色风格,更加的深邃迷人 优化了引用块的样式 优化了侧边的样式 优化了手机端的顶样式 升级meting至1.5.4优化了...handsome的debug模式 之前播放器自动播放的提示不小心删掉了,现在补上 调整了首页文章标题的字体大小 优化了lazyLoad的加载bug修复 时光机的联系方式以新窗口打开链接 购买地址 作者博客...---- 版权属于:Cyril 本文链接:https://www.cyrilstudio.top/archives/5/ 转载时须注明出处及本声明

4.1K60

360常用快捷键_10个常用的快捷键

== =================================== 添加收藏 Ctrl+D 显示/隐藏收藏 Ctrl+B 显示/隐藏侧边 Ctrl+Shift+S 显示收藏夹菜单 Alt+...A 显示工具菜单 Alt+T =================================== == 杂七杂八 == ==================...Alt+C 打开侧边的收藏夹 Alt+E 展开编辑菜单 Alt+F 展开文件菜单 Alt+H 展开帮助菜单 Alt+M 展开菜单更多按钮,用于调整一些类似激活新窗口,使用ie访问等。...Ctrl+点击页面链接 在新窗口访问链接 Shift+点击页面链接 放大页面 Ctrl+向上滚动鼠标滚轮 缩小页面 Ctrl+向下滚动鼠标滚轮 恢复页面到100% Ctrl+Alt+滚动鼠标滚轮 保存页面元素...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

85620

前端成神之路-vue前端项目02

通过更改el-menu的active-text-color属性可以设置侧边菜单中点击的激活项的文字颜色 通过更改菜单项模板(template)中的i标签的类名,可以将左侧菜单的图标进行设置,我们需要在项目中使用第三方字体图标...,显示其中的菜单,我们可以在el-menu中添加一个属性unique-opened 或者也可以数据绑定进行设置(此时true认为是一个bool值,而不是字符串) :unique-opened=“true...” 6.制作侧边菜单的伸缩功能 在菜单上方添加一个div ...,在main的主体结构中添加一个路由占位符 制作好了Welcome级路由之后,我们需要将所有的侧边二级菜单都改造成级路由链接 我们只需要将el-menu的router属性设置为true就可以了,

4K10

Halo博客的部署和使用

4 Halo 博客设置 效果预览(使用Dream for Halo 2.x主题,预览图仅供参考): 4.1 基础设置 侧边“设置”中包含: 基本设置:站点标题、副标题、logo 等 文章设置:各页文章显示条数...【可选】StackEdit:另一款 Markdown 编辑器 4.3 菜单 创建菜单侧边菜单”,选择在主菜单中新建): 名称 链接地址 备注 首页 / 无 归档 /archives 同主题路由设置中归档页路由前缀相同...、捐赠二维码等 侧边配置:侧边展示(详情见下方表)、各模块类型的具体设置 页面设置:设置友链页面、标签页面等 增强功能:鼠标设置、特效显示、访客统计、自动推送等 定制主题:主题样式自定义设置 侧边模板类型...“文章”页内可管理文章分类和标签 添加文章页可切换编辑器,文章设置中可针对调整此篇文章的某些设置 使用“对象存储”插件,可在侧边“附件”内改变存储策略 侧边“图库”为菜单“相册”,侧边链接”为菜单...“友链”,侧边“瞬间”为菜单“动态” 侧边“用户”内角色管理可新建角色权限组,使用“OAuth2 认证”插件可在身份认证中设置多登录方式 侧边“概览”中外部访问地址必须为外网 IP 或者域名,当为

19410

begin主题使用说明(详解教程)

分类模板 首先,新建一个分类,因为这个模板不会显示分类的文章,所以不要向里面添加文章,只需要为这个分类添加一段描述即可,否则会出现在侧边分类小工具中。 其次,为这个新建的分类添加分类。...侧边 主题集成11个侧边,首页、分类归档、正文和页面,分别有上、下及随着滚动侧边,另有正文底部、页脚小工具,需分别添加小工具,实现不同页面显示不同的侧边。...友情链接页面,需要在主题选项中添加链接分类ID,显示全部链接则留空。 获取链接分类ID:将鼠标停在链接分类名称上,浏览器状态显示的数字就是分类ID,如图: ?...页脚小工具 页脚小工具,分为两,需要到主题选项--基本设置中,勾选并启用“页脚小工具”,使用方法与其它侧边相同,可以添加任意小工具。 比如设置成我博客的样式: ?...当页面滚动到第3个四级标题时才会在屏幕左侧边显示目录索引,滚动到第2个四级标题时自动隐藏。

4.7K40

前端-10款web动画插件

5.jQuery左侧边多级菜单 适合后台管理页面使用 这是一款基于jQuery的侧边多级下拉菜单插件,这个菜单的特点是可以固定在左侧边,当页面滚动时整个菜单可以保持一直可见,方便操作。...类似的菜单插件还有CSS3侧边单页切换小图标菜单和CSS3侧边手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ?...,当切换到某一个菜单项时,菜单项会沿着曲线移动到当前视窗,同时显示对应的小图标,更重要的时,菜单项的切换是循环的,因此使用起来也非常方便。...7.HTML5/CSS3超链接图片弹出动画 今天给大家分享一个基于HTML5和CSS3的超链接动画,这个HTML5应用还是比较实用的,它可以让你在鼠标滑过超链接时弹出图片,就像弹出tooltip那样的动画效果...这次要分享的也是一款基于CSS3的深色背景的垂直手风琴菜单,实现原理与之前的比较类似,但是菜单展示形式略有不同,这个手风琴菜单当展开时菜单会有水平飞入的动画效果。 ?

5.9K50
领券