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

标签：导航   ie6   css   超级链接   前端   

上次在《【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>

关键属性一条仅长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>

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

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

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

在IEtester测试如下：

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

标签：导航   ie6   css   超级链接   前端   

原文地址：http://blog.csdn.net/yongh701/article/details/42429841