找回密码
 立即注册

QQ登录

只需一步,快速开始

Simon.hu 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-3-16 17:36  /   查看:11255  /  回复:1
最近有很多小伙伴在问怎样可以把左侧导航栏以及上方导航栏固定住,提升系统的易用性。为此,我在活字格原有Demo的基础上给大家做了一个例子,方便以后大家再做固定导航栏的时候有个参考的例子。接下来我会在活字格模板中的CRM系统的基础上演示着怎么固定上方导航栏和左侧导航栏。
1.在工程文件中修改CSS样式表。
image.png31269530.png

2.添加如下CSS代码。.top用来控制上方导航栏固定,.left用来控制左侧导航栏固定,.bottom用来控制返回顶部超链接固定在页面底端。
image.png777546081.png

3.重点讲一下css文件的代码
1)position属性是规定元素的定位类型。可能的值absolute,fixed,relative,static,inherit。咱们这里用到的是fixed,即是生成绝对定位的元素,就是说是相对于浏览器窗口来定位,可以用top,bottom,right,left来设置。
2)z-index属性可以理解为三维坐标里面的z坐标,也可以理解成ps里面的层,它的值是绝对数值,哪个的值越大它的层级越高,即是置于最顶层,在顶端三个区域,我将三个都设置成一样大(z-index:100000;),让三个区域处于同一层级。
3)相对位置
上方导航栏用的top类,处于上方------top:0px;
左侧导航栏是left类,处于左侧------left:0px;
返回顶部用的bottom类,处于下方------bottom:0px;
4)宽度
上方导航栏的width设置成auto
5)其他不重要的
box-shadow为阴影,background背景等等其他的属性大家有兴趣可以尝试,可以百度学习下。
4.批量选中上方导航栏修改CSS类名为top。左侧导航栏为left。返回顶部超链接为bottom。
image.png557237243.png

5.添加返回顶部超链接,在JS命令中添加JS代码,点击超链接之后会自动跳转到页面顶部。
image.png778845214.png

具体的修改均在母版页中模版页面里。
image.png606060485.png

工程文件见附件。CSS文件可直接在工程文件中获取。

CRM.fgcc

1.41 MB, 下载次数: 1446

评分

参与人数 1满意度 +5 收起 理由
追风 + 5

查看全部评分

1 个回复

倒序浏览
Joe.xu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2021-12-27 09:54:51
推荐
配合7.0的流式布局,可以这样做哦
7.0 固定顶部或侧边的导航栏(菜单)
https://gcdn.grapecity.com.cn/fo ... 0&fromuid=60953
(出处: 葡萄城产品技术社区)
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部