【CSS】サイドメニュー【HTML】 - 頑張りすぎず頑張ろう

サイドメニューのスタイリング【ホバー時に横に広がるアニメーション】

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLとCSS3で作るサイドメニュー</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul class="menu">
<li class="brand">
</li>
<li class="menu-item">
<i class="fa fa-list-ul" aria-hidden="true"></i>ブック一覧
</li>
<li class="menu-item">
<i class="fa fa-comments" aria-hidden="true"></i>ディスカッション
</li>
<li class="menu-item">
<i class="fa fa-user" aria-hidden="true"></i>アカウント設定
</li>
<li class="menu-item">
<i class="fa fa-question-circle" aria-hidden="true"></i>ヘルプ
</li>
</ul>
<div class="contents">
CODEPREPの新しいメニューを再発明してみた
</div>
</div>
</body>
</html>

style.css

html, body {
padding: 0;
margin: 0;
height: 100%;
}

ul, li {
margin: 0;
padding: 0;
list-style: none;
}

.container {
height: 100%;
}

.menu {
background: #8c618d;
color: #fff;
position: absolute;
height: 100%;
width: 45px;
white-space: nowrap;
overflow: hidden;
transition: width 0.1s ease-in;
transition-delay: 0.3s;
}

.contents {
background: #eee;
height: 100%;
padding: 20px;
box-sizing: border-box;
margin-left: 45px;
}

.brand {
height: 70px;
background-image: url('assets/images/logo.svg');
background-size: 150px 30px;
background-repeat: no-repeat;
background-position: left 12px center;
}

.menu-item .fa {
font-size: 19px;
width: 45px;
text-align: center;
}

.menu-item {
line-height: 35px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

.menu-item:hover {
background: #4d294d;
}

.menu:hover {
width: 200px;
}