Плавающее выезжающее анимированное боковое меню на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); nav { width: 106px; height: 100vh; box-sizing: border-box; padding: 20px 0; position: fixed; top: 0; left: 0; white-space: nowrap; overflow: hidden; background: #242128; border-right: 12px solid #542088; transition: all 0.5s; } nav > span { display: block; padding: 2em; font-size: 14px; margin: 0 0; color: rgba(255,255,255,0); font-weight: 600; transition: all 0.5s; } nav .navitem { color: rgba(0,0,0,0); display: block; position: relative; text-decoration: none; font-size: 24px; padding: 0.5em 2em; transition: all 0.5s; } nav .navitem:hover { color: #fff; } nav .navitem:hover i { color: #fff; } nav .navitem i { font-size: 32px; vertical-align: middle; margin-left: 50%; color: rgba(255,255,255,0.5); padding: 8px; border: 4px solid; border-radius: 100%; transform: translateX(-50%); transition: all 0.2s 0.5s; } nav:hover { width: 360px; } nav:hover span { color: rgba(255,255,255,0.5); transition: all 1s 0.25s; } nav:hover .navitem { color: rgba(255,255,255,0.8); } nav:hover .navitem i { margin-left: 0; } nav:hover .navitem:nth-of-type(1) { transition: all 0.2s, color 1s 0.275s; } nav:hover .navitem:nth-of-type(1) i { transition: all 0.2s, margin-left 0.2s 0.275s; } nav:hover .navitem:nth-of-type(2) { transition: all 0.2s, color 1s 0.3s; } nav:hover .navitem:nth-of-type(2) i { transition: all 0.2s, margin-left 0.2s 0.3s; } nav:hover .navitem:nth-of-type(3) { transition: all 0.2s, color 1s 0.325s; } nav:hover .navitem:nth-of-type(3) i { transition: all 0.2s, margin-left 0.2s 0.325s; } nav:hover .navitem:nth-of-type(4) { transition: all 0.2s, color 1s 0.35s; } nav:hover .navitem:nth-of-type(4) i { transition: all 0.2s, margin-left 0.2s 0.35s; } nav:hover .navitem:nth-of-type(5) { transition: all 0.2s, color 1s 0.375s; } nav:hover .navitem:nth-of-type(5) i { transition: all 0.2s, margin-left 0.2s 0.375s; } nav:hover .navitem:nth-of-type(6) { transition: all 0.2s, color 1s 0.4s; } nav:hover .navitem:nth-of-type(6) i { transition: all 0.2s, margin-left 0.2s 0.4s; } nav:hover .navitem:nth-of-type(7) { transition: all 0.2s, color 1s 0.425s; } nav:hover .navitem:nth-of-type(7) i { transition: all 0.2s, margin-left 0.2s 0.425s; } nav:hover .navitem:nth-of-type(8) { transition: all 0.2s, color 1s 0.45s; } nav:hover .navitem:nth-of-type(8) i { transition: all 0.2s, margin-left 0.2s 0.45s; } nav:hover .navitem:nth-of-type(9) { transition: all 0.2s, color 1s 0.475s; } nav:hover .navitem:nth-of-type(9) i { transition: all 0.2s, margin-left 0.2s 0.475s; } nav:hover .navitem:nth-of-type(10) { transition: all 0.2s, color 1s 0.5s; } nav:hover .navitem:nth-of-type(10) i { transition: all 0.2s, margin-left 0.2s 0.5s; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav> <a class="navitem" href="#"> <i class="material-icons">home</i>Home</a> <a class="navitem" href="#"><i class="material-icons">chrome_reader_mode</i>Articles</a> <a class="navitem" href="#"><i class="material-icons">folder</i>Projects</a> <span>Title</span> <a class="navitem" href="#"><i class="material-icons">movie</i>Videos</a> <a class="navitem" href="#"><i class="material-icons">book</i>Tutorials</a> <a class="navitem" href="#"><i class="material-icons">description</i>Documentation</a> <a class="navitem" href="#"><i class="material-icons">code</i>Github</a> </nav> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
