【CSS】扁平化,支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏

上次在《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》(点击打开链接)给大家推荐过导航栏怎么写,

这次不用任何框架,纯手写CSS,原生态,方便各位改写!请笑纳。

一、首先是含有方块超级链接的导航栏,如下图:

技术分享

这个东西个人觉得拼接在一些灰色巨幕下面做首页的导航栏不错

或者放在一些标签页上面也是可以的

代码如下:

<div style="width:70%; text-align:center; margin-left:auto; margin-right:auto; border-top: 1px solid #d4d4d4;">
<a href="#" style="display:block; float:left; border-right: 1px solid #dddddd; height:3em; width:120px; text-align: center; padding-top:1.5em; text-decoration:none; font-family:微软雅黑,Arial,宋体; background:#eeeeee; color:#aaaaaa;">按钮1</a>
<a href="#" style="display:block; float:left; border-right: 1px solid #dddddd; height:3em; width:120px; text-align: center; padding-top:1.5em; text-decoration:none; font-family:微软雅黑,Arial,宋体; background:#eeeeee; color:#aaaaaa;">按钮2</a>
</div>

首先你要定义一个大div放这些方块状的超级链接,这个大div,我定义其宽度为70,内容居中,自身居中,这些都不是关键属性,

关键属性一条仅长1px的灰色上边框,也就是大家看到最上方的那条长长的#d4d4d4灰色线

之后就是超级链接,这里的超级链接要显示为块状需要用到display:block属性,然后每一个超级链接以float:left并列在一行排列,不然block属性默认是一个div占据一行,然后每个块用了灰色右边框#dddddd,其实与那个大div颜色一样,用#d4d4d4也是没问题的

内容居中,设置好上内边距1.5em占其高度3em一半,好让其垂直居中,em是相对单位,这个组件可以根据浏览器的大小而改变自身大小

text-decoration:none是不要超级链接下面的下划线

之后把字体调好,

背景为更浅的灰#eeeeee

文字颜色较深一点,为#aaaaaa,有陷入感。


二、然后,为大家提供一个含有支持IE8的下拉菜单的导航栏

这个下拉菜单的效果图如下,无需javascript等脚本实现,纯粹的css:

技术分享

悬停出现链接,

原生态的,只是在IE6好像不管用。

代码如下:

<div style="width:70%; text-align:center; margin-left:auto; margin-right:auto; border-top: 1px solid #d4d4d4;">
<style>
.drop>.dropdown{ display: none; }
.drop:hover>.dropdown{ display: block; }
</style>
<div class="drop" style="border-right: 1px solid #dddddd; width:15%; float:left;">
下拉菜单1▼
<div class="dropdown">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
<a href="#">链接5</a><br />
<a href="#">链接6</a><br />
</div>
</div>

<div class="drop" style="border-right: 1px solid #dddddd; width:15%; float:left;">
下拉菜单2▼
<div class="dropdown">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
<a href="#">链接5</a><br />
<a href="#">链接6</a><br />
</div>
</div>

<div class="drop" style="border-right: 1px solid #dddddd; width:15%; float:left;">
下拉菜单3▼
<div class="dropdown">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
<a href="#">链接5</a><br />
<a href="#">链接6</a><br />
</div>
</div>

</div>

核心代码是那个<style><style>标签,指明class为dropdown的div要在鼠标悬停在class为drop的div才显示,否则不显示

于是乎就有了上面的效果。

其余的样式的道理与那个带方块的超级链接是相同的。

可惜在ie6支持不了div悬停效果,那下拉菜单就像僵尸那样不会动,网上查资料说要引入csshover3.htc文件,但似乎好像不管用,T^T,估计要兼容IE6要用jquery或者javascript写了,这东西

在IEtester测试如下:

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。