1レベルのメニューを作成するには、多くの解決策があります。 ULタグとLIタグを使用して、メニュー要素を囲むことができます。または、メニュー要素のリストが含まれているdivタグを作成することもできます。

この記事の結果には、次のインターフェイスが含まれます。

注：メニューはリンクになるため、タグを使用して各要素にリンクをアタッチする必要があります。

1レベルメニューのHTMLを作成する

解決策を選択するのは、メニューをラップするdivタグを作成することです。

 <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div>

次に、このHTMLのCSSのスタイルを設定して、目的の結果を得る必要があります。

1レベルメニューのCSSを追加

ステップ1 ：メニューの背景を青にしたいので、周囲のdivタグのCSSを記述します。

 .menu{ background: #333 }

ステップ2 ：メニューの白いフォントを作成します。空白を追加し、メニュー間の間隔を広げます。

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; }

見た目はとても良くなりますね。メニュー上でマウスを動かしたときに効果を作成したいのですが、背景が白に変わり、テキストの色が青に変わります。

マウスを動かすためのCSSを作成するには、CSS :hoverプロパティを使用します。

 .menu a:hover{ color: #333; background: #fdfdfd; }

ULタグとLIタグを選択して、1レベルのメニューを作成します

このソリューションでは、HTML構造は少し複雑になりますが、後でサブメニューを追加する場合は、はるかに簡単です。

HTML構造は次のようになります。

 <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul>

ステップ1 ：デフォルトでは、 ulタグにはCSSのパディングとマージンがあります。したがって、パート1のようにメニューを表示するには、リセットする必要があります。また、背景を追加することも忘れないでください。

 .menu{ margin: 0px; padding: 0px; background: #333 }

ステップ2 ： liタグはブロックとして表示されるため、1つはインラインに変換し、もう1つはfloatを使用して片側にプッシュします。また、 list-style:noneを使用してドットを削除する必要があります。

フロートを使用します。

 .menu li{ float:left; list-style: none }

ああ、背景がなくなったようです。その理由は、 liタグにfloat:leftを使用したため、メニューの高さがliタグに依存しなくなったためです。 .menuにoverflow：hiddenプロパティを追加してみましょう。これで解決します。

 .menu{ margin: 0px; padding: 0px; background: #333; overflow: hidden }

ステップ3 ：パート1のようにタグのスタイルを設定する必要があります。

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; } .menu a:hover{ color: #333; background: #fff; }

結果は期待通りでした。

これで、単純なHTMLとCSSを使用して1レベルのメニューを作成する方法に関するチュートリアルを完了しました。この記事では、メニューを作成する際に、それぞれの状況に対処するスキルを練習してほしいと思います。後で、より多くの複雑なメニュータイプに遭遇します。