CSS Responsive Navigation Bar (Sidenav)
We will use CSS media queries to create a responsive side navigation. It changes the shape, size, position etc. of the horizontal menu, depending on screen sizes.
On Larger Screens Top Nav becomes Side Nav.
Responsive Horizontal Menu (Sidenav)
This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.
We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.
media queries are CSS styles, that is applied to the same elements, depending on screen sizes.
Resize the Browser to see the effect.
Responsive Sidenav Example
This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.
We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.
Resize the browser window to see the effect.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #0054ff;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
/* This will take any effect only between Screen Sizes 401-900px */
@media screen and (max-width: 900px) { /* For Screen Sizes up to 900px */
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
/* This will take any effect only between Screen Sizes 0-400px */
@media screen and (max-width: 400px) {/* For Screen Sizes up to 400px */
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<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 class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
Example Explained
<meta name="viewport" content="width=device-width, initial-scale=1.0">- This Sets the viewport to the same as device width.@media screen and (max-width: 400px)@media screen- This select screen as its input i.e. the change in the width of the screen will use this media query.and (max-width: 400px)- This select screen with its width less than 400px as its input i.e. the change in the width of the screen will use this media query.
@media screen and (max-width: 900px)@media screen- This select screen as its input i.e. the change in the width of the screen will use this media query.and (max-width: 900px)- This select screen with its width less than 900px as its input i.e. the change in the width of the screen will use this media query.
Comments
Post a Comment