My Bloggers Code

Sidbar Link list widget
with Diffrent A-class Desgin

Beautiful Sidebar link list widget with different A-classs Effect for Bloggers

Here is the code of Beautiful side bar link list widget with different A-class Effect.

How to Add : Just add an html/javascript widget to your sidebar and copy and past the code given below in Codebox.

<div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

.sidebar-link {
    height: 100%;
    width: 80%;
    position: relative;
    z-index: 9;
    top: 0;
    left: 0;
    background: #58CCC6;
    overflow-x: hidden;
    padding-top:10px;
    padding-bottom:10px;
}

A.class1{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #B03310;
    border-bottom: solid;
    border-width:thin;
    border-color:#A1180B;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
    color:white;
}

A.class2{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #610603;
    border-bottom: solid;
    border-width:thin;
    border-color:#730C08;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
   color:#CCB4B4;
}

A.class1:link {text-decoration: none; color: black;}
A.class1:hover {text-decoration: none; color: #7DCFD4;}
A.class1:active {text-decoration: none; color: red;}
A.class1:hover {background: #000000;}

A.class2:link {text-decoration: none; color: black;}
A.class2:hover {text-decoration: underline; color: 7DCFD4;}
A.class2:active {text-decoration: none; color: red;}
A.class2:hover {background: #000000;}
}

</style>

<div id="Name of Your Widget" class="sidebar-link">

</li>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:0px;margin-right:20px;margin-left:20px;font-family: 'Cuprum', sans-serif;color:#000000; padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-1</h2>


<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-2 </h2>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-font-color:#ffffff;text-align:center;margin-top:10px;></i>class 2 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link</a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-3 </h2>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

</li> </div> </div>

Beautiful Sidebar link list widget with different A-classs Effect for Bloggers with fa-fa font symbol..

Here is the code of Beautiful side bar link list widget with different A-class Effect with fa-fa font effect..

How to Add : Just add an html/javascript widget to your sidebar and copy and past the code given below in Codebox.

<div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

.sidebar-link {
    height: 100%;
    width: 80%;
    position: relative;
    z-index: 9;
    top: 0;
    left: 0;
    background: #58CCC6;
    overflow-x: hidden;
    padding-top:10px;
    padding-bottom:10px;
}

A.class1{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #B03310;
    border-bottom: solid;
    border-width:thin;
    border-color:#A1180B;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
    color:white;
}

A.class2{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #610603;
    border-bottom: solid;
    border-width:thin;
    border-color:#730C08;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
   color:#CCB4B4;
}

A.class1:link {text-decoration: none; color: black;}
A.class1:hover {text-decoration: none; color: #7DCFD4;}
A.class1:active {text-decoration: none; color: red;}
A.class1:hover {background: #000000;}

A.class2:link {text-decoration: none; color: black;}
A.class2:hover {text-decoration: underline; color: 7DCFD4;}
A.class2:active {text-decoration: none; color: red;}
A.class2:hover {background: #000000;}
}

</style>

<div id="Name of Your Widget" class="sidebar-link">

</li>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:0px;margin-right:20px;margin-left:20px;font-family: 'Cuprum', sans-serif;color:#000000; padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-1</h2>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:0px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:0px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-2 </h2>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-font-color:#ffffff;text-align:center;margin-top:10px;></i>class 2 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-3 </h2>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

</li>
</div></div>

Define diffrent class link a Dcoration

A.class1 {color:red;}
A.class1:link {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}

A.class2 {color:blue;}
A.class2:link {text-decoration: none; color: blue;}
A.class2:visited {text-decoration: none; color: blue;}
A.class2:hover {text-decoration: underline; color: blue;}
A.class2:active {text-decoration: none; color: blue;}

<a href="http://www.google.com" class="class1">Google</a>
<a href="http://stackoverflow.com" class="class2">Stackoverflow</a>

Sidebar beautiful menu list for Bloggers

Accordion Sidebar Dropdown Menu for Bloggers

Copy & paste the below code in Box and put in add Html segments..

<!doctype html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

.linklist {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 9;
    top: 0;
    left: 0;
    background: #193559;
    overflow-x: hidden;

}
.accordion {
    background-color: #EDD326;
    color: #000000;
    cursor: pointer;
    padding: 6px 10px;
    width: 100%;
    border: 1px solid;
    border-color:#E3C817;
    text-align: left;
    outline: none;
    font-size: 13.5px;
    transition: 0.4s;
    font-family: 'Cuprum', sans-serif;
    font-weight: bold;
}

.active, .accordion:hover {
    background-color: #B09A09;
}

.accordion:after {
    content: '\002B';
    color: #000000;
    font-weight: bold;
    float: right;
    margin-left: 5px;

}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 5px;
    background-color: #C7AE0E;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

}

.panel li{
    padding: 2px 2px 2px 10px;
    text-decoration: none;
   font-family: 'Cuprum', sans-serif;
    font-size: 15px;
    color: #000000;
    display: block;
    border-bottom: 1px solid ;
    border-color:#D6BC13;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;

}

.panel a{
padding: 2px 2px 2px 0px;
    text-decoration: none;
     font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    color: #000000;
    display: block;

    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;

}

.menu li{
    padding: 0px 0px 0px 0px;
   text-decoration: none;
   font-family: 'Cuprum', sans-serif;
    font-size: 15px;
    color: #000000;
    display: block;
    background-color: #C7AE0E;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;
border-bottom: 1px solid ;
    border-color:#D6BC13;
}

.menu a{
padding: 2px 12px 2px 10px;
    text-decoration: none;
     font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    color: #000000;
    display: block;

    background: #C7AE0E;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;

}

a:hover {
    background-color: #F0682E;
    text-decoration: underline;

}

a:active {
    background-color: black;
}

a:active {
    background-color: #D4AF28;
    text-decoration: underline;

}

</style>

<div id="linklist" class="sidebar">

<div id="menu" class="menu">

<h2 style="background-color: #BA1513; border-bottom: 1px solid rgb(34, 34, 34); border-bottom-width: 1px; color: yellow; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 12.61px; font-stretch: normal; line-height: normal; margin: 10px 0px 0em; padding: 10px 10px 0.8em;">
Select Your Session </h2>

<div class="menu">

<li class="menu-li"><a href="https://testblog8020.blogspot.in/"style=margin-bottom:0px;text-color:#000000;>Link list 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;></i></a></li>

<li class="menu-li"><a href="https://spatestblog101.blogspot.in/2018/05/tantra-info-what-we-do-in-tantra.html "style=margin-bottom:0px;text-color:#000000;>Link list 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;></i></a></li>

</div>

<button class="accordion">Dropdown 1</button>
<div class="panel">

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;></i></a></li>

</div>

<button class="accordion">Dropdown 2 </button>
<div class="panel">

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= margin-top:0px;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= margin-top:0px;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= margin-top:0px;></i></a></li>

</div>

<button class="accordion">Dropdown 3 </button>
<div class="panel">

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

</div>

<button class="accordion">Dropdown 4 </button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="menu">

<a style=" line-height: 1.4em; "><a href=" YOUR LINK GOES HERE" style="color: black;"> Link List 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;"></i></a>

<a style=" line-height: 1.4em; "><a href=" YOUR LINK GOES HERE" style="color: black;"> Link List 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;"></i></a>

</a></a></div>

</div></div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
});
}
</script>

