0

さて、ウェブサイト用にこのドロップダウン スクリプトを書きましたが、最新の標準を使用してアイコンを機能させる方法を思いつきませんでした。瞬間はかなり悪い練習です。

私がやったことは、通常の CSS ドロップダウン Navbar ですが、ブロック要素にテーブルを配置します。したがって、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 で正常に動作し、ここで Web ページを表示できます。

これは私の 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{

}

これを達成するための最良の方法は何ですか.. 可能であれば、ナビゲーションボタンにカーソルを合わせたときに表示される足を保持したい!

4

1 に答える 1

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で壊れるかどうかを確認できます。

于 2013-08-01T11:49:34.557 に答える