BootstrapとjQueryで作る登録・削除・変更のメニューバーをプログラミングで作ります。
4パターン紹介していきます。大学生やIT就活生は自分なりの制作物のためにアレンジしてみてくださいね！
目次
【CSS#21】BootstrapとjQueryで作る登録・削除・変更のメニューバー4選
index1.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- ビューポートの設定--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UPDOWN TECH</title> <!-- Bootstrapで使うCSSの読み込み--> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <section class="container"> <!-- タブの表示 --> <ul class="nav nav-tabs"> <li class="active"><a href="#menu1" data-toggle="tab">登録</a></li> <li><a href="#menu2" data-toggle="tab">変更</a></li> <li><a href="#menu3" data-toggle="tab">削除</a></li> </ul> <!-- タブの本文 --> <div class="tab-content"> <div class="tab-pane fade in active" id="menu1">登録画面の本文</div> <div class="tab-pane fade" id="menu2">変更画面の本文</div> <div class="tab-pane fade" id="menu3">削除画面の本文</div> </div> </section> <!-- jQueryの読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrapで使うJavaScriptの読み込み--> <script src="js/bootstrap.min.js"></script> </body> </html>
[完成図]
「登録」→「登録画面の本文」
「変更」→「変更画面の本文」
「削除」→「削除画面の本文」
ボタンを押すと下の表記が変わります。
index2.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- ビューポートの設定--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UPDOWN TECH</title> <!-- Bootstrapで使うCSSの読み込み--> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <section class="container"> <!-- タブの表示 --> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#menu1" data-toggle="tab">登録</a></li> <li><a href="#menu2" data-toggle="tab">変更</a></li> <li><a href="#menu3" data-toggle="tab">削除</a></li> </ul> <!-- タブの本文 --> <div class="tab-content"> <div class="tab-pane fade in active" id="menu1">登録画面の本文</div> <div class="tab-pane fade" id="menu2">変更画面の本文</div> <div class="tab-pane fade" id="menu3">削除画面の本文</div> </div> </section> <!-- jQueryの読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrapで使うJavaScriptの読み込み--> <script src="js/bootstrap.min.js"></script> </body> </html>
[完成図]
この画面も上記の通りボタンを押すと下の表記が変わります。ウィンドウを広げてもボタンの広さを合わせてくれます。
index3.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- ビューポートの設定--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UPDOWN TECH</title> <!-- Bootstrapで使うCSSの読み込み--> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <section class="container"> <!-- ピルナビゲーションの表示 --> <ul class="nav nav-pills"> <li class="active"><a href="#">登録</a></li> <li><a href="#">変更</a></li> <li><a href="#">削除</a></li> </ul> <hr /> <!-- 積み重ねピルナビゲーションの表示 --> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">登録</a></li> <li><a href="#">変更</a></li> <li><a href="#">削除</a></li> </ul> </section> <!-- jQueryの読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrapで使うJavaScriptの読み込み--> <script src="js/bootstrap.min.js"></script> </body> </html>
[完成図]
index4.html
[完成図]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- ビューポートの設定--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UPDOWN TECH</title> <!-- Bootstrapで使うCSSの読み込み--> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <section class="container"> <br> <br> <!-- ピルナビゲーションの無効化 --> <ul class="nav nav-pills"> <li class="active"><a href="#">登録</a></li> <li><a href="#">変更</a></li> <li class="disabled"><a href="#">削除</a></li> </ul> </section> <!-- jQueryの読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrapで使うJavaScriptの読み込み--> <script src="js/bootstrap.min.js"></script> </body> </html>
まとめ
いかがでしたでしょうか。これで4パターンもメニューバーを作れるようになりました。
ぜひ気に入ったものがあれば自分のサイトに実装してみてくださいね！