├── .gitignore ├── menu-1 ├── assets │ ├── bg.jpeg │ ├── bg.png │ ├── close.svg │ ├── home.svg │ ├── logo.png │ ├── menu.svg │ ├── search.svg │ └── settings.svg ├── index.html └── styles.css ├── menu-2 ├── bg.webp ├── close.svg ├── index.html ├── menu.svg └── styles.css ├── menu-3 ├── bg.jpeg ├── bg.webp ├── close.svg ├── index.html ├── menu.svg └── styles.css ├── menu-4 ├── 1.png ├── 10.png ├── 11.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.png ├── index.html ├── logo.svg └── styles.css └── menu-5 ├── bg.png ├── close.svg ├── index.html ├── menu.svg └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /menu-1/assets/bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-1/assets/bg.jpeg -------------------------------------------------------------------------------- /menu-1/assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-1/assets/bg.png -------------------------------------------------------------------------------- /menu-1/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-1/assets/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-1/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-1/assets/logo.png -------------------------------------------------------------------------------- /menu-1/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-1/assets/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-1/assets/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar 1 8 | 9 | 10 | 14 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 30 |
31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /menu-1/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: "Euclid Circular A", Poppins; 7 | color: #f9f9f9; 8 | } 9 | 10 | button { 11 | border: 0; 12 | padding: 0; 13 | background: transparent; 14 | cursor: pointer; 15 | } 16 | 17 | .navbar, 18 | .navbar-burger, 19 | .menu, 20 | .background { 21 | position: fixed; 22 | } 23 | 24 | .background { 25 | z-index: 1; 26 | top: -10%; 27 | left: -10%; 28 | width: 120%; 29 | height: 120%; 30 | background-image: url("assets/bg.jpeg"); 31 | background-size: cover; 32 | background-repeat: no-repeat; 33 | background-position: 80%; 34 | transition: 0.5s; 35 | } 36 | 37 | body.open .background { 38 | filter: blur(10px); 39 | } 40 | 41 | .navbar { 42 | z-index: 1; 43 | top: 0; 44 | left: 0; 45 | display: flex; 46 | align-items: center; 47 | justify-content: space-between; 48 | width: 100%; 49 | height: 72px; 50 | padding-left: 20px; 51 | padding-right: 72px; 52 | } 53 | 54 | .navbar-burger { 55 | z-index: 3; 56 | top: 0; 57 | left: 0; 58 | display: grid; 59 | place-items: center; 60 | width: 88px; 61 | height: 88px; 62 | background-image: url("./assets/menu.svg"); 63 | background-repeat: no-repeat; 64 | background-position: center; 65 | } 66 | 67 | body.open .navbar-burger { 68 | background-image: url("./assets/close.svg"); 69 | } 70 | 71 | .menu { 72 | z-index: 2; 73 | top: 0; 74 | left: 0; 75 | display: grid; 76 | place-items: center; 77 | width: 100%; 78 | height: 100%; 79 | background: rgba(0, 0, 0, 0.6); 80 | opacity: 0; 81 | visibility: hidden; 82 | border-bottom: 20px solid white; 83 | transition: 0.5s; 84 | } 85 | 86 | body.open .menu { 87 | opacity: 1; 88 | visibility: visible; 89 | } 90 | 91 | .menu nav:hover a { 92 | opacity: 0.25; 93 | } 94 | 95 | .menu nav a:hover { 96 | opacity: 1; 97 | } 98 | 99 | .menu nav { 100 | display: flex; 101 | flex-direction: column; 102 | justify-content: center; 103 | align-items: center; 104 | } 105 | 106 | .menu a { 107 | position: relative; 108 | color: #f9f9f9; 109 | font-size: 32px; 110 | font-family: "Euclid Circular A"; 111 | padding: 20px 0; 112 | width: 300px; 113 | text-decoration: none; 114 | transition: 0.4s; 115 | } 116 | 117 | .menu a::after { 118 | content: ""; 119 | position: absolute; 120 | left: 0; 121 | bottom: 10px; 122 | width: 100%; 123 | height: 2px; 124 | border-radius: 2px; 125 | background: #f7f7f7; 126 | transform: scaleX(0); 127 | transform-origin: 0% 50%; 128 | transition: 0.4s; 129 | } 130 | 131 | .menu a:hover::after { 132 | transform: scaleX(1); 133 | } 134 | 135 | body.open .menu a { 136 | animation: appear 0.3s backwards; 137 | } 138 | 139 | @keyframes appear { 140 | 0% { 141 | opacity: 0; 142 | translate: 0 50px; 143 | } 144 | 100% { 145 | opacity: 1; 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /menu-2/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-2/bg.webp -------------------------------------------------------------------------------- /menu-2/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu 2 8 | 9 | 10 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 29 |
30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /menu-2/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-2/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: "Euclid Circular A", Poppins; 7 | color: #f9f9f9; 8 | background-image: url("bg.webp"); 9 | background-size: 400%; 10 | background-repeat: no-repeat; 11 | background-position: 0% 10%; 12 | } 13 | 14 | button { 15 | border: 0; 16 | padding: 0; 17 | background: transparent; 18 | cursor: pointer; 19 | } 20 | 21 | .burger, 22 | .menu { 23 | position: fixed; 24 | } 25 | 26 | .burger { 27 | z-index: 3; 28 | top: 0; 29 | left: 0; 30 | display: grid; 31 | place-items: center; 32 | width: 88px; 33 | height: 88px; 34 | background-image: url("menu.svg"); 35 | background-repeat: no-repeat; 36 | background-position: center; 37 | } 38 | 39 | body.open .burger { 40 | background-image: url("close.svg"); 41 | } 42 | 43 | .menu { 44 | z-index: 2; 45 | top: 0; 46 | left: 0; 47 | display: grid; 48 | place-items: center; 49 | width: 400px; 50 | height: 100%; 51 | background: #07030a; 52 | translate: -100% 0; 53 | transition: translate 0.375s cubic-bezier(0.175, 0.885, 0.32, 1); 54 | } 55 | 56 | .menu nav { 57 | opacity: 0; 58 | } 59 | 60 | @keyframes menu-in { 61 | 0% { 62 | clip-path: ellipse(60% 60% at 0% 50%); 63 | } 64 | 100% { 65 | clip-path: ellipse(120% 120% at 0% 50%); 66 | } 67 | } 68 | 69 | body.open .menu { 70 | opacity: 1; 71 | visibility: visible; 72 | translate: 0; 73 | animation: menu-in 0.375s; 74 | } 75 | 76 | body.open .menu nav { 77 | opacity: 1; 78 | } 79 | 80 | .menu nav:hover a { 81 | opacity: 0.25; 82 | } 83 | 84 | .menu nav a:hover { 85 | opacity: 1; 86 | } 87 | 88 | .menu nav { 89 | display: flex; 90 | flex-direction: column; 91 | justify-content: center; 92 | align-items: center; 93 | } 94 | 95 | .menu a { 96 | position: relative; 97 | color: #f9f9f9; 98 | font-size: 32px; 99 | font-family: "Euclid Circular A"; 100 | padding: 20px 0; 101 | width: 300px; 102 | text-decoration: none; 103 | transition: 0.4s; 104 | } 105 | 106 | .menu a::before, 107 | .menu a::after { 108 | content: ""; 109 | position: absolute; 110 | left: 0; 111 | bottom: 10px; 112 | width: 100%; 113 | height: 2px; 114 | border-radius: 2px; 115 | transition: 0.4s; 116 | } 117 | 118 | .menu a::before { 119 | opacity: 0; 120 | background: rgb(255 255 255 / 20%); 121 | } 122 | 123 | .menu a::after { 124 | transform: scaleX(0); 125 | transform-origin: 0% 50%; 126 | background: #f7f7f7; 127 | } 128 | 129 | .menu a:hover::before { 130 | opacity: 1; 131 | } 132 | 133 | .menu a:hover::after { 134 | transform: scaleX(1); 135 | } 136 | 137 | body.open .menu a { 138 | animation: appear 0.25s backwards; 139 | } 140 | 141 | @keyframes appear { 142 | 0% { 143 | opacity: 0; 144 | translate: -30px 0; 145 | } 146 | 100% { 147 | opacity: 1; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /menu-3/bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-3/bg.jpeg -------------------------------------------------------------------------------- /menu-3/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-3/bg.webp -------------------------------------------------------------------------------- /menu-3/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu 2 8 | 9 | 10 | 14 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 30 |
31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /menu-3/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-3/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: "Euclid Circular A", Poppins; 12 | color: #f9f9f9; 13 | background-image: url("bg.jpeg"); 14 | background-size: cover; 15 | background-repeat: no-repeat; 16 | background-position: 0% 0%; 17 | } 18 | 19 | button { 20 | border: 0; 21 | padding: 0; 22 | background: transparent; 23 | cursor: pointer; 24 | } 25 | 26 | .burger, 27 | .menu { 28 | position: fixed; 29 | } 30 | 31 | .burger { 32 | z-index: 4; 33 | top: 0; 34 | left: 0; 35 | display: grid; 36 | place-items: center; 37 | width: 88px; 38 | height: 88px; 39 | background-image: url("menu.svg"); 40 | background-repeat: no-repeat; 41 | background-position: center; 42 | } 43 | 44 | body.open .burger { 45 | background-image: url("close.svg"); 46 | } 47 | 48 | .background { 49 | position: fixed; 50 | z-index: 2; 51 | top: 44px; 52 | left: 44px; 53 | aspect-ratio: 1 / 1; 54 | translate: -50% -50%; 55 | height: 88px; 56 | background: #07030a; 57 | border-radius: 50%; 58 | opacity: 0; 59 | transition: 0.6s; 60 | } 61 | 62 | body.open .background { 63 | height: 300vh; 64 | opacity: 0.8; 65 | } 66 | 67 | .menu { 68 | z-index: 3; 69 | top: 0; 70 | left: 0; 71 | display: flex; 72 | align-items: center; 73 | height: 100%; 74 | width: 100%; 75 | opacity: 0; 76 | visibility: hidden; 77 | transition: 0.05s; 78 | } 79 | 80 | .menu nav { 81 | display: flex; 82 | flex-direction: column; 83 | justify-content: center; 84 | align-items: flex-start; 85 | padding-left: 100px; 86 | } 87 | 88 | body.open .menu { 89 | opacity: 1; 90 | visibility: visible; 91 | } 92 | 93 | body .menu nav:hover > a { 94 | opacity: 0.25; 95 | } 96 | 97 | body .menu nav > a:hover { 98 | opacity: 1; 99 | translate: 8px 0; 100 | } 101 | 102 | .menu a { 103 | position: relative; 104 | color: #f9f9f9; 105 | font-size: 32px; 106 | font-family: "Euclid Circular A"; 107 | padding: 20px 0 20px 20px; 108 | text-decoration: none; 109 | opacity: 0; 110 | cursor: pointer; 111 | transition: 0.4s; 112 | } 113 | 114 | .menu a::after { 115 | content: ""; 116 | position: absolute; 117 | top: 50%; 118 | right: -26px; 119 | translate: 0 -50%; 120 | margin-top: 2px; 121 | width: 10px; 122 | height: 10px; 123 | border-top: 3px solid #ffffff; 124 | border-right: 3px solid #ffffff; 125 | opacity: 0; 126 | rotate: 45deg; 127 | transition: 0.3s; 128 | } 129 | 130 | .menu a:hover::after { 131 | opacity: 1; 132 | } 133 | 134 | @keyframes appear { 135 | 0% { 136 | opacity: 0; 137 | translate: -30px 0; 138 | } 139 | 100% { 140 | opacity: 1; 141 | } 142 | } 143 | 144 | body.open .menu a { 145 | opacity: 1; 146 | animation: appear 0.35s backwards; 147 | } 148 | -------------------------------------------------------------------------------- /menu-4/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/1.png -------------------------------------------------------------------------------- /menu-4/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/10.png -------------------------------------------------------------------------------- /menu-4/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/11.png -------------------------------------------------------------------------------- /menu-4/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/2.png -------------------------------------------------------------------------------- /menu-4/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/3.png -------------------------------------------------------------------------------- /menu-4/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/4.png -------------------------------------------------------------------------------- /menu-4/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/5.png -------------------------------------------------------------------------------- /menu-4/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/6.png -------------------------------------------------------------------------------- /menu-4/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/7.png -------------------------------------------------------------------------------- /menu-4/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/8.png -------------------------------------------------------------------------------- /menu-4/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-4/9.png -------------------------------------------------------------------------------- /menu-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar 13 8 | 9 | 10 | 11 | 15 | 22 | 23 | 24 | 27 |
28 | 32 | 44 |
45 |
46 | 47 |
48 | Chris Hay, CTO at IBM iX 49 |

