Fill the text in brackets with whatever you want. The result should be similar to the one on this page.
HTML
<i class="♚PlacEhoLDEr" style="position:fixed;display:none"></i>
<div class="Nav">
<div class="select">
<ul class="NavList">
<li><a href="[Webpage Directory].html">[Page Title]</a></li> <!--Repeat this line for each link-->
</ul>
<div class="menutext">[Sidebar Title]</div> <!--Max character limit:20 (Including spaces!)-->
</div>
<div class="SideNav">
<div class="menuicon"></div>
</div>
</div>
The crown is used as the class name for a placeholder <i> tag so you don't accidentally style it. It's only there to somehow fix the issue of the sidebar moving
unintentionally if you scroll immediately after hovering outside of the bar.
CSS
/* GENERAL */
body {
margin-left: 47px; /* At least 42px for body elements to stay visible */
z-index: -2;
}
/* CLASS-SPECIFIC */
.menuicon {
width: 32px;
height: 6px;
background: [Menu Icon Color];
position: relative;
display: block;
z-index:999;
left: 223px;
top:15px;
opacity: 100;
transition: opacity .3s ease-out, left .3s ease-out;
}
.menuicon:before, .menuicon:after {
content: "";
width: 32px;
height: 6px;
background: [Menu Icon Color];
position: absolute;
top: -10px;
}
.menuicon:after {
top: 10px;
}
.SideNav {
position:fixed;
background: [Main Background Color];
width: 260px;
height: 99.55%;
left: 0;
top: 0;
overflow: hidden;
padding: 0;
z-index:0;
margin-left: -220px;
transition: margin-left .3s ease-out, width .3s ease-out;
border: 2px solid [Border Color];
}
.NavList {
position:absolute;
padding-left: 0;
text-align: center;
width: 99.65%;
margin: 29px 1.5% 0;
height: 100%;
font-size: 16px;
color: [Text Color];
opacity:0;
}
.NavList li {
display: block;
list-style-type: none;
margin-left: 0;
}
.menutext {
text-align: center;
position: absolute;
top: 5px;
display: inline-block;
margin-left: 4px;
width: 220px;
border-bottom: 2px solid [Border Color];
opacity: 0;
transition: opacity .2s ease-out;
z-index:990;
font-size: 20px;
font-weight: bold;
color: [Title Color];
}
.select {
width: 42px;
height: 42px;
background-color: transparent;
z-index: 999;
position: fixed;
top: 0;
left: 0;
overflow:hidden;
transition: width .3s ease-out;
}
.NavList li a {
width: 100%;
height: 100%;
display: block;
padding: 5px 0;
}
/* :HOVER */
.select:hover+.SideNav>.menuicon {
opacity: 0;
left: 94px;
}
.select:hover {
width: 220px;
height: 100%;
}
.select:hover+.SideNav {
width: 220px;
margin-left: 0;
}
.NavList li:hover {
background: [Selected Link Color];
width: 100%;
}
.select:hover .NavList {
opacity: 100;
}
.Nav:hover .menutext {
opacity: 100;
}
If you don't want a border around you sidebar, replace the metioned tags' stylings with the ones below, the highlighted lines are the ones that changed:
.menuicon {
width: 32px;
height: 6px;
background: [Menu Icon Color];
position: relative;
display: block;
z-index:999;
left: 225px;
top:15px;
opacity: 100;
transition: opacity .3s ease-out, left .3s ease-out;
}
.SideNav {
position:fixed;
background: [Main Background Color];
width: 262px;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
padding: 0;
z-index:0;
margin-left: -220px;
transition: margin-left .3s ease-out, width .3s ease-out .1ms;
}
.NavList {
position:absolute;
padding-left: 0;
text-align: center;
width: 100%;
margin: 29px 0 0;
height: 100%;
font-size: 20px;
color: [Text Color];
opacity:0;
}