responsive sidebar navigation menu using html css and javascript
Vertical Navigation Bars
With side navigation, you have several options:
- Always display the navigation pane to the left of the page content
- Use a collapsible, "fully automatic" responsive side navigation
- Open navigation pane over the left part of the page content
- Open navigation pane over all of the page content
- Slide the page content to the right when opening the navigation pane
- Display the navigation pane on the right side instead of the left side
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="nav.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="mynav" id="myid">
<a href="javascript:void(0)" class="closebtn" onclick="closeNavigation()">×</a>
<a href=""><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a href=""><i class="fa fa-phone-square" aria-hidden="true"></i> Contact Us</a>
<a href=""><i class="fa fa-bug" aria-hidden="true"></i> Report</a>
<a href=""><i class="fa fa-tags" aria-hidden="true"></i> Labels</a>
</div>
<span style="font-size:25px; cursor: pointer;" onclick="startNavigation()">☰</span>
<!--HTML Code-->
</body>
</html>
Add this Code in the Above HTML FILE:
CSS FILE:
.mynav{
height: 100%;
width:0;
top:0;
left: 0;
position: fixed;
background-color: #7d04c4;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.mynav a{
font-size: 25px;
color:white;
display: block;
padding: 8px 8px 8px 32px;
transition: 0.3s;
text-decoration:none;
}
.mynav a:hover{
color:black;
}
.mynav .closebtn{
position: absolute;
margin-left: 50px;
top:0;
right:20px;
font-size:25px;
}
@media screen and (max-height:450px){
.mynav{padding-top:15px}
.mynav a{font-size:15px}
}
/*Code Link in
description*/
Script FILE:
إرسال تعليق