This article will show you how to create a Curtain menu navbar effect with the help of HTML and CSS. The curtain menu means revealing or pulling down the menu items like a curtain.
HTML is used to create the structure of the curtain menu and applies styles on that element to make like curtain menu effect. Also, we will add a close button to the corner.
Example 1: Here, we create a pull-down curtain menu.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Create a Curtain Menu with HTML and CSS
</title>
<style>
.curtain-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: #4b8b01;
overflow: hidden;
transition: 0.5s;
}
.curtain-menu a {
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 18px;
}
.curtain-menu a:hover {
background-color: #2a93d5;
}
.menu-button {
font-size: 24px;
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
z-index: 1;
color: white;
background-color: #4b8b01;
border: none;
padding: 10px;
border-radius: 5px;
}
.menu-button:hover {
background-color: #2a93d5;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
color: white;
background-color: #4b8b01;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.close-button:hover {
background-color: #2a93d5;
}
.menu-open {
height: 100vh;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<button class="menu-button" onclick="toggleCurtain()">
☰ Menu
</button>
<div class="curtain-menu" id="curtainMenu">
<button class="close-button" onclick="toggleCurtain()">
✖ Close
</button>
<a href="#" onclick="toggleCurtain()">Home</a>
<a href="#" onclick="toggleCurtain()">About</a>
<a href="#" onclick="toggleCurtain()">Users</a>
<a href="#" onclick="toggleCurtain()">Contact</a>
</div>
<h1>Welcome to GeeksforGeeks</h1>
<script>
function toggleCurtain() {
var curtainMenu = document.getElementById("curtainMenu");
curtainMenu.classList.toggle("menu-open");
}
</script>
</body>
</html>
|
Output:
Example 2: Here, we create a Horizontal Curtain Menu.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Horizontal Curtain Menu</title>
<style>
.curtain-menu {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #4b8b01;
overflow: hidden;
transition: 0.5s;
}
.curtain-menu a {
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 18px;
}
.curtain-menu a:hover {
background-color: #2a93d5;
}
.menu-button {
font-size: 24px;
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
z-index: 1;
color: white;
background-color: #4b8b01;
border: none;
padding: 10px;
border-radius: 5px;
}
.menu-button:hover {
background-color: #2a93d5;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
color: white;
background-color: #4b8b01;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.close-button:hover {
background-color: #2a93d5;
}
.menu-open {
width: 100%;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<button class="menu-button" onclick="toggleCurtain()">
☰ Menu
</button>
<div class="curtain-menu" id="curtainMenu">
<button class="close-button" onclick="toggleCurtain()">
✖ Close
</button>
<a href="#" onclick="toggleCurtain()">
Home
</a>
<a href="#" onclick="toggleCurtain()">
About
</a>
<a href="#" onclick="toggleCurtain()">
Users
</a>
<a href="#" onclick="toggleCurtain()">
Contact
</a>
</div>
<h1>Welcome to GeeksforGeeks</h1>
<script>
function toggleCurtain() {
var curtainMenu =
document.getElementById("curtainMenu");
curtainMenu.classList.toggle("menu-open");
}
</script>
</body>
</html>
|
Output: