【CSS#21】BootstrapとjQueryで作る登録・削除・変更のメニューバー4選

2020.05.17 2020.01.08

この記事は約9分で読めます。

現役エンジニアがおすすめするプログラミングスクール！

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。

無料相談はこちら！

Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社（株式会社LIG）が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。

無料相談はこちら！

テックキャンプデザイナー転職（旧：【TECH::EXPERT】デザインスクール）

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。

無料相談はこちら！

SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。

無料相談はこちら！

ポートフォリオ制作実績

BootstrapとjQueryで作る登録・削除・変更のメニューバーをプログラミングで作ります。

4パターン紹介していきます。大学生やIT就活生は自分なりの制作物のためにアレンジしてみてくださいね！

1 【CSS#21】BootstrapとjQueryで作る登録・削除・変更のメニューバー4選
2 まとめ

【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>

<!– タブの表示 –>
<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>

<!– タブの表示 –>
<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>

</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>

<!– ピルナビゲーションの表示 –>
<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>

<!– 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パターンもメニューバーを作れるようになりました。

ぜひ気に入ったものがあれば自分のサイトに実装してみてくださいね！