Question

好的，所以我为一个网站编写了这个下拉脚本，但我想不出一种让图标按照他们使用现代标准的方式工作的方法，我知道我做的方式它目前是非常糟糕的做法。

我所做的是一个普通的CSS Dropdown Navbar，但是在block元素中放了一个表。因此允许我使用CSS控制图标的不透明度：

ul.Nav li a img {
    opacity:0;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

ul.Nav li a:hover img {
    opacity:1;
}

这在旧版本的IE中不起作用，实际上会破坏超链接，因此用户无法导航。该网站在Chrome和Firefox中运行良好，您可以查看网页here

这是我的HTML / PHP代码：

<ul class="Nav">
    <?php 
      for ($i = 0; $i < $numititles; $i++) {
        echo "<li><a ";
        if ($i == 0) {echo "style='border:none;width:".$navbutwidth."px;' ";}
                    echo "href='".$titles[$i][0][1]."'>"
                            ."<table style='padding:0px;border-spacing:0px;width:100%;'><tr><td>"
                            .       $titles[$i][0][0]
                            ."</td><td style='padding-right:15px;width:20px;'>"
                            ."  <img src='/i/paw.png' style='width:20px;' alt='' />"
                            ."</td></tr></table></a>";
                    $numjtitles = count($titles[$i]);
                    if ($numjtitles > 1) {
                        echo "<ul>";
                        for ($j = 1; $j < $numjtitles; $j++) {
                            echo "<li><a ";
                            if ($i == 0) {echo "style='border:none;' ";}
                            echo "href='".$titles[$i][$j][1]."'>"
                                    ."<table style='padding:0px;border-spacing:0px;width:100%;'><tr><td>"
                                    .$titles[$i][$j][0]
                                    ."</td><td style='padding-right:15px;width:20px;'>"
                                    ."  <img src='/i/paw.png' style='width:20px;' alt='' />"
                                    ."</td></tr></table></a></li>";
                        }
                        echo "</ul>";
                    }
                    echo "</li>";
      }
    ?>
  </ul>

..这里是下拉菜单的完整CSS：

    ul.Nav {
    list-style-type:none;
    margin:0 auto;
    padding:0;
    overflow:hidden;
    width:auto;
    z-index:80;
}

ul.Nav li {
    float:left;
}

ul.Nav li a {
    font-size:16px;
    color:#FFF;
    width:<?php echo ($navbutwidth-1); ?>px;
    height:30px;
    line-height:30px;
    display:block;
    text-decoration:none;
    border-left:1px Solid #FFC;
}

ul.Nav li a table {
    width:100%;
    height:100%;
}

ul.Nav li a tr {
    color:#FFF;
    background-color:#960;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

ul.Nav li a tr:hover {
    background-color:#C93;
}

ul.Nav li a td {
    padding-left:15px;
}

ul.Nav li a img {
    opacity:0;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

ul.Nav li a:hover img {
    opacity:1;
}

ul.Nav ul {
    list-style:none;
    position:absolute;
    left:-9999px;
    text-align:left;
    float:right;
    display:block;
    padding:0;
    min-width:9.3ex;
    opacity:0;
    -webkit-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
    -moz-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
    -ms-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
    -o-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
    transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
}

ul.Nav ul li {
    float:none;
    border-top:1px Solid #FFF;
}

ul.Nav ul a {
    white-space:nowrap;
}
ul.Nav li:hover ul{
    left:inherit;
    opacity:1;
}
ul.Nav li:hover a{
    text-decoration:none;
}
ul.Nav li:hover ul a{ 
    text-decoration:none;
}
ul.Nav li:hover ul li a:hover{

}

实现这一目标的最佳方式是什么..如果可能的话，我想保留当您将鼠标悬停在导航按钮上时出现的爪子！

Answer 1

在旧版本的IE中你是代码中断，因为你将一个表放在一个锚元素中。

你不需要把桌子放在那里。只需将其作为背景图像放在CSS中，然后将其对齐。

类似的东西：

a {
    opacity:0;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
a:hover {
    background: url("/i/paw.png") no-repeat;
    background-position: 100% 5px;
}

如果你想使用img元素（这样你可以设置不透明度的动画），你可以这样做更好：

<a href='#'><img src='/i/paw.png' />Home</a>

.Nav a img { 
    float: right; 
    margin-right: 5px; 
    width: 20px; 
    opacity: 0; 
    /** transition and other stuff */ 
}

这就是你所需要的一切。您可以尝试一下，看看IE中是否破坏。

PHP使用：hover图标生成CSS Dropdown

1 个答案: