まずヘッダメニューの雛形を作ります。
### classにcollapse navbar-collapseのみ
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/estimate">見積管理</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/order">受注管理</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/client">得意先管理</a>
</li>
<li class="nav-item active">
<a class="nav-link disabled" href="">その他</a>
</li>
</div>
![](http://hpscript.com/blog/wp-content/uploads/2020/08/スクリーンショット-2020-08-02-7.38.09-300x217.png)
続いて、ドロップダウンをつけていきます。
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/estimate">見積一覧</a>
<a class="dropdown-item" href="/estimate/input">見積登録</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/order">受注管理</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/client">得意先管理</a>
</li>
<li class="nav-item active">
<a class="nav-link disabled" href="">その他</a>
</li>
</div>
![](http://hpscript.com/blog/wp-content/uploads/2020/08/スクリーンショット-2020-08-02-7.50.08-300x175.png)
悪くはないけど。悪くはないけど背景色とカラーを変えたい。(=悪い)
/src/scss/style.scss
.navbar {
.navbar-nav {
.dropdown-menu {
background-color: #1e90ff;
}
.active {
a, a:focus, a:hover {
background-color: #1e90ff;
color: #fff;
}
}
}
}
![](http://hpscript.com/blog/wp-content/uploads/2020/08/スクリーンショット-2020-08-02-8.07.49-300x149.png)
まあいいけど、操作性を考えると、区切り線を入れたい。
class=”divider”で上手くいかないので、hrで対応する。
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/estimate">見積一覧</a>
<hr>
<a class="dropdown-item" href="/estimate/input">見積登録</a>
</div>
</li>
.navbar {
.navbar-nav {
.dropdown-menu {
background-color: #1e90ff;
}
.active {
a, a:focus, a:hover {
background-color: #1e90ff;
color: #fff;
}
}
hr {
margin-top: 5px;
margin-bottom: 5px;
}
}
}
pc
![](http://hpscript.com/blog/wp-content/uploads/2020/08/スクリーンショット-2020-08-02-8.22.41-300x159.png)
sp
![](http://hpscript.com/blog/wp-content/uploads/2020/08/スクリーンショット-2020-08-02-8.23.01-300x215.png)
想像してたより綺麗。これで、見積管理以外のドロップダウンも作り込んでいきます。