HTMLメニューの実装-フロントエンドQ&A-php.cn

HTMLメニューの実装

WBOY

リリース： 2023-05-21 16:11:34

オリジナル

3236 人が閲覧しました

HTML メニューは Web デザインでよく使用されるコンポーネントであり、Web サイトのナビゲーションや操作オプションを表示するために使用できます。この記事では、HTML と CSS を使用して基本的な HTML メニューを作成する方法を説明します。

1. HTML を使用してメニューバーを作成する

HTML では、<ul> タグと <li> タグを使用できます。メニューバーを構築します。 <ul> は順序なしリストを表し、<li> は各メニュー項目を表すために使用されます。コードは次のとおりです。

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品介绍</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

ログイン後にコピー

上記のコードでは、4 つのメニュー項目を含む順序なしリストを作成します。各メニュー項目には、別のページにリンクするリンク <a> が含まれています。コードを再実行すると、垂直に配置されたメニューバーが表示されます。このメニューバーにはまだスタイルとインタラクション効果がありません。以下にスタイルを追加します。

2. CSS を使用してメニューバースタイルを追加する

次に、メニューバーをより魅力的で読みやすくするために、メニューバーにいくつかのスタイルを追加する必要があります。 CSS スタイルシートを通じてメニューバーの外観を制御できます。コードは次のとおりです。

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  li {
    float: left;
  }
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  li a:hover {
    background-color: #111;
  }
</style>

ログイン後にコピー

上記のコードでは、次の CSS プロパティを使用します。

<ul><li>list-style-type: none:リスト項目のデフォルト値見た目をすっきりさせるためにシンボルが削除されました。 <li>margin: 0; padding: 0;: メニューバーの内側と外側のマージンを 0 に設定して、デフォルトの間隔を削除します。 <li>overflow: hidden: レイアウトの問題を防ぐためにフローティング要素をクリアするために使用されます。 <li>background-color: #333: メニューバーの背景色の設定に使用されます。 <li>float: left: 各メニュー項目を左にフロートさせて 1 行に表示します。 <li>display: block: リンク要素をブロックレベル要素にし、スタイルを適用できるようにします。 <li>color:white: リンクのテキストを白に設定します。 <li>text-align: center: メニュー項目のテキストコンテンツを中央揃えにします。 <li>padding: 14px 16px: 各メニュー項目のパディングを設定します。 <li>text-decoration: none: リンクのデフォルトの下線を削除します。 <li>li a:hover: ユーザーがメニュー項目の上にマウスを置いたときに、リンク要素に新しい背景色を追加します。

3. CSS を使用してドロップダウンメニューを実装する

ドロップダウンメニューは一般的な HTML メニュータイプで、複数レベルのメニュー構造を垂直下向きの形式で表示します。。以下のコードは、順序なしリストと CSS を使用して単純なドロップダウンメニューを実装する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">首页</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

</body>
</html>

ログイン後にコピー

この例では、2 番目のメニュー項目をドロップダウンメニューに追加します。ドロップダウンメニューは、通常のメニュー項目とリンクを含むコンテナで構成されます。通常のメニュー項目の上にマウスを置くと、ドロップダウンメニューコンテナが表示されます。コンテナにはメニュー項目と追加のスタイルが含まれています。 CSS を使用して、メニュー項目とドロップダウンメニューのスタイルを設定します。

この例では JavaScript を使用して、マウスをホバーしたときのドロップダウンメニューの表示と非表示の状態を制御するトリガーをシミュレートしていることに注意してください。このコードは次のようになります:

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

ログイン後にコピー

さらに、次の CSS プロパティが使用されます:

<ul> <li> .dropdown: ドロップを含むコンテナ要素に追加されます。ダウンメニュースタイル。 <li> .dropdown-content: ドロップダウンメニューコンテナーのメニュー項目にスタイルを追加し、絶対配置要素として指定します。 <li> .dropdown:hover .dropdown-content: dropdown 要素の上にマウスを置いたときに、dropdown-content コンテナを設定します。。

4. 概要

HTML メニューは、Web サイトのデザインで一般的に使用されるコンポーネントであり、通常、Web サイトのナビゲーションと操作オプションを表示するために使用されます。通常、HTML と CSS を使用して基本的な HTML メニューを作成できます。ドロップダウンメニューを実装するには、ドロップダウンメニューの表示と非表示を制御する CSS コードと JavaScript コードを追加する必要があります。メニューをデザインするときは、ユーザーが必要な情報を簡単に見つけられるように、使いやすさと読みやすさに必ず注意を払ってください。

以上がHTMLメニューの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。