Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a Vertical and Horizontal menu using Pure CSS
The menu is a crucial component of any website. It helps visitors find your quality material and directs them to the key portions of your website. Of course, CSS is the best language for creating stunning navigation menus. It is incredibly adaptable and can be used for any kind of website. It can be shown either horizontally or vertically before the primary content of the webpage or header.
The task we are going to perform in this article is to design a vertical and horizontal menu using Pure CSS. That can be done by using the <div> and <span> tags.
Using <div> tag
The division tag is also known as the <div> tag. In HTML, the <div> tag is used to create sections for content such as text, graphics, headers, footers, and navigation bars. The <div> tag has an opening (<div>) and closing (</div>) tag, and the closing tag is required. This tag is the most useful in web development because it allows us to divide out the data on a web page and create specific sections for different types of information or functions.
Syntax
Following is the syntax for <div> tag.
<div>… </div>
Using <span> tag
The HTML element <span> serves as a general inline container for material that does not automatically denote anything. It can be used to group elements because they have similar attribute values, or because they need to be styled together (using the class or id attributes). When there is no alternative suitable semantic element, it should only be utilized. The <div> element is quite similar to the <span>, but the <div> is a block-level element and the <span> is an inline element.
Syntax
Following is the syntax for <span> tag.
<span class="">Some Text</span>
Now, let's look into the following example for the creation of the vertical and horizontal menu using CSS.
Example
In the following example, we are going to create the vertical menu.
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3;">
<div class="pure-menu">
<span class="pure-menu-heading"> TUTORIALSPOINT </span>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/index.htm" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/codingground.htm" class="pure-menu-link">CodingGround</a>
</li>
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/online_dev_tools.htm" class="pure-menu-link">Tools</a>
</li>
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/about/about_careers.htm" class="pure-menu-link">Contact Us</a>
</li>
</ul>
</div>
</body>
</html>
On running the above code, it will generate an output consisting of the vertical menu, which is the default menu displayed on the webpage with the applied CSS.
Example
Following is the example, where we are going to create the horizontal menu on our webpage.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<style>
.pure-menu-horizontal{
width: 500px;
height: 200px;
}
</style>
</head>
<body style="background-color:#E8DAEF;">
<div class="pure-menu pure-menu-horizontal">
<span class="pure-menu-heading">TUTORIALSPOINT</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/index.htm" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/codingground.htm" class="pure-menu-link">Coding Ground</a>
</li>
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/online_dev_tools.htm" class="pure-menu-link">Tools</a>
</li>
<li class="pure-menu-item">
<a href="https://www.tutorialspoint.com/online_dev_tools.htm" class="pure-menu-link">Contact Us </a>
</li>
</ul>
</div>
</body>
</html>
When the above code gets executed, it will generate an output consisting of the horizontal menu applied with the CSS displayed on the webpage.
113 Views
