Previously we have posted Responsive Sidebar Menu or Side Navigation Menu using HTML & CSS, now it’s time to create a Responsive Sidebar Menu with hover effect using HTML & CSS.
The sidebar is a user interface element that typically appears as a column to the left or right side of the webpage.
The Sidebar consists of several menus which help the user to redirect to the various site within the webpage. When you click on to the particular menu, it redirects to that particular webpage. The Sidebar is an essential part of the web page. The Sidebar menu may consist of Home, Dashboard, and Setting. This sidebar consists of Dashboard, Settings, Graphics, Contact us, and Documentation.
In this blog (Responsive Sidebar Menu with hover effect) , the icons are placed on the left side, along with the logout option at the bottom of this sidebar. The hover effect has been used in the sidebar. If you hover the sidebar, the icons along with text will slide from left to right. Else the icons alone will be visible. The hover effect is also given to every icon button. This page is made responsive by using HTML and CSS.
The source code of this Responsive Sidebar Menu with hover effect is given below, you can copy the source code of this program. You can use this Responsive Sidebar Menu with hover effect, you can take this to the next level with your creativity.
Responsive Sidebar Menu with hover effect [Source Code]
To make this website (Responsive Sidebar Menu with hover effect), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
.fa {
position: relative;
display: table-cell;
width:60px;
height:30px;
text-align: center;
margin: 5px 0;
font-size:10px;
color:#ddd
}
.main-menu:hover,nav.main-menu.expanded {
width:220px;
overflow:visible;
}
.main-menu {
background:#212024;
position:absolute;
top:0;
bottom:0;
height:98%;
left:5px;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
z-index:1000;
margin: auto;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:220px;
margin: 5px 0;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#fff;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
a:hover,a:focus {
text-decoration:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a{
color:#000;
background-color:#85FFBD;
margin: 5px;
border-radius:5px;
}
.main-menu li .fa{
color:#85FFBD
}
.main-menu li:hover .fa{
color:#000
}
.main-menu .logout li:hover>a{
color:#000;
background-color:tomato;
}
.main-menu .logout li .fa{
color:tomato
}
.main-menu .logout li:hover .fa{
color:#000
}
.credit{
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #000;
font-weight: 900;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#202124;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Sidebar Menu with hover effect using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team