JQueryを使ってアコーディオンの形でサイトのための垂直メニュー

あなたが知っているように、メニュー、 - サイトの不可欠な部分。 面白いナビゲートオンラインリソースは、関心の訪問者することができます。 また、任意のメニューの重要な特性 - そのコンパクト。 簡単にHTMLとCSSを使用して作成したシンプルな垂直メニュー。 しかし、我々はさらに行く：私たちは、jQueryのの助けを借りて、メニュー - 「アコーディオン」を作成する方法を学習してみましょう。

メニュー- 「アコーディオン」を作成します。

アコーディオンの形で垂直メニューは何ですか？ これは、ドロップダウンリスト、ナビゲートしやすいを作成し、スタイリッシュなサイトを提供しています。 メニューは、このような方法で行われ、あなたがサブ項目の多くを回すことができます。 それらへのアクセスは、あなたがしたい項目上でマウスをクリックしたときに発生します。 誰かがjQueryのを使用せずに、このようにシンプルなメニューを作ることが可能であることを言うかもしれません。 はい、そうです。 しかし、このオブジェクトは、スマートフォンやタブレットの所有者に非常に有用ではありません。 のは、すべてに訴える、垂直メニューを作成してみましょう。 次に、ナビゲーションのスタイリング、色を変え、どのサイトにデザインを調整することが可能になります。

HTMLコード

だから、私たちの垂直方向のメニューを作成するには、最初に以下の行が含まれていますされ、HTMLコードをダイヤルする必要があります。

Accord_menu.htmlというファイルにこのコードを保存します。

あなたが見ることができるように、我々は順不同リストを作成しました。 これは、主に3つの点で構成されています。

- 写真;

- フィルム;

- ブック。

各項目には、いくつかの段落を持っています。 ＃ある場合、あなたはリンクを追加する必要があります。 今では、スタイルを記述することが重要です。 それはすべてあなたのインターネットリソースの外観に依存します。 サイトの垂直方向のメニューは、そのデザインに調和し統合する必要があります。

CSSコード

スタイルを使用すると、難しいことではありません。 私たちは、この例では、グラデーションの塗りつぶしを使用する唯一のことに注意してください。 ここでCSSコードは次のようになります。

色はCSSファイルで指定された、サイズマーカーは、左側のリスト内の項目から削除されます。 それはあなたがそれの上に置くと、各項目とサブメニューで動作する方法を決定しました。 例えば：

＃1 e1fee2 -この 淡緑色 副。

あなたがそれらの上にマウスを置く＃C4f0f7 -golubovatyシェードサブ。

ディスプレイのプロパティは、必要なパディングとサイズを調整するためにブロック値を尋ねます。 色、サイズ、フォントの種類、場所は - すべてはCSSファイルに記述してあります。 例えば、accordionmenu_my1.css、それを呼び出します。

jQueryのメニューの改善を接続します

ご存知の通り、私たちの目標は、 - 垂直メニューのjQueryを作成します。 あなたはこの技術に精通していない場合、心配しないでください。 我々は、Googleのリポジトリを使用してjQueryのスクリプトを接続します。 これは、より魅力的なメニューになります。 jQueryのは、ハイパーテキストマークアップHTMLとJavaScriptの相互作用に基づいたJavaScriptライブラリです。 jQueryのは、あなたが要素の内容と属性にアクセスすることができます。

だから、HTMLファイルのボディに必要なスクリプトを接続し、競馬の要素を除いて、2つの変数の保存のためのルールを設定します。 マウスクリックがされた一方の開口部に他のタブを閉じ、コードを寄与する。 ここではそれがどのように見えるかです：

すべての変更を保存し、それはブラウザのメニューでどのように見えるかを確認。 それは共通の結果です： その結果、我々はあなたが常に自分の好みに応じて、変更することができます魅力的なメニューを歩んでいます。 そして、jQuery、CSSの分野で新しい知識を獲得、あなたは自分のスキルを向上、サイトのユニークな要素を作成します。