Table of Contents
CSS Vertical Navigation Bar
Vertical Navigation Menu Creation Step 1
Example
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>Note: We use href="#" for test links.</b></p>
</body>
</html>Vertical Navigation Menu Creation Step 2
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 20;
padding: 25;
}
</style>
</head>
<body>
<p>In This menu remove bullets menu nevigaation bar</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Vertical Navigation Menu Creation Step 3
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 100px;
background-color:#b8d6c7;
}
</style>
</head>
<body>
<p>Insert the background color in menu</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Vertical Navigation Menu Creation Step 4
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 10px 18px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #194730;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>Insert the background color in menu with Change the link color on hover. </p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Vertical Navigation Menu Creation Step 5
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color: #c7f2dc;
}
li a {
display: block;
color: #000;
padding: 10px 18px;
text-decoration: none;
}
li a.active {
background-color: red;
color: white;
}
li a:hover:not(.active) {
background-color: #194730;
color: white;
}
</style>
</head>
<h2>Vertical Navigation Bar</h2>
<p>Create the active link with background color in menu also Change the link color on hover. </p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Vertical Navigation Menu Creation Step 6
Example
<!DOCTYPE html>
<html>
<head>
<style>
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #c7f2dc;
border: 2px solid #555;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a:hover:not(.active) {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h2>Example of Vertical Navigation Bar</h2>
<p>In this example,add the links and add a border to the menu.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Vertical Navigation Menu Creation Step 7
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 30;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 30%;
background-color: #bed1c7;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: red;
color: white;
}
li a:hover:not(.active) {
background-color: #058728;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#Course">Course</a></li>
<li><a href="#Help">Help</a></li>
<li><a href="#about">About</a></li>
<li><a href="#branch">Branch 1</a></li>
</ul>
<div style="margin-left:30%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see the results</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
<p>Write the Some text..</p>
</div>
</body>
</html>