├── .DS_Store
├── .gitattributes
├── admin
├── .DS_Store
└── base.png
├── img
├── menu1.jpg
├── menu2.jpg
├── menu3.jpg
├── menu4.jpg
└── arrow.svg
├── README.md
├── js
└── js.js
├── index.html
└── style
├── style.css
└── normalize.css
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/.DS_Store
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.md linguist-language=js
2 | *.html linguist-language=js
3 | *.css linguist-language=css
--------------------------------------------------------------------------------
/admin/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/admin/.DS_Store
--------------------------------------------------------------------------------
/admin/base.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/admin/base.png
--------------------------------------------------------------------------------
/img/menu1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/img/menu1.jpg
--------------------------------------------------------------------------------
/img/menu2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/img/menu2.jpg
--------------------------------------------------------------------------------
/img/menu3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/img/menu3.jpg
--------------------------------------------------------------------------------
/img/menu4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crimson-projects/hover-menu-with-html/HEAD/img/menu4.jpg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Hover Menu with HTML,CSS & JQUERY | Crimson
4 |
5 |
6 |
7 | ### by
SUBUX
8 |
9 |
21 |
22 |
28 |
29 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
1 | /* 1.1.general-setting-pages *************************/
2 | /****************************************************/
3 | :root {
4 | --pr-color: #fff;
5 | --second-color: #0a0a0a;
6 | --cubicbz: cubic-bezier(.9, 0, .1, 1);
7 | }
8 |
9 | * {
10 | box-sizing: border-box;
11 | font-family: 'Syne', sans-serif;
12 | font-weight: 800;
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | body {
18 | background: var(--second-color);
19 | }
20 |
21 | /******************************************/
22 | .wrapp {
23 | position: relative;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | width: 100%;
28 | height: 100vh;
29 | overflow: hidden;
30 | z-index: 1;
31 | }
32 |
33 | /* hover menu with pictures **********************************/
34 | .menu-img {
35 | position: absolute;
36 | width: 100%;
37 | height: 100%;
38 | top: 0;
39 | left: 0;
40 | opacity: .4;
41 | filter: blur(6px);
42 | overflow: hidden;
43 | transform: scale(1.1);
44 | }
45 |
46 | .menu-img img {
47 | position: absolute;
48 | width: 100%;
49 | height: 100%;
50 | object-fit: cover;
51 | top: 0;
52 | left: 0;
53 | transition: .8s var(--cubicbz);
54 | transform: scale(1.2);
55 | clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
56 | }
57 |
58 | .menu-img img.active {
59 | transform: scale(1);
60 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
61 | }
62 |
63 | .menu__item {
64 | position: relative;
65 | list-style: none;
66 | }
67 |
68 | .menu__item+.menu__item {
69 | margin-top: 60px;
70 | }
71 |
72 | .menu__item::before {
73 | position: absolute;
74 | content: '';
75 | width: 60px;
76 | height: 60px;
77 | top: 50%;
78 | left: 0;
79 | transform: translate(-80px, -50%) rotate(225deg);
80 | opacity: 0;
81 | background: url(../img/arrow.svg);
82 | background-size: cover;
83 | background-repeat: no-repeat;
84 | background-position: center center;
85 | will-change: transform;
86 | transition: .8s var(--cubicbz);
87 | }
88 |
89 | .menu__link {
90 | position: relative;
91 | display: block;
92 | text-transform: uppercase;
93 | font-size: 75px;
94 | line-height: .8;
95 | text-decoration: none;
96 | color: transparent;
97 | -webkit-text-stroke: 1px var(--pr-color);
98 | z-index: 2;
99 | transition: .8s var(--cubicbz);
100 | }
101 |
102 | .menu__item:hover .menu__link {
103 | transform: translateX(80px);
104 | color: var(--pr-color);
105 | -webkit-text-stroke: 1px transparent;
106 | }
107 |
108 | .menu__item:hover::before {
109 | opacity: 1;
110 | transform: translate(0%, -50%) rotate(180deg);
111 | }
--------------------------------------------------------------------------------
/style/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
--------------------------------------------------------------------------------
24 | 
25 | 
26 | 
27 |