To create underlined navigation links, use the border-bottom property in CSS. The border-bottom is a shorthand for the width, style, and color of the bottom border. These links will be displayed underlined on hover as well using the :hover selector. With that, the selected link will also get underlined. Let us see how to create bottom bordered i.e., underlined navigation links on a web page with HTML and CSS. Create the navigation links Use the element to create the navigation links on a web page − Home Login ... Read More

To create a bottom navigation menu, set the nav element with the bottom and position properties. The position property is set to fixed and the bottom is set to 0px. The bottom navigation menu looks like the following on a web page. The menu is placed is fixed in the bottom as shown below − Create a Navigation Menu First, set the navigation menu with some menus − Home Login Register Contact Us More Info Style ... Read More

Vertical menus on a web page are mainly placed on the left or the right. These left or right menus are vertically aligned to make it easier for users to navigate or click them. To create a vertical menu, set a container and within that set the menu links. The display property is to be set as block to let the menu appear vertically. Let us see how to create a vertical menu with HTML and CSS. Set a container for the menu A div is set for the menu. The menu links are added using the element with ... Read More

Following is the code to produce a horizontal scrollable menu with CSS −Example Live Demo Document body{    margin:0px;    margin-top:10px;    padding: 0px; } nav{    width: 100%;    background-color: rgb(39, 39, 39);    overflow: auto;    height: auto;    white-space: nowrap; } .links {    display: inline-block;    text-align: center;    padding: 14px;    color: rgb(178, 137, 253);    text-decoration: none;    font-size: 17px; } .links:hover {    background-color: rgb(100, 100, 100); } .selected{    background-color: rgb(0, 18, 43); } Home Login Register Contact Us More Info Our Social Links Visit Us OutputThe above code will produce the following output −On resizing the browser window horizontal scrolling will be seen −

Following is the code to create hoverable side navigation buttons with CSS.Example Live Demo Document nav a {    position: fixed;    left: -120px;    transition: 0.3s;    padding: 10px;    width: 140px;    text-decoration: none;    font-size: 20px;    color: black;    font-weight: bolder;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav a:hover {    left: 0; } #Info{    top: 20px;    background-color: #6de2f7; } #Social{    top: 80px;    background-color: #71fc71; } #Address {    top: 140px;    background-color: #c4f553; } #Home {    top: 200px;    background-color: rgb(225, 115, 240); ... Read More

Following is the code to create a responsive side navigation menu with CSS −Example Live Demo body {    margin: 0;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav {    margin: 0;    padding: 0;    width: 150px;    background-color: #2f77e4;    position: fixed;    height: 100%;    overflow: auto; } nav a {    display: block;    color: rgb(255, 255, 255);    font-weight: bolder;    font-size: 20px;    padding: 16px;    text-decoration: none; } nav a.selected {    background-color: rgb(15, 189, 20);    color: rgb(255, 255, 255); } nav a:hover:not(.selected) {    background-color: ... Read More

To create an animated, closable side navigation menu, provide a mechanism to close and open it on the click on a button. The menu is opened with a button and closed with x. The event listened is used for the same and the functions are called to set the width of the navigation menu. Let’s say the following is a button on a web page − On clicking the above button, the side navigation opens − Create a Button to Open the Menu First, set a button that will open the navigation menu − Click here to ... Read More

To add a search box, use the input type text on a web page. Set the search box inside the navigation menu. Let us first set how to create a responsive navigation menu and place the search box. Set the Navigation Menu and Search box in it To begin with, use the to create a navigation menu. The links are set using the element. Set input type="text" for the search box. This adds the search box inside the navigation menu − Home ... Read More

Following is the code for creating the responsive navigation menu with icons.Example Live Demo Document body{    margin:0px;    margin-top:10px;    padding: 0px; } nav{    width: 100%;    background-color: rgb(39, 39, 39);    overflow: auto;    height: auto; } .links {    display: inline-block;    text-align: center;    padding: 14px;    color: rgb(178, 137, 253);    text-decoration: none;    font-size: 17px; } .links:hover {    background-color: rgb(100, 100, 100); } .selected{    background-color: rgb(0, 18, 43); } @media screen and (max-width: 600px) {    .links {       display: block;    } }     Home     Login     Register     Contact Us     More Info OutputThe above code will produce the following output −When the screen will be resized to 600px −

The design of the default checkboxes and radio buttons can be easily changed with CSS. The initial, selected and hovered properties can also be set for the checkboxes and radio buttons. Custom checkbox The following is the code to create a custom checkbox. First, set the containers for the checkboxes. A div container for each checkbox. The checkbox is created using the input type checkbox − Rice Flour Above, the 1st checkbox is by default checked using the checked attribute ... Read More