Typecho1.1仿简书主题小屏幕菜单栏展开优化
时间:2022-07-24
本文章向大家介绍Typecho1.1仿简书主题小屏幕菜单栏展开优化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文:毛毛,首发自:maomao.ink,转载请保留此行。
刚刚把大小屏适配功能给还原了,现在继续在还原的基础上进行小屏幕菜单栏展开优化。
可不能瞎改,不然又得改坏。
一、调整菜单栏宽度
介于我的菜单标题最多就两个字,所以宽度可以设置窄一点,美观一些。于是我在/css/style.css
里面修改了样式。
原始样式在大屏上展开宽度为170px,小屏上展开宽度为130px。我将它调整为大屏115px,小屏105px。
调整也很简单,搜索style.css里面所有的170px替换为115px,所有的130px替换为105px。
之所以不用整数,是因为115和105这两个数字目前style里面没做其他用途,如果日后需要修改,继续搜索替换就行了。
二、优化小屏菜单栏展开时页面不压缩。
先看看效果图:
左边是优化前,右边是优化后。
虽然从图片上来看,左边的图似乎更美观一点,但操作体验却不竟如此。
左图的菜单栏在展开的同时,内容也在跟着变化,以适应菜单栏展开之后剩下的宽度。
而右图的菜单栏展开时,内容没有变化,纯粹是菜单栏的开和关,我认为这样的体验更舒畅一些。
下面来看看我修改的代码:
修改style.css里的代码如下:
/* 修改前 */
#wrapper.holding-right #body{
-webkit-transform: translate(105px,0);
-ms-transform: translate(105px,0);
transform: translate(105px,0);
margin-left: -105px;
padding-left: 105px;
position:fixed;
}
/* 修改后 */
#wrapper.holding-right #body{
-webkit-transform: translate(0px,0);
-ms-transform: translate(0px,0);
transform: translate(0px,0);
margin-left: -0px;
padding-left: 0px;
position:fixed;
}
可以看出,我是在修改了菜单栏宽度的基础上,再将body需要移动的偏移量改成了0。
这样body部分就不会再有适配动画,也就实现了我要的效果。
如果你也想这样的效果,不妨试试吧,祝你成功!!!
我是谁?
- 90后程序媛,写代码,也写软文
- 喜欢阅读,喜欢聆听,喜欢分享
- 热爱挑战各种稀奇古怪的事物(比如这个博客)
- 我是毛毛,感恩遇见你!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring 整合 Mybatis
- 数据库PostrageSQL-关闭服务器
- 快速配置Azure DevOps代理服务器
- 数据库PostrageSQL-管理内核资源
- airtest操作夜神模拟器adb冲突解决办法
- 数据库PostrageSQL-启动数据库服务器
- 数据库PostrageSQL-PostgreSQL用户账户创建一个数据库集簇
- 轻松上手SpringBoot Security + JWT Hello World示例
- [Go] Golang发送http GET请求
- Windows系统快速安装Superset 0.37
- 商业数据分析从入门到入职(3)Excel进阶应用
- python列表练习
- python元组
- python字典、集合
- 秒懂JVM的三大参数类型,就靠这十个小实验了