├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Navigation-Bar 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/42389395/171057492-edd5f557-aec3-49b7-b0d5-b20943ac616a.mov 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 18 |
19 |
20 |
21 | Fullscreen Overlay Navigation Bar
22 |

23 | with HTML & CSS Neon Effect

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Lato', sans-serif; 6 | font-family: 'Oswald', sans-serif; 7 | } 8 | .wrapper{ 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | height: 100%; 13 | width: 100%; 14 | background: #000; 15 | clip-path: circle(25px at calc(100% - 45px) 45px); 16 | transition: all 0.3s ease-in-out; 17 | } 18 | #active:checked ~ .wrapper{ 19 | clip-path: circle(75%); 20 | } 21 | .menu-btn{ 22 | position: absolute; 23 | z-index: 2; 24 | right: 20px; 25 | /* left: 20px; */ 26 | top: 20px; 27 | height: 50px; 28 | width: 50px; 29 | text-align: center; 30 | line-height: 50px; 31 | border-radius: 50%; 32 | font-size: 20px; 33 | color: #fff; 34 | cursor: pointer; 35 | background: #000; 36 | transition: all 0.3s ease-in-out; 37 | } 38 | #active:checked ~ .menu-btn{ 39 | color: #fff; 40 | } 41 | #active:checked ~ .menu-btn i:before{ 42 | content: "\f00d"; 43 | } 44 | .wrapper ul{ 45 | position: absolute; 46 | top: 50%; 47 | left: 50%; 48 | transform: translate(-50%, -50%); 49 | list-style: none; 50 | text-align: center; 51 | } 52 | .wrapper ul li{ 53 | margin: 15px 0; 54 | } 55 | .wrapper ul li a{ 56 | color: none; 57 | text-decoration: none; 58 | font-size: 30px; 59 | font-weight: 500; 60 | padding: 5px 30px; 61 | color: #fff; 62 | border-radius: 50px; 63 | background: #000; 64 | position: relative; 65 | line-height: 50px; 66 | transition: all 0.3s ease; 67 | } 68 | .wrapper ul li a:after{ 69 | position: absolute; 70 | content: ""; 71 | background: #fff; 72 | background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); 73 | /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/ 74 | width: 104%; 75 | height: 110%; 76 | left: -2%; 77 | top: -5%; 78 | border-radius: 50px; 79 | transform: scaleY(0); 80 | z-index: -1; 81 | animation: rotate 1.5s linear infinite; 82 | transition: transform 0.3s ease; 83 | } 84 | .wrapper ul li a:hover:after{ 85 | transform: scaleY(1); 86 | } 87 | .wrapper ul li a:hover{ 88 | color: #fff; 89 | } 90 | input[type="checkbox"]{ 91 | display: none; 92 | } 93 | .content{ 94 | position: absolute; 95 | top: 50%; 96 | left: 50%; 97 | transform: translate(-50%, -50%); 98 | z-index: -1; 99 | text-align: center; 100 | width: 100%; 101 | color: #202020; 102 | } 103 | .content .title{ 104 | font-size: 40px; 105 | font-weight: 700; 106 | } 107 | .content p{ 108 | font-size: 35px; 109 | font-weight: 600; 110 | } 111 | 112 | @keyframes rotate { 113 | 0%{ 114 | filter: hue-rotate(0deg); 115 | } 116 | 100%{ 117 | filter: hue-rotate(360deg); 118 | } 119 | } 120 | --------------------------------------------------------------------------------