Saturday, September 19, 2020
Home Blogging Tips & Tweaks Simple Vertical Menu with Toggle Button for Blogger and Website

Simple Vertical Menu with Toggle Button for Blogger and Website

It is not everyone that fancy the horizontal navigation menu which is why I am bringing you guys this tutorial on how to add a simple vertical menu to your Blogger blog. The steps as usual are very easy to follow but if you find it difficult, don’t hesitate to let me know. So to add the vertical navigation menu to your Blogger powered blog;

  • Login to your Blogger Dashboard.
  • Click on Layout >>> Add a Gadget.
  • Scroll down the pop up page and select HTML/JavaScript.
  • Copy the below code and paste into the HTML/JavaScript box.
<style>

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th,

td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

 margin: 0;

 padding: 0;

 border: 0;

 font-size: 100%;

 font: inherit;

 vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers

 */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

 display: block;

}

body {

 line-height: 1;

}

ol, ul {

 list-style: none;

}

blockquote, q {

 quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

 content: '';

 content: none;

}

table {

 border-collapse: collapse;

 border-spacing: 0;

}

html{

  height: 100%;

background: rgb(234, 246, 243);

}

body{

  text-align:center;

  vertical-align:middle;

  height:100%;

}

body:before {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle;

}

.menu{

  vertical-align:middle;

  width:300px;

  display:inline-block;

 font-family: 'Source Sans Pro', sans-serif;

  transform:translate3d(0,0,0);

}

.menu input{

  position:absolute;

  left:-9999px;

}

.menu #EdHelper_Menu:checked ~ ul {

  max-height:300px;

  padding-bottom:1em;

}

.EdHelper_Menu {

background: #009;

color: white;

display: block;

padding: 0.75em;

text-align: center;

cursor:pointer;

font-family: 'entypo', sans-serif;

}

.EdHelper_Menu:before{

  content: "\2630";

  font-size:1.5em;

  vertical-align:middle;

}

.menu ul{

  margin-top:2px;

  text-align:left;

  max-height:0px;

  overflow:hidden;

  padding-bottom:0;

  transition:300ms ease all;

}

.menu li{

  margin-bottom:1px;

  position:relative;

  z-index:10;

  transition:300ms ease all;

}

.menu li a {

display: block;

position:relative;

width:100%;

padding: 1em;

background: #909;

text-decoration:none;

color:white;

box-sizing:border-box;

transition:300ms ease all;

}

.menu li:hover a {

width:99%;

margin-left:1%;

box-shadow: inset 300px 0 300px -300px rgba(

255, 255, 255, 0.6);

}

.menu li:before {

content: "";

position: absolute;

width: 50%;

height: 30%;

left: 1%;

bottom: 16px;

box-shadow: 10px 0 0px black;

transition:300ms ease all;

transform: rotate(0deg);

}

.menu li:hover:before {

box-shadow: 10px 0 30px black;

transform: rotate(-4deg);

bottom: 6px;

}

.menu li:hover + li{

  z-index:1;

}

</style>

<nav class="menu">

  <input type="checkbox" id="EdHelper_Menu"

checked />

  <label for="EdHelper_Menu" class="EdHelper_Menu"></label>

  <ul>

    <li><a href="#">Menu Link Title 1</a></li>

    <li><a href="#">Menu Link Title 2</a></li>

    <li><a href="#">Menu Link Title 3</a></li>

    <li><a href="#">Menu Link Title 4</a></li>

    <li><a href="#">Menu Link Title 5</a></li>

  </ul>

</nav>

Changes to Make:

Replace # with the corresponding URL link to the Menu Link Title you want to your visitors to be redirected to once they click on the links.

  • Click on Save to add the vertical menu to your blog.
  • Drag the gadget to any position in your blog where you want it to be appearing.
  • Finally click on Save Arrangement to save and apply the changes.

With that done, you should start seeing the vertical menu appearing in your blog, exactly where you dragged it to. If for any reason it fails to appear, do not hesitate to let me know.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments