Add JQuery Mega Vertical Sidebar Menu In Blogger

6:43 μ.μ. , ,
We can add navigation bar at header To Blogger. But this article explains how to add Mega Vertical Sidebar Menu in blogger. This is really fantastic vertical sidebar. The jQuery Mega Vertical Sidebar Menu allows readers to view all menu for each top-level Menu Item. You can now set the number of sub-menus per each row. I hope it will help your readers to navigate to the desired section of the page. A wordpress plugin is available for vertical sidebar menu.

 Demo
  • Go to Blogger Dashboard → Design → Page Elements
  • Click on Add a Gadget then select HTML/JavaScript Widget
  • Copy the code shown below and paste it inside the widget
<style>
/* Page Styles */
.menu-container {padding: 20px 0; width: 250px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}

/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 38px 12px 25px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.mega-menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 18px;
right: 15px;
width: 6px;
height: 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijClvT1DqPK4XuLU9bYJa7bejy1qEhYmvN4alsd9yVP7g_ax5bnXEIFrgWdmTRyQt315njGfR2VX5ab0TFmRWqSZM4dNmpopYPI1ib-W9apasE1bKeWO1VMuXKRnCxkSVZ1EkVMFSKxMg/s1600/ext-black.png) no-repeat 0 0;
}
/* Mega menu container */
.mega-menu li .sub-container {
position: absolute; /* Required */
background: #4B4B4B;
padding: 10px 10px 0 10px;
overflow: hidden;
border: 1px solid #4b4b4b;
border-left: none;
}
.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.mega-menu li .sub li {
float: none;
width: 150px;
font-size: 1em;
font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
background: none;
border: none;
text-shadow: none;
float: none;
color: #fff;
padding: 7px 10px;
display: block;
text-decoration: none;
font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 5px 5px 15px;
margin-bottom: 5px;
background: #E88221;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
padding: 4px 5px 4px 20px;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqGqB0X1XhISBxcMkiP9a2QzmLY7rqAwzxRgghL2llA6bfHY-hRkpOIH1pVddi9Jwm5YZPP9Qkjck0kp0eharntC-uZQJLRRGaRObb0jALwAUiYBtOtkG4gd7F9llSp0Xi3ueuhtBwgg/s1600/arrow_white.png)  no-repeat 5px 8px;
font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
color: #a32403;
background: #efefef  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA02DEwtlgnKojM9qaCw3R3DVzQsmZv16SdcnewerRRxXOTILwmMm0csefPyVj5OeFVVThseiJh7mqPymTlIKbHEuBHj_qy_BiU2ZOu3HSBe_cTVCqgcc-2ggS371Q1Jpm2DOseePYbNk/s1600/arrow_on.png)  no-repeat 5px 8px;
}
.mega-menu .sub ul li {
padding-right: 0;
}
/* Styling for Menu Items with only 2 levels */
.mega-menu li .sub-container.non-mega .sub {
padding: 10px;}
.mega-menu li .sub-container.non-mega li {
padding: 0;
margin: 0;
width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqGqB0X1XhISBxcMkiP9a2QzmLY7rqAwzxRgghL2llA6bfHY-hRkpOIH1pVddi9Jwm5YZPP9Qkjck0kp0eharntC-uZQJLRRGaRObb0jALwAUiYBtOtkG4gd7F9llSp0Xi3ueuhtBwgg/s1600/arrow_white.png)  no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
color: #a32403;
background: #efefef  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA02DEwtlgnKojM9qaCw3R3DVzQsmZv16SdcnewerRRxXOTILwmMm0csefPyVj5OeFVVThseiJh7mqPymTlIKbHEuBHj_qy_BiU2ZOu3HSBe_cTVCqgcc-2ggS371Q1Jpm2DOseePYbNk/s1600/arrow_on.png)  no-repeat 7px 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'  src='http://latesthack.googlecode.com/svn/mywidgets/VerticalSidebarMenu/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript'  src='http://latesthack.googlecode.com/svn/mywidgets/VerticalSidebarMenu/jquery.dcverticalmegamenu.1.0.js'></script>
<script type="text/javascript">
$(document).ready(function($){

$('#mega-1').dcVerticalMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'show',
direction: 'right'
});
});
</script>
</head>
<body>
<div class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li><a href="#">Menu Item A</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
</ul></li>
<li><a href="#">Menu Item C</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item D</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item E</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li>
<li><a href="#">Menu Item F</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item G</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item H</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item I</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li></ul>
</div>
  • Replace Menu Item with your own text
  • Replace Sub-Header with your own text
  • Replace Menu Link with your own links
  • If your Bloger template already have <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> then do not need to add this
  • Now save the widget

About the Author

Written by Admin

ChromeGT is a modern, powerful and professional Blogger template made for your Portfolio, Business or almost any other kind of website.