The Navbar is the main component of any website through which the user can navigate through all the components and sections of a site. That’s why it is really important to have a well-designed navigation bar or menu. So today we will be looking at a navbar in which all the elements get blur except the hovered-element.
Approach: The approach is to use blur() function and hover selector to blur all the elements except the hovered one.
HTML Code: Here, we have created a simple unordered list with 3 list-items.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blurred Menu Design</title>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</body>
</html>
|
CSS Code: For CSS, follow these steps.
- First we have applied some background and align over unordered list in the form of a navbar using flexbox.
- Then we have used hover on ul with blur of 2 px which makes every list-item blur when we hover on ul.
- Now we have used hover on li with blur set as 0 to unblur the hovered list-item.
Now, for those who don’t get the concept of it try to visualize two boxes. The smaller one representing li which is wrapped inside the bigger box which is representing ul. Now our first hover selection on ul makes the whole of the li blur as we haven’t till enter the smaller box boundary and as we enter the boundary of the smaller box we activate the hover selection of li which makes the hovered list-item unblurred.
body{ background: green;
font-family:Arial, Helvetica, sans-serif;
}
ul{ position: absolute;
top:40%;
left:40%;
display: flex;
}ul li{ list-style: none;
position: relative;
display: block;
margin: 10px;
}ul:hover li{ opacity: .2;
filter: blur(2px);
}ul li:hover{ opacity: 1;
filter:blur(0px);
} |
Complete Code: It is the combination of the above two codes.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blurred Menu Design</title>
<style>
body{
background: green;
font-family:Arial, Helvetica, sans-serif;
}
ul{ position: absolute;
top:40%;
left:40%;
display: flex;
}ul li{ list-style: none;
position: relative;
display: block;
margin: 10px;
}ul:hover li{ opacity: .2;
filter: blur(2px);
}ul li:hover{ opacity: 1;
filter:blur(0px);
}</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</body>
</html>
|
Output: