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.
Using :after (or :before) pseudo-element: In this method, we will use pseudo-selector to set the CSS property to the anchor element.
- How to make the cursor to hand when a user hovers over a list item using CSS?
- How to make whole row in a table clickable as link in Bootstrap ?
- How to remove indentation from an unordered list item using CSS?
- How to create a clickable button in HTML ?
- How to create an HTML checkbox with a clickable label?
- Bootstrap 4 | Navigation Bar
- Bootstrap | Navigation Bar
- jQuery | Vertical Dot Navigation Plugin
- How to change navigation bar color in Bootstrap ?
- HTML Course | Creating Navigation Menu
- How to Create Navigation Links using HTML5 ?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- HTML & CSS | Tabindex attribute & Navigation bars
- How to place content under fixed flexbox navigation bar ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to enable routing and navigation between component pages in Angular 8 ?
- How to convert the hamburger icon of navigation menu to X on click ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.