diff --git a/100_projects/71-responsive-sidebar-menu/css/style.css b/100_projects/71-responsive-sidebar-menu/css/style.css new file mode 100644 index 0000000..a54a093 --- /dev/null +++ b/100_projects/71-responsive-sidebar-menu/css/style.css @@ -0,0 +1,100 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + min-height: 100vh; + background: #131313 +} +.navigation{ + position: fixed; + width: 60px; + height: 100%; + background: #3e0748; + transition: .5s; + overflow: hidden; +} +.navigation:hover, +.navigation.active{ + width: 300px; +} + +.navigation ul{ + position: absolute; + top: 0; + left: 0; + width: 100%; +} +.navigation ul li{ + position: relative; + width: 100%; + list-style: none; +} +.navigation ul li:hover{ + background: #8B0000; +} +.navigation ul li a{ + position: relative; + display: block; + width: 100%; + display: flex; + text-decoration: none; + color: #fff; +} +.navigation ul li a .icon{ + position: relative; + display: block; + min-width: 60px; + height: 60px; + line-height: 60px; + text-align: center; +} +.navigation ul li a .icon ion-icon{ +font-size: 24px; +} +.navigation ul li a .title{ + position: relative; + display: block; + padding: 0 10px; + line-height: 60px; + text-align: start; + white-space: nowrap; +} +.toggle{ + position: absolute; + top: 0; + right: 0; + width: 50px; + height: 50px; + background-color: #330748; + cursor: pointer; + border-radius: 50%; +} +.toggle.active{ + background-color: #8B0000; +} +.toggle::before{ + content: '≡'; + color: #fff; + position: absolute; + width: 100%; + height: 100%; + line-height: 50px; + text-align: center; + font-size: 29px; + transition: .3s; +} +.toggle.active:before{ + content: '✖'; + font-size: 15px; +} +@media(max-width:767px){ + .navigation{ + left: -60px; + } + .navigation.active{ + left: 0; + width: 100%; + } +} \ No newline at end of file diff --git a/100_projects/71-responsive-sidebar-menu/index.html b/100_projects/71-responsive-sidebar-menu/index.html new file mode 100644 index 0000000..c618cbc --- /dev/null +++ b/100_projects/71-responsive-sidebar-menu/index.html @@ -0,0 +1,65 @@ + + +
+ + + + +