一部のウェブマスターは時間を無駄にしたくないすでに存在する単純な要素のゼロからの開発。彼らは、長い間存在していた何かに時間を費やしても意味がないと信じています。実際、HTMLとCSSを学んでいるだけの人にとっては、自分の仕事をよく理解するために、自分で多くのことをすることが重要です。これはメニューにも当てはまります。縦型のCSSメニューを作成しましょう。 HTMLとCSSのみに基づいており、JavaScriptやJQueryは使用していません。各メニューは、サイトのページへのリンクのリストです。
基本的な手順
シンプルな垂直CSSメニューを作成するには、次の一連の手順が必要です。
1.最初に、メニューを構成するリンク（HTMLコードを使用）のリストを定義します。次のような名前を付けます。
- ホーム。
- 私たちの歴史。
- リーダーシップ。
- サービス。
- 連絡先。
2.次に、CSSを使用してリンクのスタイルを設定します。
HTMLコードを記述してmy_Vmenu.htmlファイルに保存し、ブラウザでどのように表示されるかを見てみましょう。
これがメニューのベース（スケルトン）です。 ＃1、＃2など リンクに置き換える必要があります。ブラウザですべてがどのように見えるかを確認します。あなたは絵が気に入らないでしょう。次に、要素のスタイルの説明を開始して、本格的な垂直CSSメニューを作成する必要があります。
スタイルの説明
ファイルmy_Vmenuを作成します。cssでは、サイトのそのような重要な要素の外観を改善するために何でも設定できます。以下は、垂直CSSメニューをアニメーション化する埋め込みコードです。作成したファイルに書き留めてから、ここに記載されている主要な行の意味を詳しく見ていきます。
使用されるスタイルの詳細な説明
次に、垂直CSSメニューを詳しく見てみましょう。
ul＃my_Vmenuは、リスト全体の一般的なスタイルです。
ul＃my_Vmenu li a-liタグ間のリンクスタイル。
ul＃my_Vmenu li a：ホバーは、人が項目の1つにカーソルを合わせたときの、問題のメニューの項目のタイプの説明です。
ul＃my_Vmenu li a span-テキストによる説明（メニュー名）。
ファイルmy_Vmenu.cssおよびmy_Vmenuを忘れないでください。htmlは1つのディレクトリに保存する必要があります。ただし、それらは別のフォルダーに配置することもできますが、my_Vmenu.htmlファイルにmy_Vmenu.cssへのパスを登録することが重要です。初心者はこれに問題があることが多いので注意してください。
スタイルは、htmlファイルのヘッドタグの間に含める必要があります。 menu_1.pngとmenu_2.pngは、通常の状態でホバーしたときにメニュー項目を表示するための画像です。
画像を別のフォルダに保存することをお勧めします画像、my_imagesという名前を付けますが、CSSコードを修正します。これらの画像がこのディレクトリにあることが示されている場所に書き込みます：url（my_images / menu_1.png）およびurl（my_images / menu_2.png）。
CSSコードで説明されている残りのプロパティでは、わかりやすい。メニューの外観を定義します。ポイントの幅と高さは、通常の状態のポイントとマウスをポイントしたときに同じに設定されていることが簡単にわかります。フォントサイズは18pxで、パディングはアイテムタイトルの異なる側のパディングを設定します。 displayプロパティを使用すると、表示をブロック単位で設定して、幅とパディングを設定できます。
垂直メニュー
ご覧のとおり、垂直方向のCSSメニューは簡単に作成できます。 知識ベースに基づいて、インターネットリソースの訪問者にとって美しく魅力的なものにすることができます。想像力を働かせれば、スタイリッシュなメニューがあなたのサイトを飾ります。