50 | It's fast, small, can run on browser, edge and cloud. It can handle 51 | large data. It can run in-memory like redis or disk like sqlite and 52 | it can run multi-cluster. It can sync between cloud and edge. And to 53 | top of it off, it can also run as a graphdb. It's interesting. 54 |

55 |
56 |
57 |
58 | 59 |
60 | Chris Hay, CTO at IBM iX 61 |

62 | It's fast, small, can run on browser, edge and cloud. It can handle 63 | large data. It can run in-memory like redis or disk like sqlite and 64 | it can run multi-cluster. It can sync between cloud and edge. And to 65 | top of it off, it can also run as a graphdb. It's interesting. 66 |

67 |
68 |
69 |
70 | 71 |
72 | Chris Hay, CTO at IBM iX 73 |

74 | It's fast, small, can run on browser, edge and cloud. It can handle 75 | large data. It can run in-memory like redis or disk like sqlite and 76 | it can run multi-cluster. It can sync between cloud and edge. And to 77 | top of it off, it can also run as a graphdb. It's interesting. 78 |

79 |
80 |
81 |
82 | 83 |
84 | Chris Hay, CTO at IBM iX 85 |

86 | It's fast, small, can run on browser, edge and cloud. It can handle 87 | large data. It can run in-memory like redis or disk like sqlite and 88 | it can run multi-cluster. It can sync between cloud and edge. And to 89 | top of it off, it can also run as a graphdb. It's interesting. 90 |