</!doctype>

Mobile Dropdown Sidenev for Bloggers

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-size: 15px;
color: #818181;
display: block;
border-bottom: 1px solid;
border-color:#332C2B;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: 1px;

}
.sidenav a {
transition: 0.3s;

}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 50px;
left:190px;
font-size:70px;
border-bottom: none;
margin-top:-30px;

}

/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #1C1B0B;
padding-left: 48px;
border: none;
}
}

/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  About us</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a>

<button class="dropdown-btn"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>Services <i class="fa fa-caret-down"></i>
</button>

<div class="dropdown-container">
<a href="#">Hotel Promotion</a>
<a href="#">Restaurant promotion</a>
<a href="#">Waterpark Promotion</a>
<a href="#">Spa-Parlour Promotion</a>
</div>

<button class="dropdown-btn"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>Dropdown <i class="fa fa-caret-down"></i>
</button>

<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Contact us</a>
</div>

<div id="main">

<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "white";
}

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

</body>
</html>

Responsive Drop Down Menu for Bloggers

Css Code

body {
margin: 0px;

}
#menu{

margin-top:0px;
margin-left: 0px;
margin-right:0px;
background: #9C1919;
color: #FFF;
height: 46px;
border-bottom: 1px solid #BF2A2A;
box-shadow: 1px 1px 1px #BF2A2A;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 1.1em oswald;text-shadow: 0px 0px 0px #838383;letter-spacing:0.5px;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
border-bottom: 0px solid #BF2A2A;

}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #9C1919;
}
#menu input{display:none;margin:0 0;padding:0 0;width:100px;height:40px;opacity:0;cursor:pointer}
#menu label{font:bold 30px oswald;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #9C1919;
position: absolute;
z-index: 99;
display: none;

}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 1em oswald;
text-transform: none;
text-shadow: none;
border-bottom: 1px solid #BF2A2A;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

