Fixed Vertical Navigation Bar:-
In fixed Vertical Nave Bar, the nav bar will be fixed in the same position even if the content of the page is scrolled down.
EXAMPLE:-
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 26%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: steelblue;
color: white;
}
li a:hover:not(.active) {
background-color: turquoise;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">
Home</a></li>
<li><a href="#news">News</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
<div style="margin-left:26%;
padding:2px 16px;height:1000px;">
<h2>Fixed Side Nav Bar</h2>
<h3>Try to scroll this area, and
see how the sidenav sticks
to the page</h3>
<p>Notice that this div element
has a left margin of 26%. This
is because the side navigation
is set to 26% width. If you
remove the margin, the sidenav
will overlay/sit on top of
this div.</p>
<p>Also notice that we have set
overflow:auto to sidenav. This
will add a scrollbar when the
sidenav is too long (for
example if it has over 50 links
inside of it).</p>
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
<p>Text 6</p>
<p>Text 7</p>
<p>Text 8</p>
<p>Text 9</p>
</div>
</body>
</html>
OUTPUT:-
 |
| sk. |
No comments:
Post a Comment