Fullscreen Overlay Navigation Menu using HTML & CSS

Solution: Fullscreen Overlay Navigation Bar using HTML & CSS with source code, demo, and also how you can execute the full program easily. To complete the program you need to follow those steps given bellow

Live Demo

Also Helpful –

Responsive Header Navigation Menu

Responsive Footer Design

Animated Navigation Menu

Fullscreen Overlay Navigation Bar using HTML & CSS

Description

Back to coding, To complete this program with debugging free code you have to create two files. The first file is to HTML and the second file gonna be CSS for the style part,

index.html

Create an HTML file named ‘index.html‘ and put those codes given below.

<!-- Coding Debugging (https://codingdebugging.com) -->
<!DOCTYPE html>
<html>
  <head>
    <title>Fullscreen Overlay Navigation Bar - Coding Debugging</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&display=swap">
    <!-- Font Awesome Icon -->
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <!-- My Stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <input type="checkbox" id="active">
    <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
    <div class="wrapper">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="title">
      Fullscreen Overlay Navigation Bar</div>
      <p>
      using HTML & CSS</p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Fullscreen Overlay Navigation Bar - Coding Debugging</title>

</head>

<body>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Feedback</a></li>

</ul>

</div>

Fullscreen Overlay Navigation Bar</div>

<p>

using HTML & CSS</p>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put those codes given below.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    clip-path: circle(25px at calc(0% + 45px) 45px);
    background: darkcyan;
    clip-path: circle(25px at calc(100% - 45px) 45px);
    transition: all 0.3s ease-in-out;
}

#active:checked~.wrapper {
    clip-path: circle(75%);
}

.menu-btn {
    position: absolute;
    z-index: 2;
    right: 20px;
    /* left: 20px; */
    top: 20px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background:darkcyan;
    transition: all 0.3s ease-in-out;
}

#active:checked~.menu-btn {
    color: #fff;
}

#active:checked~.menu-btn i:before {
    content: "\f00d";
}

.wrapper ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
}

.wrapper ul li {
    margin: 15px 0;
}

.wrapper ul li a {
    color: none;
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    padding: 5px 30px;
    color: #fff;
    border-radius: 50px;
    background: darkcyan;
    position: relative;
    line-height: 50px;
    transition: all 0.3s ease;
}

.wrapper ul li a:after {
    position: absolute;
    content: "";
    background: #fff;
    width: 104%;
    height: 110%;
    left: -2%;
    top: -5%;
    border-radius: 50px;
    transform: scaleY(0);
    z-index: -1;
    animation: rotate 1.5s linear infinite;
    transition: transform 0.3s ease;
}

.wrapper ul li a:hover:after {
    transform: scaleY(1);
}

.wrapper ul li a:hover {
    color: #fff;
}

input[type="checkbox"] {
    display: none;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    text-align: center;
    width: 100%;
    color: darkcyan;
}

.content .title {
    font-size: 40px;
    font-weight: 700;
}

.content p {
    font-size: 35px;
    font-weight: 600;
}

@keyframes rotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

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

125

126

127

128

129

130

131

132

133

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Lato', sans-serif;

}

.wrapper {

position: fixed;

top: 0;

left: 0;

height: 100%;

width: 100%;

clip-path: circle(25px at calc(0% + 45px) 45px);

background: darkcyan;

clip-path: circle(25px at calc(100% - 45px) 45px);

transition: all 0.3s ease-in-out;

}

#active:checked~.wrapper {

clip-path: circle(75%);

}

.menu-btn {

position: absolute;

z-index: 2;

right: 20px;

/* left: 20px; */

top: 20px;

height: 50px;

width: 50px;

text-align: center;

line-height: 50px;

border-radius: 50%;

font-size: 20px;

color: #fff;

cursor: pointer;

background:darkcyan;

transition: all 0.3s ease-in-out;

}

#active:checked~.menu-btn {

color: #fff;

}

#active:checked~.menu-btn i:before {

content: "\f00d";

}

.wrapper ul {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

list-style: none;

text-align: center;

}

.wrapper ul li {

margin: 15px 0;

}

.wrapper ul li a {

color: none;

text-decoration: none;

font-size: 30px;

font-weight: 500;

padding: 5px 30px;

color: #fff;

border-radius: 50px;

background: darkcyan;

position: relative;

line-height: 50px;

transition: all 0.3s ease;

}

.wrapper ul li a:after {

position: absolute;

content: "";

background: #fff;

width: 104%;

height: 110%;

left: -2%;

top: -5%;

border-radius: 50px;

transform: scaleY(0);

z-index: -1;

animation: rotate 1.5s linear infinite;

transition: transform 0.3s ease;

}

.wrapper ul li a:hover:after {

transform: scaleY(1);

}

.wrapper ul li a:hover {

color: #fff;

}

input[type="checkbox"] {

display: none;

}

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: -1;

text-align: center;

width: 100%;

color: darkcyan;

}

.content .title {

font-size: 40px;

font-weight: 700;

}

.content p {

font-size: 35px;

font-weight: 600;

}

@keyframes rotate {

0% {

filter: hue-rotate(0deg);

}

100% {

filter: hue-rotate(360deg);

}

Thank you for visiting!

We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.

Keep coding, Keep debugging!

Live Demo Download Code

Fullscreen Overlay Navigation Menu using HTML & CSS

Live Demo

Also Helpful –

Fullscreen Overlay Navigation Bar using HTML & CSS

Like this:

Related

Leave a Comment Cancel Reply

Live Demo

Also Helpful –

Fullscreen Overlay Navigation Bar using HTML & CSS

Share this:

Like this:

Related

Leave a Comment Cancel Reply