91 |
92 |
93 |
94 | 95 |
96 | Chris Hay, CTO at IBM iX 97 |

98 | It's fast, small, can run on browser, edge and cloud. It can handle 99 | large data. It can run in-memory like redis or disk like sqlite and 100 | it can run multi-cluster. It can sync between cloud and edge. And to 101 | top of it off, it can also run as a graphdb. It's interesting. 102 |

103 |
104 |
105 |
106 | 107 |
108 | Chris Hay, CTO at IBM iX 109 |

110 | It's fast, small, can run on browser, edge and cloud. It can handle 111 | large data. It can run in-memory like redis or disk like sqlite and 112 | it can run multi-cluster. It can sync between cloud and edge. And to 113 | top of it off, it can also run as a graphdb. It's interesting. 114 |

115 |
116 |
117 |
118 | 119 |
120 | Chris Hay, CTO at IBM iX 121 |

122 | It's fast, small, can run on browser, edge and cloud. It can handle 123 | large data. It can run in-memory like redis or disk like sqlite and 124 | it can run multi-cluster. It can sync between cloud and edge. And to 125 | top of it off, it can also run as a graphdb. It's interesting. 126 |

127 |
128 |
129 |
130 | 131 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /menu-4/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 | 26 | 28 | 30 | 32 | 34 | 38 | 39 | 40 | 41 | 42 | 43 | 50 | 51 | -------------------------------------------------------------------------------- /menu-4/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: rgb(27 32 44 / 100%); 4 | color: #f9f9f9; 5 | font-family: "Euclid Circular A", "Poppins"; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | nav { 13 | position: sticky; 14 | z-index: 1; 15 | top: 0; 16 | width: 100%; 17 | height: 88px; 18 | padding: 0 30px; 19 | display: flex; 20 | align-items: center; 21 | justify-content: space-between; 22 | background: rgb(27 32 44 / 70%); 23 | -webkit-backdrop-filter: blur(5px); 24 | -moz-backdrop-filter: blur(5px); 25 | -ms-backdrop-filter: blur(5px); 26 | backdrop-filter: blur(5px); 27 | backface-visibility: hidden; 28 | transform: translateZ(0px); 29 | transition: 0.3s; 30 | } 31 | 32 | nav img { 33 | height: 40px; 34 | } 35 | 36 | .burger { 37 | position: fixed; 38 | z-index: 3; 39 | top: 0; 40 | right: 0; 41 | display: grid; 42 | place-items: center; 43 | padding: 0; 44 | width: 82px; 45 | height: 82px; 46 | font-size: 30px; 47 | color: #f9f9f9; 48 | background: transparent; 49 | border: 0; 50 | cursor: pointer; 51 | } 52 | 53 | .burger i:last-child { 54 | display: none; 55 | } 56 | 57 | body.open .burger i:first-child { 58 | display: none; 59 | } 60 | 61 | body.open .burger i:last-child { 62 | display: block; 63 | } 64 | 65 | .overlay { 66 | position: fixed; 67 | z-index: 2; 68 | top: 0; 69 | left: 0; 70 | bottom: 0; 71 | right: 0; 72 | background: rgb(27 32 44 / 70%); 73 | visibility: hidden; 74 | opacity: 0; 75 | backdrop-filter: blur(6px); 76 | transition: 0.3s; 77 | } 78 | 79 | body.open .overlay { 80 | visibility: visible; 81 | opacity: 1; 82 | } 83 | 84 | main { 85 | padding: 10px 30px; 86 | } 87 | 88 | article { 89 | display: flex; 90 | gap: 16px; 91 | padding: 20px; 92 | max-width: 400px; 93 | margin: 0 auto 32px; 94 | border-radius: 16px; 95 | background-color: #272e3c; 96 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 97 | inset 0 1px 1px rgba(255, 255, 255, 0.1); 98 | } 99 | 100 | article img { 101 | height: 60px; 102 | } 103 | 104 | article name { 105 | color: rgb(255 255 255 / 50%); 106 | } 107 | 108 | article p { 109 | margin: 8px 0 10px; 110 | font-size: 14px; 111 | line-height: 1.6; 112 | } 113 | 114 | nav button { 115 | background: transparent; 116 | border: 0; 117 | cursor: pointer; 118 | } 119 | 120 | aside { 121 | position: fixed; 122 | z-index: 2; 123 | top: 0; 124 | right: 0; 125 | display: flex; 126 | flex-direction: column; 127 | width: 260px; 128 | height: 100%; 129 | padding: 18px 20px 20px; 130 | background: #272e3c; 131 | box-shadow: 0 0 20px rgb(0 0 0 / 70%); 132 | translate: 100% 0; 133 | transition: 0.3s; 134 | } 135 | 136 | body.open aside { 137 | translate: 0; 138 | } 139 | 140 | aside a { 141 | display: flex; 142 | align-items: center; 143 | height: 50px; 144 | } 145 | 146 | aside h3 { 147 | margin: 40px 0 10px; 148 | color: #989cad; 149 | font-weight: 400; 150 | font-size: 16px; 151 | } 152 | 153 | aside button { 154 | background: linear-gradient(-60deg, #8700ff, #ff009e); 155 | color: #f7f7f7; 156 | border: 0; 157 | height: 60px; 158 | border-radius: 30px; 159 | font-family: inherit; 160 | font-size: 16px; 161 | margin-top: 20px; 162 | } 163 | -------------------------------------------------------------------------------- /menu-5/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-menus/33c41bf98fa486ca5295675c713bba04598d863d/menu-5/bg.png -------------------------------------------------------------------------------- /menu-5/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu 5 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 | 31 |
32 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /menu-5/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /menu-5/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: grid; 4 | font-family: "Euclid Circular A"; 5 | height: 100vh; 6 | background: url("bg.png"); 7 | background-position: center; 8 | background-size: cover; 9 | background-repeat: no-repeat; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | color: #f9f9f9; 15 | } 16 | 17 | ul { 18 | list-style: none; 19 | padding: 0; 20 | margin: 0; 21 | display: grid; 22 | gap: 20px; 23 | } 24 | 25 | ul li { 26 | text-align: center; 27 | } 28 | 29 | label { 30 | height: 100vh; 31 | cursor: pointer; 32 | } 33 | 34 | input { 35 | position: absolute; 36 | scale: 0; 37 | } 38 | 39 | body.open .burger { 40 | background-image: url("close.svg"); 41 | } 42 | 43 | .burger { 44 | position: fixed; 45 | z-index: 2; 46 | display: grid; 47 | width: 80px; 48 | height: 80px; 49 | background: transparent; 50 | border: 0; 51 | cursor: pointer; 52 | background-image: url("menu.svg"); 53 | background-repeat: no-repeat; 54 | background-position: center; 55 | background-size: 30%; 56 | cursor: pointer; 57 | transition: 0.175s; 58 | } 59 | 60 | .menu { 61 | position: fixed; 62 | top: 0; 63 | left: 0; 64 | right: 0; 65 | bottom: 6px; 66 | display: grid; 67 | transition: 0.3s; 68 | } 69 | 70 | .menu > div { 71 | background: #030108; 72 | translate: -100% 0; 73 | transition: 0.2s ease-in-out; 74 | } 75 | 76 | body.open .menu > div { 77 | translate: 0; 78 | } 79 | 80 | @keyframes appear { 81 | 0% { 82 | opacity: 0; 83 | translate: 0 20px; 84 | } 85 | 100% { 86 | opacity: 1; 87 | translate: 0; 88 | } 89 | } 90 | 91 | .menu ul { 92 | position: absolute; 93 | top: 50%; 94 | left: 50%; 95 | translate: -50% -50%; 96 | opacity: 0; 97 | transition: 0.3s; 98 | } 99 | 100 | body.open .menu ul { 101 | opacity: 1; 102 | } 103 | 104 | body.open .menu ul li { 105 | animation: appear 0.4s both; 106 | } 107 | --------------------------------------------------------------------------------