How To Make area of List Item In Navigation Bar Is Clickable Using Css

admin_img Posted By Bajarangi soft , Posted On 08-10-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.

Navigation Bar html and css

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.
Example1:

<!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> 


 

Using :after (or :before) pseudo-element: In this method, we will use pseudo-selector to set the CSS property to the anchor element.
Example2:
<!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: #f32821;
            margin: 0px;
            overflow: hidden;
        }a

        #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: #e8dbdb;
        }

        #nav a:hover {
            color: #f30b0b;
        }
    </style>
</head>

<body>
<div id="nav">
    <ul>
        <li class="active"><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>

 

Related Post