3

このナビゲーションバーをPhotoshopで設計しましたが、純粋なcssナビゲーションバーに変換する方法がわかりません。誰かアイデアがありますか？

TIA。

ナビゲーションバーの画像

大きな画像へのリンク

4

2 に答える 2

1

Web Designer wallをチェックしてください。私が今まで見た純粋な css ドロップダウン メニューの最良の例の 1 つです (ソースを表示して css コードを確認してください)。色とスタイルを少し変更するだけで、デザインを再現できるはずです。

于 2011-04-07T02:18:01.340 に答える
1

完全には完了していません。ドロップダウンに取り組んだり、検索を追加したりする時間がありませんでしたが、正しい方向への重要なステップになるはずです。

CSS:

nav { 
            display:block; margin:0; padding:0; width:978px; height:53px; 
            border-bottom:1px solid #abd2f9; border-top:1px solid #f0f9fe; border-left:1px solid #d1e7fc; border-right:1px solid #d1e7fc;
            -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
            background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(238,248,255,1)), color-stop(100%, rgba(207,234,253,1)));
            background:-moz-linear-gradient(top,rgba(238,248,255,1), rgba(207,234,253,1) 100%);
            background:linear-gradient(top, rgba(238,248,255,1), rgba(207,234,253,1) 100%);
        }
        nav ul {
            display:block; margin:0; padding:0 45px; list-style:none;
        }
        nav ul li {
            float:left; display:block; margin:0; padding:0;
        }
        nav ul li a { 
            display:block; margin:0 16px 0 0; padding:0 16px; height:53px; line-height:53px; color:#444; text-decoration:none;
        }
        nav ul li a:hover {
            background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(207,234,253,1)), color-stop(100%, rgba(238,248,255,1)));
            background:-moz-linear-gradient(top,rgba(207,234,253,1), rgba(238,248,255,1) 100%);
            background:linear-gradient(top, rgba(207,234,253,1), rgba(238,248,255,1) 100%);
        }

        nav ul li ul {
            display:none; padding:0;
        }
        nav ul li ul li {
            float:none;
        }

HTML:

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">INFORMATION</a>
            <ul>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">EVENTS</a></li>
                <li><a href="#">HELP</a></li>
            </ul>
        </li>
        <li><a href="#">COURSES</a></li>
        <li><a href="#">CONTACT US</a></li>
    </ul>
</nav>
于 2011-04-07T02:29:45.790 に答える