This code project represents the implementation of a sidebar menu with hover effects using HTML and CSS. This sidebar menu is designed to expand and show the menu options when hovered over, and collapse when not in focus. The HTML code defines the structure of the menu with various menu items and icons. The CSS code contains the styling and animation properties to create the hover effects and scrollbar appearance.
This code is helpful for web developers who want to create a visually appealing and interactive sidebar menu for their websites. By customizing the code, you can easily integrate this sidebar menu into your projects.
How to Create Sidebar Menu & Show/hide Menu Item on Hover using CSS
1. First of all, load Font Awesome CSS (for icons) by adding the following CDN link into the head tag of your HTML document.
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
2. After that, create the HTML structure for the sidebar menu as follows:
<nav class="main-menu">
<div>
<a class="logo" href="http://startific.com">
</a>
</div>
<div class="settings"></div>
<div class="scrollbar" id="style-1">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-heart-o fa-lg"></i>
<span class="share">
<div class="addthis_default_style addthis_32x32_style">
<div style="position:absolute;
margin-left: 56px;top:3px;">
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a>
<a href="https://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a>
<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_
" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
</span>
<span class="twitter"></span>
<span class="google"></span>
<span class="fb-like">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
</span>
<span class="nav-text">
</span>
</a>
</li>
</li>
<li class="darkerlishadow">
<a href="#">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span class="nav-text">Shopping</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">Film & Music</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art & Design</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Games</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Life & Style
</span>
</a>
</li>
<li class="darkerlishadowdown">
<a href="#">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Fun</span>
</a>
</li>
</ul>
<li>
<a href="#">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Help</span>
</a>
</li>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-lightbulb-o fa-lg"></i>
<span class="nav-text">
BLOG
</span>
</a>
</li>
</ul>
</nav>
3. Use the following CSS code to style the sidebar.
.settings {
height:73px;
float:left;
background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
background-repeat:no-repeat;
width:250px;
margin:0px;
text-align: center;
font-size:20px;
font-family: 'Strait', sans-serif;
}
/* ScrolBar */
.scrollbar{
height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.scrollbar:hover{
height: 90%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
/* Scrollbar Style */
#style-1::-webkit-scrollbar-track
{
border-radius: 2px;
}
#style-1::-webkit-scrollbar
{
width: 5px;
background-color: #F7F7F7;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #BFBFBF;
}
/* Scrollbar End */
.fa-lg {
font-size: 1em;
}
.fa {
position: relative;
display: table-cell;
width: 55px;
height: 36px;
text-align: center;
top:12px;
font-size:20px;
}
.main-menu:hover, nav.main-menu.expanded {
width:250px;
overflow:hidden;
opacity:1;
}
.main-menu {
background:#F7F7F7;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:55px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
opacity:1;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
width:255px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#8a8a8a;
font-size: 13px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;
font-family: 'Strait', sans-serif;
border-top:1px solid #f2f2f2;
text-shadow: 1px 1px 1px #fff;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu .share {
}
.main-menu .fb-like {
left: 180px;
position:absolute;
top: 15px;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
/* Logo Hover Property */
.settings:hover, settings:focus {
background:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
}
.settings:active, settings:focus {
background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
-webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
}
a:hover,a:focus {
text-decoration:none;
border-left:0px solid #F7F7F7;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}
/* Darker element side menu Start*/
.darkerli
{
background-color:#ededed;
text-transform:capitalize;
}
.darkerlishadow
{
background-color:#ededed;
text-transform:capitalize;
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}
.darkerlishadowdown
{
background-color:#ededed;
text-transform:capitalize;
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}
/* Darker element side menu End*/
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#00bbbb;
text-shadow: 0px 0px 0px;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
That’s all! hopefully, you have successfully created a sidebar menu that show/hide menu item on hover using CSS. If you have any questions or suggestions, feel free to comment below.
