CSS Articles - Page 66 of 130

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

To create a Menu Icon with CSS, the code is as follows −Example Live Demo div {    width: 40px;    height: 7px;    background-color: blue;    margin: 5px 2px; } > Sample Menu Icon OutputThis will produce the following output −

To create Icon Bar with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the . We will create a horizontal icon bar and a vertical bar. Set the CDN for the icons To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the element − Horizontal Icon Bar To create horizontal icon bar, set the width to 100% and the overflow property to auto − ... Read More

'.' selector'.' selector is a class level selector. The dot operator is used to create a style class which can then be applied on multiple html elements.'#' selector'#' selector is an element level selector. Hash operator is used to applying style on a particular element whose id is the same as used in '#' selectorExampleFollowing the example, shows usage of '.' as well as '#' selector on three div elements.    Selector Example>/title>           .blackBorder {          border: 2px solid black;       }       #redDiv {   ... Read More