jQuery CSS は横スライド ナビゲーション メニューを実装します code_jquery
サイド メニューは web サイトのデザインで広く使用されており、このタイプのメニューは多くの web サイトで見られます。重要な情報を表示し、より読みやすく美しくし、ユーザー体験価値を満足させることができます。
今日は、jquery と css を使用して横スライド メニューを実装する方法を説明します。
ナビゲーション メニューを構築するには、まず html 構造を見てみましょう。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>animation menu demo</title> <link rel="stylesheet" href=" <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href=" <script src=" </script> <script src="script.js"> </script> <link rel="stylesheet" href="style.css"> </head><body> <!-- content goes here --> </body> </html>
まず、メニューがすべてのブラウザで同じになるように、normalize.css をデフォルトのスタイルとして参照します。メニュー項目の下のアイコンを表示するには、フォント アイコン fontawesome を使用します。メニュー切り替えを実装するには jquery も参照する必要があります。
パネル ボタン
サイト パネルのナビゲーション ボタンはどれも似ています。 fontawesome のようなアイコンフォントになることが多いですが、このチュートリアルではアニメーションを加えたいので、横線で行います。基本的に、私たちのボタンは水平線として表示される 3 つの div を含むスパンです。
<span class="toggle-button"> <div class="menu-bar menu-bar-top"></div> <div class="menu-bar menu-bar-middle"></div> <div class="menu-bar menu-bar-bottom"></div> </span>
スタイルは次のようになります:
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}ボタンの位置は固定されており、移動していないときにページをスクロールします。また、他の重なり合う要素の上に常に配置されるように、z-index :15 を持っています。ボタンは 3 本の水平線で構成されています。それぞれの水平線には独自のスタイルがあり、それに .menu-bar スタイルを追加します。クラスの残りのスタイルは、別のスタイル ファイルに移動されました。アニメーションが発生したら、クラス .button-open を追加します。より便利に実装できる jquery を引用します。
$(document).ready(function() {
var $togglebutton = $('.toggle-button');
$togglebutton.on('click', function() {
$(this).toggleclass('button-open');
});
});初心者は jquery に慣れていないかもしれません。何が起こっているのか説明しましょう。まず、ボタンを含む $togglebutton という変数を初期化します。これを変数として保存し、ボタンのクリックを監視するイベント モニターを作成します。クリックされるたびに、イベント リスナーはメソッド関数 toggleclass() を実行して .button-open を切り替えます。
.button-open これを使用して、これらの要素の表示方法を変更できます。 css3のtranslate()関数とrotate()関数を使用して、上下の水平線を45度回転し、中央の水平線が徐々に消えます。デモ内のボタンをクリックして効果を確認できます。
サイド メニュー
サイド スライド メニューの html 構造は次のとおりです:
<div class="menu-wrap"> <div class="menu-sidebar"> <ul class="menu"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">blog</a></li> <li class="menu-item-has-children"><a href="#">click the arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <li><a href="#">alignment</a></li> <li><a href="#">markup</a></li> <li><a href="#">comments</a></li> </ul> </li> <li><a href="#">courses</a></li> <li><a href="#">get in touch</a></li> </ul> </div> </div>
メニューの各スタイルについてはここでは詳しく説明しませんので、.menu-wrapのdivを見てみましょう。そのスタイルは次のとおりです:
.menu-wrap {
background-color: #6968ab;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}その位置は固定されているため、メニューは常に同じ場所でスクロールします。高さは 100% に設定されます。左マージンが負の数に設定されているため、メニューが表示されなくなることに注意してください。外観効果を与えるために、jquery を使用して別のクラスを呼び出して表示し、閉じます。 javascript コードは次のとおりです。
$(document).ready(function() {
var $togglebutton = $('.toggle-button'),
$menuwrap = $('.menu-wrap');
$togglebutton.on('click', function() {
$(this).toggleclass('button-open');
$menuwrap.toggleclass('menu-show');
});
});メニューのすべての項目を含む変数 $menuwrap を追加し、同じイベントを使用してボタンを作成します。この .menu-show の左マージンは 0 で、いくつかのボックス シャドウ効果が追加されています。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #b9adad;
}サブメニューとリンク
リスト項目にクラス .menu-item-has-children があることに気づくかもしれません。サブメニューが含まれています。同時に、リンクの後に、クラス .sidebar-menu-arrow があります。
<li class="menu-item-has-children"><a href="#">click the arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <!-- list items --> </ul> </li>
span には、fontawesome 矢印を実装する ::after 疑似要素パッケージがあります。デフォルトでは、サブメニューは非表示になっており、親メニューをクリックした場合にのみ表示されます。
$(document).ready(function() {
var $sidebararrow = $('.sidebar-menu-arrow');
$sidebararrow.click(function() {
$(this).next().slidetoggle(300);
});
});矢印をクリックすると、ターゲットの次の要素の後のスパンを使用して関数が呼び出され、表示されます。 jqueryのslidetoggleを使用します。要素のスライド効果を表示または非表示にします。この関数にはアニメーション時間パラメータがあります。
最後に、デモ メニュー項目にはホバー効果があります。 ::after 疑似要素を使用します。コードは次のとおりです。
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #fffa3b 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}この ::after 疑似要素には、高さと幅が 0.15em で、各リンクの下に絶対配置されたブロックレベルの要素が含まれています。線に背景色を適用するだけではなく、背景画像に linear-gradient() 関数を使用します。この関数の目的は色のグラデーションを作ることですが、パーセンテージを指定することで色のグラデーションを作ることができます。
.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}ここの線の半分は透明で、残りの半分は黄色です。透明な部分がすべてのリンクの幅を占めるように、背景サイズを幅の 200% に渡します。
透明部分は他の色を使用することもできます。これにより、線が別の色で塗りつぶされたように見えますが、実際には 2 色の線にすぎません。
上記は、横スライド ナビゲーション メニュー code_jquery を実装するための jquery css の内容です。さらに関連した内容については、php 中国語 web サイト (www.php.cn) に注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
79
11
21
66
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