#menu{position:absolute,padding-top:20px;background:#9C1919;}
#menu ul{background:#910A3E; width:94%;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;padding-left:40px}
#menu li{display:block;float:none;width:auto; font:normal 1.2em oswald;}

#menu input,#menu label{font-family: 'Oswald', sans-serif; font-size:36px;top:0;left:0;display:block;float:left;margin-left:-45px; margin-top:5px;}
#menu input{z-index:4}
#menu input:checked + label{color:Yellow}
#menu input:checked ~ ul{display:block}

}

HTML CODE

<nav id='menu'>

<input type='checkbox'/>

<label><i class="fa fa-bars" style="float:right; "></i><span><h1 style=" font-family: 'Oswald', sans-serif; font-size:22px; font-weight:700; margin-left:30px;margin-top:0px;letter-spacing:0.6px;">HomeSpa18</h1></span>

</label>

<ul>
<li><a href='http://www.iappnalysis.com/'><i class="fa fa-home fa-fw"></i>Home</a></li>

<li><a href='http://www.iappnalysis.com/'><i class="fa fa-user"></i> About</a></li>

<li><a href='#'>Apps<font size='1'>▼</font></a>
<ul class='menus'>

<li><a href='http://www.iappnalysis.com/search/label/Socialnetworking'><span>Social Networking</span></a></li>
<li><a href='http://www.iappnalysis.com/search/label/Sports'><span>Sports</span></a></li>
<li><a href='http://www.iappnalysis.com/search/label/Travel'><span>Travel</span></a></li>
<li class='last'><a href='http://www.iappnalysis.com/search/label/Utilities'><span>Utilities</span></a></li>
</ul>

<li><a href='#'>Apps<font size='1'>▼</font></a>
<ul class='menus'>

<li><a href='http://www.iappnalysis.com/search/label/Socialnetworking'><span>Social Networking</span></a></li>
<li><a href='http://www.iappnalysis.com/search/label/Sports'><span>Sports</span></a></li>
<li><a href='http://www.iappnalysis.com/search/label/Travel'><span>Travel</span></a></li>
<li class='last'><a href='http://www.iappnalysis.com/search/label/Utilities'><span>Utilities</span></a></li>
</ul>

<li><a href='#'>Apps<font size='1'>▼</font></a>
<ul class='menus'>

<li><a href='http://www.iappnalysis.com/search/label/Socialnetworking'><span>Social Networking</span></a></li>
<li><a href='http://www.iappnalysis.com/search/label/Sports'><span>Sports</span></a></li>
<li><a href='http://www.iappnalysis.com/search/label/Travel'><span>Travel</span></a></li>
<li class='last'><a href='http://www.iappnalysis.com/search/label/Utilities'><span>Utilities</span></a></li>
</ul>

<li><a href='http://www.iappnalysis.com/'><i class="fa fa-home fa-fw"></i>Home</a></li>

<li><a href='http://www.iappnalysis.com/'><i class="fa fa-user"></i> About</a></li>

</li></li></li></ul>

</nav>

Source

https://codepen.io/smexysumo/pen/MwjxXB

Add stylish Read more Button

Just add the Css Code to your Template

.jump-link {
text-transform: uppercase;
margin: 0 auto;
font-size: 11px;
letter-spacing: 2px;
text-align: left;
padding-top: 30px;
}

.jump-link a {
border: 2px solid;
padding: 7px;
}

aaaaa