svgアイコンを使ったシンプルで見やすいCSSナビゲーションサイドバーです。svgアイコンはインラインに記述されているので、外部のフォントなどを読み込む必要はなく、簡単に設置できます。
htmlソース
<div class="container2">
<div class="sidebar">
<div class="opt">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>
<div class="opt--text">Home</div>
</div>
<div class="opt">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z" />
</svg>
<div class="opt--text">Docs</div>
</div>
<div class="opt">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z" />
</svg>
<div class="opt--text">Contact</div>
</div>
<div class="opt">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
<div class="opt--text">About</div>
</div>
<div class="opt">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg>
<div class="opt--text">Download</div>
</div>
</div>
</div>
htmlソース
.container2 {
display: flex;
justify-content: center;
align-items: center;
width: 190px;
margin:30px auto;
}
.sidebar {
background-color: #ecf0f1;
box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
.opt {
display: flex;
justify-content: flex-start;
padding: 1rem;
cursor: pointer;
background-color: #eee;
color: #535353;
transition: .2s;
}
.opt:hover {
background-color: #535353;
color: white;
}
.opt:active {
background-color: #333;
}
.opt svg {
fill: currentColor;
margin-right: 8px;
}
.opt--text {
color: inherit;
text-transform: uppercase;
font-weight: 300;
-moz-user-select: none;
user-select: none;
}
