Web Development Articles - Page 543 of 1049

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

In this, article we are going to create off canvas menu using CSS and JavaScript. Off−canvas menu lets you display your content as a sidebar when a button is activated. This helps you to display a certain aspect of your site in the side navigation panel thus giving a user−friendly familiarity to your guests. An off−canvas menu can also be accessed by sliding left−to−right or right−to−left (if you are using a touchscreen device) depending on the design of your website. This is usually used in cases where a website has a lot of links that don’t fit in the top ... Read More

In this article, we are going to discuss how to create a full−screen overlay navigation menu with CSS and JavaScript. Overlay in Web applications is nothing but transposing one HTML element over other. We can overlay images, pages, text, etc. There are three ways to create a full−screen overlay navigation bar which are listed below. From the left side, From the top side, and No animation. There is no Direct way to create an overlay; you can overlay two HTML elements using the technologies specified above. Steps to create a full-screen overlay navigation menu Following are the steps ... 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

Following is the code to create a responsive navigation menu with a login form inside of it −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); } form {    float: right;    margin-top: 8px; } form input{    display: inline-block;   ... Read More