主页 » 建站笔记 » 正文

使用position属性轻松实现网站导航栏置顶

 bandian2015/03/16 16:09 10,149 ℃ 0条点评
小号字体中号字体大号字体
阅读本文之前我们先对position属性的5个值做一个简单的了解:值描述absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。...

阅读本文之前我们先对position属性的5个值做一个简单的了解:

描述
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。

 

因为我们要实现的是导航栏始终紧挨着浏览器浮悬在顶部,所以我们就需要使用fixed值了。下面以博主使用的大前端D8主题(版本2.2)为例来说一下position属性fixed值的实际应用,目的是让导航栏置顶。在这个主题里面,因为头部导航内容都写在header.php里面,所以我们主要修改的文件有header.php和style.css,然后在jquery.js里面也有一点轻微的改动。

第一步,在导航栏和最新消息外嵌套两个div

首先,在header里面找到导航内容所在的<div class="navbar">,然后在navbar外面嵌套一个div,自定义一个类名(我这里是div class="divding"),记得封闭标签。然后再找到<div class="speedbar">,在它外面也加一个div。

我这里一共添加了2个div,navbar和speedbar外面各一个,navbar外面的div是为了达到让顶部置顶的导航栏在所有浏览器中都能自适应100%的铺满浏览器,而导航栏内的logo和菜单则与网页上其他内容一样居中显示;speedbar外面的div呢,是为了将导航栏下面的“最新消息”这一块从.header里面剥离出来而不让其跟随导航栏一起悬浮。

这一步修改完成后我的div结构如下:

div结构

第二步,style.css里面修改相关css:

修改.header

先找到第147行,将.header删除:

.header,.container,.footer{max-width:1320px;margin:0 auto;text-align:left;position:relative;*zoom:1}

修改后的代码:

.container,.footer{max-width:1320px;margin:0 auto;text-align:left;position:relative;*zoom:1}

我们要取消.header现有的样式再将它重新定义,找到150行修改:

.header{top:0;width:100%;z-index:999;margin-bottom:10px}

这里,因为我们新加了一个div,header之前所定义的属性都将由新增加的.divding来代替,所以header下面的样式现在都是多余的了,可以简化一下,只需保留下面两项即可:

.header{top:0;margin-bottom:52px}

对新增加的div添加样式

在css中新增这两行:

.divding {height: 42px;background-color: #202020;position: fixed;z-index: 999;width: 100%;top:0}
.zuixin {max-width: 1320px;margin: 0 auto;}

然后修改原有的样式,使其适应上面所做的修改达到居中显示

找到第630行和695行

.navbar{height:52px;background-color:#4a4a4a;*position:relative;*z-index:2;*zoom:1}
.speedbar{clear:both;color:#666;background-color:#F7F7F7;padding:8px 20px 13px;line-height: 22px;*zoom:1;overflow: hidden;height: 14px;}

将navbar已经无效的样式删除,增加新的定义;然后为.speedbar也添加两条相对定位的规则:

.navbar{height:42px;background-color:#202020;max-width: 1320px;margin: 0 auto;}
.speedbar{clear:both;color:#666;background-color:#F7F7F7;padding:8px 20px 13px;line-height: 22px;*zoom:1;overflow: hidden;height: 14px;position: relative;z-index: 1;top: 42px;}

上面代码中,我将导航栏.divding的高度设置了42个像素,因为感觉窄一点可能看上去更舒服些,然后使用了position: fixed;来置顶,再针对定位属性设定了一个z-index值;接着设置了导航栏的宽度为100%,使其无论在多大的窗口都铺满窗口。这里有一点需要注意的是,如果你的页面上还有其他设置了position定位的元素的话,那么导航栏这里赋予z-index的值一定要大于这个地方的值,否则,导航栏就会被z-index的值比它大的元素遮挡在后面,比如上面的speedbar就是z-index为1,那我们导航栏的z-index就一定要大于1。为了尽量避免会发生这种错误,我这里为它设定了一个比较大的数:999。
然后我还为.navbar和.zuixin设置了最大宽度:1320像素,再设置margin:0 auto;让它们都能在上一级div中居中显示。

另外需要注意的是:.divding使用fixed值置顶之后需给这个它设定一个top:0的参数,这样能避免在某些浏览器里面该元素顶部并不紧挨浏览器的bug。

最后,修改相关js

打开jquery.js,找到第91行

var toper =10;

将上面的值改为你的悬浮菜单栏的高度+10,因为如果不做修改的话,工具栏会被悬浮起来的菜单栏遮挡住,加10像素就保证了工具栏始终在悬浮框下方10像素,这样与主题原来的效果一样。

因为在前面我的菜单栏的高度设置成了42,jquery.js中的修改就是这样:

rollbox.eq(_deel.roll[1]-1).clone().appendTo('.widgetRoller')
 var toper =52;
 if($('body').attr('id')=='hasfixed') toper = 69;

好了,至此就修改完成了,如果你对css不是太熟练的话在修改的时候善用浏览器的【审查元素】功能(一般浏览器都支持的,在选择的元素上按右键选择审查元素或按F12键就可打开),可以让你很方便的在浏览器中对元素进行调试,达到满意的效果之后再去css里面直接修改,这样能做到事半功倍的效果。

上一篇:使用SMTP插件解决Wordpress不能给新注册用户发送邮件的问题
下一篇:win主机mysql忘记密码如何重置
版权信息
永久链接:https://www.augsky.com/?p=39
转载请注明转自 » 格部落格 » 使用position属性轻松实现网站导航栏置顶

已有0条评论,欢迎点评!

骚年,现在来一发沙发就是你的。