Bulma-components-navbar
提供：Dev Guides
ブルマ-ナビバー
説明
Navbarは、サイトのナビゲーションヘッダーとして機能するレスポンシブコンポーネントです。
Navbarコンポーネントには、次の構造が含まれています-
*navbar* -*navbar-brand* -リンクまたはロゴを含む<a>タグ要素が含まれます。navbar-burger -これはハンバーガーアイコンで、小さなデバイスのnavbarメニューを切り替えます（例： 携帯電話）。
*navbar-menu* -デスクトップでは表示され、小さなデバイスでは表示されない右側のメニューです。*navbar-start* -メニューの左側に表示されます。*navbar-end* -メニューの右側に表示されます。*navbar-item* -navbarの単一の項目を指定します。*navbar-link* -ドロップダウン矢印を指定します。*navbar-dropdown* -navbarアイテムとディバイダーを含むドロップダウンメニューを指定します。navbar-divider -ドロップダウン項目を分割する水平線を指定します。
以下の例は、_Navbar_コンポーネントの上記の要素の使用法を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Simple Navbar
</span>
<br>
<br>
<nav class = "navbar">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">finddevguides</a>
<div class = "navbar-burger burger" data-target="navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-hoverable">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">Python</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">One more separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item">
<div class = "field is-grouped">
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Google plus" href = "#">
<span class = "icon">
<i class = "fab fa-google-plus-square fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
<span class = "icon">
<i class = "fab fa-twitter fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "button is-info" href = "https://www.finddevguides.com/java/java_tutorial.pdf">
<span class = "icon">
<i class = "fas fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>以下の出力が表示されます-
ナビバーの色
Bulmaでは、以下の修飾子を使用してnavbarの背景色を変更できます-
- プライマリです
- is-link
- is-info
- 成功
- 警告です
- 危険です
- 黒
- は暗い
- 軽い
_navbar_クラス内で上記の修飾子のいずれかを使用して、簡単な例を作成しましょう-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Navbar Color
</span>
<br>
<br>
<nav class = "navbar is-primary">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">finddevguides</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-hoverable">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item">
<div class = "field is-grouped">
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Google plus" href = "#">
<span class = "icon">
<i class = "fab fa-google-plus-square fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
<span class = "icon">
<i class = "fab fa-twitter fa-2x"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>以下の出力が表示されます-
上記の例では、_is-primary_修飾子を使用しました。 他の修飾子を使用する場合は、この修飾子を_navbar_クラスの修飾子に置き換えます。
ドロップアップナビゲーションバー
Bulmaでは、下の例に示すように、_navbar-item_内で_has-dropdown_および_has-dropdown-up_修飾子を使用して、ナビゲーションバーの上にドロップアップメニューを表示できます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Dropup Navbar
</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">finddevguides</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown has-dropdown-up is-active">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>以下の出力が表示されます-
右ドロップダウン
次の例に示すように、_is-right_修飾子を使用して、右側にドロップダウンを配置できます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Right Dropdown
</span>
<br>
<br>
<nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">finddevguides</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-active">
<a class = "navbar-link" href = "#">Left Menu</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item has-dropdown is-active">
<a class = "navbar-link" href = "#">Right Menu</a>
<div class = "navbar-dropdown is-right">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>以下の出力が表示されます-
