Css Hack打造JavaScript效果的下拉菜单（IE6/7/8/FF/Safari）

最新推荐文章于 2024-06-15 16:53:15 发布

weixin_30535043

最新推荐文章于 2024-06-15 16:53:15 发布

阅读量66

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/didi/archive/2009/07/25/1530129.html

版权

在做导航菜单设计制作的时候，很常见的有下拉列表式菜单。如下图效果，但是这种下拉菜单一般都是使用JavaScript + Css联合打造，下面讲一种不使用JavaScript一样能做出的方法。[css hack drop down list navigation menu]

img如图，鼠标移到主菜单上，显示下拉列表，鼠标移开，则下拉菜单隐藏。

先把HTMLCode贴出来再慢慢分析讲解，Dom代码如下：

CssHackMenuCode

<div class="menu">
    <ul class="feeul">
        <li class="liimg"><a href="../default.html">首页</a></li>
        <li class="liimg">
            <a class="hide" href="../aboutus.html">关于我们</a>
            
            <ul>
                <li><a href="../aboutus.html">麦格简介</a></li>
                <li><a href="../team.html">技术团队</a></li>
                <li><a href="../hr.html">人才招聘</a></li>
            </ul>
            

        </li>
        <li class="liimg">
            <a class="hide" href="../fang-e-yi-dian-ji.html">防恶意点击</a>
            
            <ul>
                <li><a href="../fang-e-yi-dian-ji-xi-tong.html">产品概述</a></li>
                <li><a href="../domo.html">在线演示</a></li>
                <li><a href="../faq.html">常见问题</a></li>
                <li><a href="../free-trial.html">免费试用</a></li>
            </ul>
            
        </li>

        <li class="liimg">
            <a class="hide" href="../wang-luo-ying-xiao.html">网络营销</a>
            
            <ul>
                <li><a href="../jing-jia-pai-ming.html">竞价排名</a></li>
                <li><a href="../wang-luo-tui-guang.html">网络推广</a></li>
                <li><a href="../wang-zhan-you-hua.html">网站优化</a></li>
            </ul>
            
        </li>

        <li class="liimg"><a href="../news.html">新闻动态</a></li>

        <li class="liimg">
            <a class="hide" href="../cooperation.html">合作代理</a>
            
            <ul>
                <li><a href="../approaches.html">合作方式</a></li>
                <li><a href="../do.html">代理资质</a></li>
            </ul>
            
        </li>

        <li class="liimg">
            <a href="../ms.html">客户咨询</a>
        </li>

        <li class="liimg">
            <a class="hide" href="../contact.html">联系我们</a>
            
            <ul>
                <li><a href="../call.html">联系方式</a></li>
                <li><a href="../pay.html">汇款方式</a></li>
            </ul>
            
        </li>

    </ul>
</div

可以看到，在HTML代码中使用了IE选择符。

关于标记的详细说明请看前一篇随笔，有详细说明，在这里就简单说一下，if lte IE6 的意思是只有IE6和IE以下的IE版本浏览器可见。这是IE特有属性，其他浏览器看不到。（也只有IE6需要hack一下，不然这个代码就perfect 了）

在由于要区分IE6以及IE6一下版本浏览器，和现在的主流浏览器，所系我们需要用到两个css。

< link href ="css/ulmenu.css" rel ="stylesheet" type ="text/css" />

这连个css引用要写在页面<head></head>之间，并且顺序为ulmenu.css在上，IE6及以下能识别的ulmenu2.css在下面，为了的是大部分浏览器只需要读取ulmenu.css即可，IE6及以下浏览器才需要读取ulmenu2.css >

ulmenu.css Code

.menu
{
    width:960px;
    background-color:#008AD2;
    background-image:url(../img/menubg.jpg);
    background-position:left center;
    background-repeat:repeat-y;
    height:28px;
    overflow:visible;
    display:block;  }

.liimg
{
    background:url(../img/menufg0.gif) no-repeat right 4px; }

.feeul, .feeul a {color:#FFFFFF;font-size:12px;line-height:15px;}
.feeul a:hover {color:#FFFF00;text-decoration:none;}

.menu ul {
    display:block;
    list-style-type:none;
    margin:0;
    overflow:visible;
    padding:2px 0 0;
}

.menu ul li {
    float:left;
    position:relative;
}

.menu ul li a {
    display:block;
    float:left;
    height:23px;
    padding-left:20px;
    padding-right:21px;
    padding-top:4px;
    text-align:center;
    width:60px;
}

.menu ul li ul {
    display:none;
}

.menu ul li:hover a {
    color:#FFFFFF;
}

.menu ul li a:hover {
    color:#FFFF00;
}

.menu ul li:hover ul {
    background-image:url(../img/submenubg.png);
    background-repeat:repeat;
    display:block;
    left:0;
    position:absolute;
    top:27px;
    width:100px;
    z-index:99;
}

.menu ul li:hover ul li a {
    background-image:none;
    border-bottom:1px solid #A8BCD2;
    color:#FFFFFF;
    display:block;
    overflow:hidden;
    width:60px;
    z-index:99;
}

.menu ul li:hover ul li a:hover {
    color:#FFFF00;

ulmenu2.css Code
@charset "utf-8";
/* CSS Document  */

/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */
table {
    border-collapse:collapse;
    margin:0;
    padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, #menu ul li a:visited.hide {
    display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
    color:#ffff00;
    background:transparent;
    background-image: url(../img/blank.gif);
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
    display:block;
    position:absolute;
    top:25px;
    left:0;
    width:105px;
}

/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://fee.magnfee.com/img/submenubg.png");
    color:#fff;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #d7e2ef;
    position: relative;
    cursor:hand;
}

/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
    color:#FFFF00;
    position: relative;
    cursor:hand;

经测试。IETest测试，兼容IE6.7.8. FF.Safari.

代码中所需配图，提供Demo下载（明天整理之后再修改，本例可以参看网站 http://fee.magnfee.com 导航菜单，技术贴，请勿讨论网站内容，仅仅探讨相关技术。QQ：31-52-6加时去掉横杠，注明cnblogs，嘿嘿）。

转载于:https://www.cnblogs.com/didi/archive/2009/07/25/1530129.html

weixin_30535043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css Hack打造JavaScript效果的下拉菜单（IE6/7/8/FF/Safari）

在做导航菜单设计制作的时候，很常见的有下拉列表式菜单。如下图效果，但是这种下拉菜单一般都是使用JavaScript + Css联合打造，下面讲一种不使用JavaScript一样能做出的方法。[css hack drop down listnavigation menu]img如图，鼠标移到主菜单上，显示下拉列表，鼠标移开，则下拉菜单隐藏。先把HTMLCode贴出来再慢慢分析讲解，Dom代码如下：...
复制链接

扫一扫