We can do so much with websites that were too hard just a few years ago. Thanks to CSS3 Transforms, we can create some extremely cool effects.
Today I’d like to demonstrate how to make a vertical menu css3, which is a menu that has been rotated -90 degrees so that the text appears vertical rather than horizontal.
Vertical Menu CSS3: What is a menu on a website?
The menu bar, often known as the navigation bar, is the most useful feature of any website. It is used to go from one location to another.
The menu or navigation bar is usually located at the top and bottom of the website, although it can also be seen on the side of the page.
How do I create a Vertical Menu CSS3?
The Vertical Menu CSS3 displays a list of pages in vertical order along the side of a web page. Vertical menus make navigation easier. We may style the vertical menu using different CSS properties.
Creating Vertical Menu
- To add a list of options in the vertical menu, use the HTML
- element and include it within the tag.
- Now we can utilize CSS properties to customize the vertical menu.
- To set the backdrop color for the vertical menu, use the background color property.
- To remove bullets from the list, set the list-style type to none.
- Add padding and margin to provide space between menu elements.
- Adjust the width and height of the vertical menu.
- Use: hover class to change the menu on hover.
Example: Creating a vertical menu using CSS properties
In this example, the vertical list was constructed using an Unordered list and customized with CSS attributes.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>HTML</title>
<style>
.menu {
width: 200px;
list-style-type: none; /* removing bullerts from list */
}
/* Styling the links */
.menu a {
background-color: #dddddd;
display: block;
color: blue;
padding: 12px;
text-decoration: none;
font-size : 20px;
}
.menu a:hover {
background-color: #565656;
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h2> The vertical menu </h2>
<ul class=”menu”>
<li><a href=”link” class=”active”>Home</a></link>
<li><a href=”link”>Menu</a></link>
<li><a href=”link”>study</a></link>
<li><a href=”link”>contact</a></link>
</ul>
</body>
</html>
Copy
Output
Here is the result of the above sample code.
Example: Adding vertical scrolls to the vertical menu
In this example, we’ll create a vertical menu with the
element and add a list with the tag. Use the display:block property to arrange each item vertically. Also, add height and overflow properties for vertical scrolling.
Create a vertical and horizontal menu with pure CSS.
A menu is a vital component of any website. It is a user interface element on a webpage that includes links to other parts of the site. It might appear horizontally or vertically before the main content of the homepage or header.
For creating a vertical menu:
Menus are vertical by default in Pure CSS. It is simple to alter because of its modest default styling and low-specificity selectors.
All menu components should be enclosed in a division with the class “pure-menu”.
Include the class “pure-menu-heading” in the element for the primary heading or title.
Then, add all the items following the heading inside the
- element with the class “pure-menu-list”. Each item should be surrounded by a
- element with the class “pure-menu-item”.
- To link an item to a portion of your webpage, use the element with the class “pure-menu-link.”.
Conclusion
In this article, we learned how to design a vertical menu with CSS. We have used a variety of attributes to customize the vertical menu. We may also add a vertical scrollbar to the menu.