Three Line Side Menu
If you want to install Threeline Menu in your website, and you want that it is only in the Mobile View site then you can do so. Today, I will tell you the method that you will follow and then the Threeline menu will be added to your website.
How to put Threeline Side Menu-
>> First you open your Blogger account.
>> Now go to Layout.
>> Now select Java / html Gadget and paste the following code –
<style>
.sidebarmobilemenu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebarmobilemenu a {
padding: 8px;
text-decoration: none;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebarmobilemenu a:hover {
color: #f1f1f1;
}
.closemobilemenu {
}
.openmobilemenu {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding-top: 0px; margin-top: -3px;
border: none;
}
.openmobilemenu:hover {
background-color: #444;
}
@media screen and (max-height: 450px) {
.sidebarmobilemenu {padding-top: 15px;}
.sidebarmobilemenu a {font-size: 18px;}
}
.tksearch {
width: 90%;
position: relative;
display: flex;
left: 5%; right: 5%;
}
.tksearchButton {
border: 1px solid white;
background: white;
text-align: center;
color: red;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.tksearchTerm {
width: 100%;
border: 3px solid white;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
</style>
<div style=” text-align: center;” id=”mysidebarmobilemenu” class=”sidebarmobilemenu”>
<img align=”center” src=”https://1.bp.blogspot.com/-8GxwVFbV1Wg/XrJSBJO_InI/AAAAAAAAEM4/Rs-GqzjlEsos2d86CesJs2kBCTbNQDbGgCLcBGAsYHQ/s1600/2019animationss2200KB.gif” alt=”TheKroyaard Logo” style=”width:160px;height:80px; padding-top: 10px; ” />
<br/>
www.TheKroyaard.com
<div style=”clear:both;”></div>
<form class=”tksearch” method=”get” action=”/search”>
<input name=”q” autocomplete=”off” type=”text” class=”tksearchTerm ” placeholder=”Type here…” />
<input class=”tksearchButton” type=”submit” value=”➩” /></form>
<div style=”clear:both;”></div>
<a href=”http://thekroyaard.com/p/about.html”>About</a>
<a href=”http://thekroyaard.com/p/whats-your-demand.html”>What’s Your Demand</a>
<hr />
<a href=”javascript:void(0)” onclick=”closeNav()”>Hide</a>
</div>
<div id=”main”>
<button class=”openmobilemenu” onclick=”openNav()”>☰</button>
</div>
<script>
function openNav() {
document.getElementById(“mysidebarmobilemenu”).style.width = “100%”;
}
function closeNav() {
document.getElementById(“mysidebarmobilemenu”).style.width = “0”;
}
</script>
>> Now save it by clicking on the SAVE button.
