How to make whole area of a list item in navigation bar is clickable using CSS ?
Last Updated :
11 May, 2020
When we create a navigation bar menu using list items then the whole area of the list is clickable. The whole area clickable makes navigation bar UI more user friendly.
On mobile phones or tablets, where touch gestures come into place, it’s sometimes hard to target little links with your finger. Mostly because it was primarily designed for desktop use. So in order to make the whole area of a list item in a navigation bar clickable as a link, here are some methods that are described below:
Using simple CSS properties: First, we will create unordered list items using HTML and then apply some CSS property to that items to make a navigation bar menu.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: lightgreen;
color: black;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</body>
</html>
|
Output:
Using :after (or :before) pseudo-element: In this method, we will use pseudo-selector to set the CSS property to the anchor element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav {
background-color: #187446;
margin: 0px;
overflow: hidden;
}
#nav ul {
list-style-type: none;
margin: 0px;
float: left;
}
#nav li {
display: inline;
float: left;
padding: 15px 10px;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
a {
position: relative;
}
#nav a:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
#nav li:hover {
background-color: lightgreen;
}
#nav a:hover {
color: black;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...