As you can see, in the previous part, I shared about the beautiful multi-level mega menu, right? and today I continue to share with you a different menu type from the previous one, "Vertical Menu Hide Show Left Side Material Design For Blogger Blogspot" which is also very beautiful and professional.
Instructions on how to save code
This type of design helps you to arrange more components for your page, attach more links, more beautiful, more professional,... :))
Getting started tip tip ! Log in to the admin page and go to HTML editing
Integrate material icons if your blog doesn't have one, insert the following code before the closing </head> . tag
JQuery integration if your blog doesn't have one, insert the following code before the closing </head> . tag
Next paste the following code before the ]]></b:skin> . tag
Put the following JS code before the closing </body> . tag
Place the following HTML code before the opening <body...
Customize the CSS to your liking, if there is any id or class that matches the template, please change it to avoid conflict Icon to open the menu is fixed by css code, so it will not be hidden or disappears when you scroll the mouse. That said, it is suitable for templates with fixed headers, which are not hidden when scrolling. And if you want it to be hidden, wait for the next posts :)
Getting started tip tip ! Log in to the admin page and go to HTML editing
Integrate material icons if your blog doesn't have one, insert the following code before the closing </head> . tag
<link href='//fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>JQuery integration if your blog doesn't have one, insert the following code before the closing </head> . tag
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>Next paste the following code before the ]]></b:skin> . tag
.dark {
visibility: hidden;
opacity: 0;
background: rgba(0, 0, 0, .3);
left: 0;
right: 0;
margin: 0;
position: fixed;
bottom: 0;
top: 0
}
.dark.shows {
visibility: visible;
opacity: 1
}
.menu-toogle {
cursor: pointer;
width: 60px;
height: 35px;
position: fixed;
top: 6px;
left: 0;
margin: 4px 15px;
z-index: 10
}
.menu-toogle div {
width: 29px;
height: 3px;
background: #aaa;
margin: 5px 0;
transition: all 0.35s;
border-radius: 0
}
.on .line_one {
background: #111;
-webkit-transform: rotate(45deg) translate(8px, 3px);
-moz-transform: rotate(45deg) translate(8px, 3px);
-ms-transform: rotate(45deg) translate(8px, 3px);
-o-transform: rotate(45deg) translate(8px, 3px);
transform: rotate(45deg) translate(8px, 3px);
}
.on .line_two {
opacity: 0
}
.on .line_three {
background: #111;
-webkit-transform: rotate(-45deg) translate(8px, -4px);
-moz-transform: rotate(-45deg) translate(8px, -4px);
-ms-transform: rotate(-45deg) translate(8px, -4px);
-o-transform: rotate(-45deg) translate(8px, -4px);
transform: rotate(-45deg) translate(8px, -4px);
}
#navigator {
width: 250px;
height: 100%;
position: fixed;
top: 0;
left: -250px;
background: #e8e8e8;
float: left;
z-index: 100;
overflow-y: auto;
}
#navigator a {
text-decoration: none
}
.section1,
.section2 {
border-bottom: 1px solid #cacaca;
}
.section1 ul,
.section2 ul,
.section3 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.section1 ul li a,
.section2 ul li a,
.section3 ul li a {
display: block;
padding: 6px 35px 13px 35px;
text-align: left;
}
.section1 ul li a:hover,
.section2 ul li a:hover,
.section3 ul li a:hover {
background: #d8d8d8;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.section1 ul li i,
.section2 ul li i,
.section3 ul li i {
position: relative;
top: 6px;
margin-right: 6px;
color: #131313;
}
.section1 ul li a span,
.section2 ul li a span,
.section3 ul li a span {
color: #111
}
.section2>span,
.section3>span {
font-size: 19px;
text-transform: uppercase;
font-weight: 600;
margin: 15px;
}
.section2,
.section3 {
padding: 10px;
}Put the following JS code before the closing </body> . tag
<script type="text/javascript">//<![CDATA[
// Material design by hung1001
$(document).ready(function() {
$('.menu-toogle').click(function() {
$(this).toggleClass('on');
if ($('#navigator').css('left') == '-250px') {
$('#navigator').animate({
left: '0px'
}, 400);
$('.menu-toogle').animate({
left: '250px'
}, 400);
$(".dark").toggleClass("shows");
} else {
$('#navigator').animate({
left: '-250px'
}, 400);
$(this).animate({
left: '0px'
}, 400);
$(".dark").removeClass('shows');
}
});
});
//]]></script>
Place the following HTML code before the opening <body...
Replace the icon, link, and sub-menu with what you want to display. Custom:<div class='menu-toogle' title="Show menu">
<div class='line_one'></div>
<div class='line_two'></div>
<div class='line_three'></div>
</div>
<div class='dark'></div>
<div id='navigator'>
<div class="section1">
<ul>
<li><a href="/"><i class='material-icons'>&#xe88a</i><span>Home</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe0bf</i><span>FAQ</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe324</i><span>Contact</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe853</i><span>About</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe55b</i><span>Sitemap</span></a>
</li>
</ul>
</div>
<div class="section2"> <span>Trending</span>
<ul>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu1</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu2</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu3</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu4</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu5</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu6</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu7</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe87b</i><span>Sub-menu8</span></a>
</li>
</ul>
</div>
<div class="section3"> <span>Follow</span>
<ul>
<li><a href="#"><i class='material-icons'>&#xe8dc</i><span>Facebook</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe332</i><span>Google +</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe038</i><span>Youtube</span></a>
</li>
<li><a href="#"><i class='material-icons'>&#xe0e5</i><span>RSS</span></a>
</li>
</ul>
</div>
</div>
Customize the CSS to your liking, if there is any id or class that matches the template, please change it to avoid conflict Icon to open the menu is fixed by css code, so it will not be hidden or disappears when you scroll the mouse. That said, it is suitable for templates with fixed headers, which are not hidden when scrolling. And if you want it to be hidden, wait for the next posts :)
Post a Comment