Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 502 of 652
How to create a vertical menu with CSS?
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. Syntax selector { display: block; width: value; padding: value; text-decoration: none; } Set a Container ...
Read MoreHow to create a horizontal scrollable menu with CSS?
A horizontal scrollable menu is useful when you have multiple navigation items that may not fit on smaller screens. The key is using overflow: auto and white-space: nowrap to prevent menu items from wrapping to new lines. Syntax .container { overflow: auto; white-space: nowrap; } .menu-item { display: inline-block; } Example The following example creates a horizontal scrollable navigation menu − Horizontal Scrollable Menu body { ...
Read MoreHow to create a Hoverable Sidenav with CSS?
A hoverable sidenav is a navigation menu that slides out from the side of the page when hovered. This creates an interactive navigation experience while saving screen space. Syntax selector { position: fixed; left: -width; transition: duration; } selector:hover { left: 0; } Example The following example creates a hoverable side navigation with multiple links that slide out on hover − Hoverable Sidenav nav a ...
Read MoreHow to create a responsive side navigation menu with CSS?
A responsive side navigation menu adapts its layout based on screen size. On larger screens, it appears as a fixed sidebar, while on smaller screens it transforms into a horizontal navigation bar. Syntax /* Fixed sidebar for desktop */ nav { position: fixed; width: fixed-width; height: 100%; } /* Responsive behavior */ @media screen and (max-width: breakpoint) { nav { position: relative; width: 100%; ...
Read MoreHow to create an animated, closable side navigation menu with CSS?
To create an animated, closable side navigation menu, we need to combine CSS transitions with JavaScript event handling. The menu slides in from the left when opened and smoothly slides out when closed using CSS width transitions. Syntax .sideNav { width: 0; transition: width 0.5s; position: fixed; } /* JavaScript to toggle width */ element.style.width = "300px"; /* Open */ element.style.width = "0"; /* Close */ Basic Structure The side navigation consists of three main components − ...
Read MoreHow to add a search box inside a responsive navigation menu?
To add a search box inside a responsive navigation menu, you need to combine navigation links with an input element and use CSS to style and position them appropriately. The search box should adapt to different screen sizes using media queries. Syntax nav { /* Navigation container styles */ } .links { /* Navigation link styles */ } input[type="text"] { /* Search box styles */ } @media screen and (max-width: breakpoint) { /* Responsive styles */ } ...
Read MoreHow to create a responsive navigation menu with icons, using CSS?
A responsive navigation menu with icons adapts to different screen sizes, providing an optimal user experience across devices. This menu displays horizontally on larger screens and stacks vertically on smaller devices. Syntax /* Basic responsive navigation structure */ nav { width: 100%; background-color: color; } .nav-link { display: inline-block; padding: value; text-decoration: none; } @media screen and (max-width: breakpoint) { .nav-link { display: ...
Read MoreHow to create custom checkboxes and radio buttons with CSS?
The default checkboxes and radio buttons can be easily customized with CSS to match your website's design. You can modify their appearance, colors, and behavior for different states like selected, hovered, and focused. Syntax /* Hide default input */ input[type="checkbox"], input[type="radio"] { appearance: none; } /* Create custom styling */ .custom-input { /* Custom styles here */ } Custom Checkbox To create a custom checkbox, we hide the default input and create a custom visual using CSS pseudo-elements. Example: Custom Checkbox ...
Read MoreHow to create a Menu Icon with CSS?
A menu icon, commonly known as a "hamburger menu, " consists of three horizontal lines stacked vertically. This icon is widely used in responsive web design to represent a navigation menu that can be toggled on mobile devices. Syntax .menu-icon { width: value; height: value; background-color: color; margin: value; } Example: Basic Menu Icon The following example creates a simple menu icon using three div elements − ...
Read MoreHow to create Icon Bar with CSS?
To create Icon Bar with CSS, you need to set the icons using Font Awesome or similar icon libraries. An icon bar provides easy navigation with visual icons. Here, we will create both horizontal and vertical icon bars using Font Awesome icons. Syntax .icon-bar { width: value; background-color: color; overflow: auto; /* for horizontal */ } .icon-bar a { display: block; /* for vertical */ float: left; /* for horizontal */ text-align: ...
Read More