Drop down Navigation menu is an essential part of any blog or website. Maintaining a clean, easy to use navigation menu is a huge part of cr...
Drop down Navigation menu is an essential part of any blog or website. Maintaining a clean, easy to use navigation menu is a huge part of creating an effective design. Too many links can confuse a reader, while too few can leave them wondering what they’re missing. A drop down menu is a great way to hide extra links while still making them available to curious readers. Drop down menus can help organize and categorize content links. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket! It helps visitors to easily get the required content from the whole blog.
Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing. The menu I’ve put together is built entirely with CSS3, HTML, jQuery and JavaScript. You can view a demo of it here. While WordPress makes it easy to add a drop down menu (sub items), it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling! To get started, you’ll need to follow the below tutorial with images:
Step 1. Login to your blogger account > Dashboard > Template > Edit HTML
Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :
Step 3. Just below </header> add the following HTML code :
Step 4. Configuration of HTML code :
Say if your post URL is http://howbloggerz.blogspot.com/2016/05/how-to-add-drop-down-menu-to-blogger.html
or if your page URL is http://howbloggerz.blogspot.com/p/page.html
To make sure that current page link highlighter works properly with country redirect.
Add only : /2016/05/how-to-add-drop-down-menu-to-blogger.html
or /p/page.html
Example :
<a href="/2016/05/how-to-add-drop-down-menu-to-blogger.html">Title</a>
Note: Use full URL for home page link ( do not use above format ).
<a href="#">Title</a>
To add another category say "Group" before "About", place the following code just above it :
<li><a href="#">Group</a></li>
Example :
Say if you want to add sub-category to category "Group" then place the following code just above the closing tag </li> of "Group" :
<ul>
<li><a href="#">Sub Group</a></li>
</ul>
Example :
<li><a href="#">Group</a>
<ul>
<li><a href="#">Sub Group</a></li>
</ul>
</li>
To add another sub category in "Group" add following code just above closing tag </ul> of "Group" :
<li><a href="#">Sub Group</a></li>
Example :
<li><a href="#">Group</a>
<ul>
<li><a href="#">Sub Group 1</a></li>
<li><a href="#">Sub Group 2</a></li>
</ul>
</li>
Say if you want to add sub-sub category inside "Group" in "Sub Group 1" add the following code just above the closing tag </li> of "Sub Group 1" :
<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>
Example :
<li><a href="#">Group</a>
<ul>
<li><a href="#">Sub Group 1</a>
<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>
</li>
<li><a href="#">Sub Group 2</a></li>
</ul>
</li>
Step 4. Again find the code </head> and place anyone of the following code just above it :
Step 4. Click Save template.
Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing. The menu I’ve put together is built entirely with CSS3, HTML, jQuery and JavaScript. You can view a demo of it here. While WordPress makes it easy to add a drop down menu (sub items), it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling! To get started, you’ll need to follow the below tutorial with images:
Adding The jQuery 2-Sub Drop Down Menu
Step 1. Login to your blogger account > Dashboard > Template > Edit HTML
Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :
</header>
Step 3. Just below </header> add the following HTML code :
<div id="navmenu">
<ul>
<li><a class="highlight" href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Category</a>
<ul>
<li><a href="#">Category 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Step 4. Configuration of HTML code :
1. Replace # with the URL of the link.
Say if your post URL is http://howbloggerz.blogspot.com/2016/05/how-to-add-drop-down-menu-to-blogger.html
or if your page URL is http://howbloggerz.blogspot.com/p/page.html
To make sure that current page link highlighter works properly with country redirect.
Add only : /2016/05/how-to-add-drop-down-menu-to-blogger.html
or /p/page.html
Example :
<a href="/2016/05/how-to-add-drop-down-menu-to-blogger.html">Title</a>
Note: Use full URL for home page link ( do not use above format ).
2. Replace the text inside the code with title of that specific URL.
<a href="#">Title</a>
3. How to add more categories :
To add another category say "Group" before "About", place the following code just above it :
<li><a href="#">Group</a></li>
Example :
<div id="navmenu">
<ul>
<li><a class="highlight" href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Category</a>
<ul>
<li><a href="#">Category 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Group</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
4. How to add Sub-category :
Say if you want to add sub-category to category "Group" then place the following code just above the closing tag </li> of "Group" :
<ul>
<li><a href="#">Sub Group</a></li>
</ul>
Example :
<li><a href="#">Group</a>
<ul>
<li><a href="#">Sub Group</a></li>
</ul>
</li>
To add another sub category in "Group" add following code just above closing tag </ul> of "Group" :
<li><a href="#">Sub Group</a></li>
Example :
<li><a href="#">Group</a>
<ul>
<li><a href="#">Sub Group 1</a></li>
<li><a href="#">Sub Group 2</a></li>
</ul>
</li>
5. How to add Sub-sub category :
Say if you want to add sub-sub category inside "Group" in "Sub Group 1" add the following code just above the closing tag </li> of "Sub Group 1" :
<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>
Example :
<li><a href="#">Group</a>
<ul>
<li><a href="#">Sub Group 1</a>
<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>
</li>
<li><a href="#">Sub Group 2</a></li>
</ul>
</li>
Step 4. Again find the code </head> and place anyone of the following code just above it :
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
var str = location.href.toLowerCase();
$('#navmenu ul li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li a.highlight").removeClass("highlight");
$(this).addClass("highlight")
}
});
$('#navmenu ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().addClass('highlights');
} });
$('#navmenu ul ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().parent().parent().addClass('highlights');
$(this).parent().addClass('highlights');
} });
$("<span></span>").insertBefore("#navmenu ul ul ul");
$("#navmenu ul ul ul").parent().find("a").css({
"padding": "5px 28px 7px 16px"
});
$("#navmenu ul ul ul").hover(function() {
$(this).prev().css("opacity", "0");
}, function() {
$(this).prev().css("opacity", "1");
});
});
</script>
<style type="text/css">
#navmenu,
#navmenu ul,
#navmenu ul li,
#navmenu ul ul,
#navmenu ul ul li,
#navmenu ul ul ul,
#navmenu ul ul ul li {
z-index: 1000;
}
#navmenu ul {
margin: 0;
padding: 0
}
#navmenu li {
margin: 0;
padding: 0
}
#navmenu a {
margin: 0;
padding: 0
}
#navmenu ul {
list-style: none;
overflow: visible;
}
#navmenu a {
text-decoration: none
}
#navmenu {
height: 70px;
background-color: #232323;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#navmenu > ul > li {
float: left;
margin-left: 15px;
position: relative
}
#navmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
border: none;
display: inline;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s
}
#navmenu > ul > li > a:hover,
#navmenu ul li a.highlight {
color: #fff;
background-color: #232323;
}
#navmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
overflow: visible;
border: none;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible
}
#navmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px
}
#navmenu > ul ul > li {
position: relative;
float: none;
}
#navmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
border: none;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s
}
#navmenu ul ul li:hover {
background-color: #cc2c24;
}
#navmenu ul ul li:hover span {
right: 10px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul li:hover span::before {
border-color: transparent transparent transparent #fff;
}
#navmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
border: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible
}
#navmenu ul ul a:hover {
color: #f0f0f0;
background-color: #cc2c24;
}
#navmenu ul ul span::before {
content: '';
display: block;
border-color: transparent transparent transparent #000000;
border-style: solid;
border-width: 5px;
position: absolute;
z-index: 1001;
}
#navmenu ul ul li.highlights span::before {
border-color: transparent transparent transparent #fff;
}
#navmenu ul ul span:hover::before {
border-color: transparent transparent transparent #fafafa;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul span {
position: absolute;
right: 20px;
top: 10px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
var str = location.href.toLowerCase();
$('#navmenu ul li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li a.highlight").removeClass("highlight");
$(this).addClass("highlight")
}
});
$('#navmenu ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().addClass('highlights');
} });
$('#navmenu ul ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().parent().parent().addClass('highlights');
$(this).parent().addClass('highlights');
} });
$("<span></span>").insertBefore("#navmenu ul ul ul");
$("#navmenu ul ul ul").parent().find("a").css({
"padding": "5px 28px 7px 16px"
});
$("#navmenu ul ul ul").hover(function() {
$(this).prev().css("opacity", "0");
}, function() {
$(this).prev().css("opacity", "1");
});
});
</script>
<style type="text/css">
#navmenu,
#navmenu ul,
#navmenu ul li,
#navmenu ul ul,
#navmenu ul ul li,
#navmenu ul ul ul,
#navmenu ul ul ul li {
z-index: 1000;
}
#navmenu ul {
margin: 0;
padding: 0
}
#navmenu li {
margin: 0;
padding: 0
}
#navmenu a {
margin: 0;
padding: 0
}
#navmenu ul {
list-style: none;
overflow: visible;
}
#navmenu a {
text-decoration: none
}
#navmenu {
height: 50px;
background-color: #265783;
box-shadow: 0 2px 3px rgb(167, 205, 240);
width: auto;
border-bottom: 3px solid #214565;
}
#navmenu > ul > li {
float: left;
position: relative;
border-right: 1px solid #214565;
}
#navmenu > ul > li > a {
color: #fff;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 50px;
padding: 15px 20px;
border: none;
display: inline;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s
}
#navmenu > ul > li > a:hover,
#navmenu ul li a.highlight {
color: #fff;
background-color: #214565;
}
#navmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 70px;
width: 180px;
overflow: visible;
border: none;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible
}
#navmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -15px;
left: 10%;
margin-left: -10px
}
#navmenu > ul ul > li {
position: relative;
float: none;
}
#navmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
border: none;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s
}
#navmenu ul ul li:hover {
background-color: #cc2c24;
}
#navmenu ul ul li:hover span {
right: 10px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul li:hover span::before {
border-color: transparent transparent transparent #fff;
}
#navmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
border: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu ul ul ul::before {
content: '';
display: block;
border-color: transparent #dbdbdb transparent transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: 20px;
left: -20px;
}
#navmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible
}
#navmenu ul ul a:hover {
color: #f0f0f0;
background-color: #214565;
}
#navmenu ul ul span::before {
content: '';
display: block;
border-color: transparent transparent transparent #000000;
border-style: solid;
border-width: 5px;
position: absolute;
z-index: 1001;
}
#navmenu ul ul li.highlights span::before {
border-color: transparent transparent transparent #fff;
}
#navmenu ul ul span:hover::before {
border-color: transparent transparent transparent #fafafa;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul span {
position: absolute;
right: 20px;
top: 10px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
var str = location.href.toLowerCase();
$('#navmenu ul li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li a.highlight").removeClass("highlight");
$(this).addClass("highlight")
}
});
$('#navmenu ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().addClass('highlights');
} });
$('#navmenu ul ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().parent().parent().addClass('highlights');
$(this).parent().addClass('highlights');
} });
$("<span></span>").insertBefore("#navmenu ul ul ul");
$("#navmenu ul ul ul").parent().find("a").css({
"padding": "10px 28px 12px 16px"
});
$("#navmenu ul ul ul").hover(function() {
$(this).prev().css("opacity", "0");
}, function() {
$(this).prev().css("opacity", "1");
});
});
</script>
<style type="text/css">
#navmenu,
#navmenu ul,
#navmenu ul li,
#navmenu ul ul,
#navmenu ul ul li,
#navmenu ul ul ul,
#navmenu ul ul ul li {
z-index: 1000;
}
#navmenu ul {
margin: 0;
padding: 0
}
#navmenu li {
margin: 0;
padding: 0
}
#navmenu a {
margin: 0;
padding: 0
}
#navmenu ul {
list-style: none;
overflow: visible;
}
#navmenu a {
text-decoration: none
}
#navmenu {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
height: 50px;
box-shadow: 1px 1px 3px #C2C2C2;
width: auto;
border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
}
#navmenu > ul > li {
float: left;
position: relative;
border-right: 1px solid #CFCFCF;
}
#navmenu > ul > li > a {
color: #000;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 50px;
padding: 15px 20px;
border: none;
display: inline;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s
}
#navmenu > ul > li > a:hover,
#navmenu ul li a.highlight {
color: #fff;
background-color: #50A2EE;
}
#navmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 0px;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 150px;
width: 180px;
overflow: visible;
border: none;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu > ul > li:hover > ul {
opacity: 1;
top: 54px;
visibility: visible
}
#navmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 15px;
position: absolute;
top: -25px;
left: 10%;
margin-left: -10px
}
#navmenu > ul ul > li {
position: relative;
float: none;
border-bottom: 1px solid #ddd;
}
#navmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 10px 8px 12px 16px;
display: block;
border: none;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s
}
#navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
#navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
#navmenu ul ul li:last-child {
border-bottom: 0px;
}
#navmenu ul ul li:hover span {
-webkit-transform: rotate(90deg);
-ms-transform:rotate(360deg);
transform: rotate(90deg);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0px;
left: 206px;
padding: 0px;
background-color: #fafafa;
text-align: left;
width: 180px;
border: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu ul ul ul::before {
content: '';
display: block;
border-color: transparent #dbdbdb transparent transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: 10px;
left: -20px;
z-index: 1000;
}
#navmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible
}
#navmenu ul ul a:hover {
color: #f0f0f0;
background-color: #00A2E8;
}
#navmenu ul ul span {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KAwNzs44lmhcogEls4I11yX9utFX72ES9d86_W5FL0_KOah6vP4nwlmGENWAPZmc0pGAvau6vw7rqnX3Lnp4lq-CZ_cqg-2kkGcEH6hGHUT8wDNpNqqaRW_UtwGErMbgZ9boHdqJd9QG/s1600/hbz-arrow.png");
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
position: absolute;
right: 20px;
top: 10px;
width: 18px;
height: 18px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
var str = location.href.toLowerCase();
$('#navmenu ul li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li a.highlight").removeClass("highlight");
$(this).addClass("highlight")
}
});
$('#navmenu ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().addClass('highlights');
} });
$('#navmenu ul ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
$(this).parent().parent().parent().addClass('highlights');
$(this).parent().addClass('highlights');
} });
$("<span></span>").insertBefore("#navmenu ul ul ul");
$("#navmenu ul ul ul").parent().find("a").css({
"padding": "10px 28px 12px 16px"
});
$("#navmenu ul ul ul").hover(function() {
$(this).prev().css("opacity", "0");
}, function() {
$(this).prev().css("opacity", "1");
});
});
</script>
<style type="text/css">
#navmenu,
#navmenu ul,
#navmenu ul li,
#navmenu ul ul,
#navmenu ul ul li,
#navmenu ul ul ul,
#navmenu ul ul ul li {
z-index: 1000;
}
#navmenu ul {
margin: 0;
padding: 0
}
#navmenu li {
margin: 0;
padding: 0
}
#navmenu a {
margin: 0;
padding: 0
}
#navmenu ul {
list-style: none;
overflow: visible;
}
#navmenu a {
text-decoration: none
}
#navmenu {
background: -webkit-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
background: linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a1a1a1',GradientType=0 );
height: 50px;
box-shadow: 1px 1px 3px #C2C2C2;
width: auto;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#navmenu > ul > li {
float: left;
position: relative;
margin-left: 15px;
}
#navmenu > ul > li > a {
color: #fff;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 50px;
padding: 5px 15px;
border: none;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
text-shadow: 0px 2px 1px #C6C6C6;
display: inline;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s
}
#navmenu > ul > li > a:hover,
#navmenu ul li a.highlight {
color: #000;
background-color: #fff;
box-shadow: 1px 2px 3px #8d8d8d;
}
#navmenu ul ul a.highlight {
background-color: #F5F5F5;
}
#navmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 0px;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 54px;
width: 180px;
overflow: visible;
border: none;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu > ul > li:hover > ul {
opacity: 1;
top: 54px;
visibility: visible
}
#navmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 15px;
position: absolute;
top: -25px;
left: 10%;
margin-left: -10px
}
#navmenu > ul ul > li {
position: relative;
float: none;
border-bottom: 1px solid #ddd;
}
#navmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fff;
padding: 10px 8px 12px 16px;
display: block;
border: none;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s
}
#navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
}
#navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
border-radius: 0 0 15px 15px;
-webkit-border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
}
#navmenu ul ul li:last-child {
border-bottom: 0px;
}
#navmenu ul ul li:hover span {
animation: fade 1s forwards;
-webkit-animation: fade 1s forwards;
-moz-animation: fade 1s forwards;
-o-animation: fade 1s forwards;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
@keyframes fade {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes fade {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes fade {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-o-keyframes fade {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
#navmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0px;
left: 206px;
padding: 0px;
background-color: #fafafa;
text-align: left;
width: 180px;
border: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
#navmenu ul ul ul::before {
content: '';
display: block;
border-color: transparent #dbdbdb transparent transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: 10px;
left: -20px;
z-index: 1000;
}
#navmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible
}
#navmenu ul ul a:hover {
color: #000;
background-color: #F5F5F5;
}
#navmenu ul ul span {
border-color: transparent transparent transparent #777;
border-style: solid;
border-width: 5px;
display: block;
position: absolute;
right: 20px;
top: 14px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
var str = location.href.toLowerCase();
$('#navmenu ul li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li a.highlight").removeClass("highlight");
$(this).addClass("highlight")
}
});
$("<span></span>").insertBefore("#navmenu ul ul ul");
$("#navmenu ul ul ul").parent().find("a").css({
"padding": "5px 28px 7px 16px"
});
$("#navmenu ul ul ul").hover(function() {
$(this).prev().css("opacity", "0");
}, function() {
$(this).prev().css("opacity", "1");
});
$("#navmenu ul ul").hover(function() {
$(this).prev().addClass("highlightz");
}, function() {
$(this).prev().removeClass("highlightz");
});
function getRandomClass() {
var classes = new Array("a", "b", "c", "d", "e", "f");
var randomNumber = Math.floor(Math.random()*7);
return classes[randomNumber];
};
$("#navmenu ul ul li:has(ul)").hover(function() {
var randomClass = getRandomClass();
$(this).attr("class", randomClass);
});
$('#navmenu ul ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).removeClass('highlight');
$(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
}
});
$('#navmenu ul ul li a').each(function() {
if ($(this).hasClass('highlight')){
$(this).removeClass('highlight');
$(this).parent().parent().parent().children(':first-child').addClass('highlight');
}
});
});
</script>
<style type="text/css">
#navmenu ul ul li.a:hover a, #navmenu ul ul li.a:hover ul {
background-color: #65834C;
color: #fff;
}
#navmenu ul ul li.b:hover a, #navmenu ul ul li.b:hover ul {
background-color: #4F4C83;
color: #fff;
}
#navmenu ul ul li.c:hover a, #navmenu ul ul li.c:hover ul {
background-color: #4C7983;
color: #fff;
}
#navmenu ul ul li.d:hover a, #navmenu ul ul li.d:hover ul {
background-color: #834C4C;
color: #fff;
}
#navmenu ul ul li.e:hover a, #navmenu ul ul li.e:hover ul {
background-color: #4D6899;
color: #fff;
}
#navmenu ul ul li.f:hover a, #navmenu ul ul li.f:hover ul {
background-color: #97944C;
color: #fff;
}
#navmenu ul ul ul a:hover {
text-decoration: underline;
}
#navmenu,
#navmenu ul,
#navmenu ul li,
#navmenu ul ul,
#navmenu ul ul li,
#navmenu ul ul ul,
#navmenu ul ul ul li {
z-index: 1000;
}
#navmenu ul {
margin: 0;
padding: 0
}
#navmenu li {
margin: 0;
padding: 0
}
#navmenu a {
margin: 0;
padding: 0
}
#navmenu ul {
list-style: none;
overflow: visible;
}
#navmenu a {
text-decoration: none
}
#navmenu {
height: 50px;
background-color: #384959;
box-shadow: 0 0 3px rgb(206, 206, 206);
width: auto;
}
#navmenu > ul > li {
float: left;
position: relative;
}
#navmenu > ul > li > a {
color: #fff;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 50px;
padding: 15px 20px;
border: none;
display: inline;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s
}
#navmenu > ul > li > a:hover,
#navmenu ul li a.highlight,
#navmenu .highlightz {
color: #000;
background-color: #fff;
}
#navmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fff;
text-align: left;
position: absolute;
width: 180px;
overflow: visible;
border: none;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4)
}
#navmenu > ul > li:hover > ul {
opacity: 1;
visibility: visible
}
#navmenu > ul ul > li {
position: relative;
float: none;
}
#navmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fff;
padding: 5px 8px 7px 16px;
display: block;
border: none;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s
}
#navmenu ul ul li:hover {
background-color: #cc2c24;
}
#navmenu ul ul li:hover span {
right: 10px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul li:hover span::before {
border-color: transparent transparent transparent #fff;
}
#navmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 180px;
padding: 16px 0 20px 0;
background-color: #fff;
text-align: left;
width: 180px;
border: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
#navmenu ul ul > li:hover > ul {
opacity: 1;
visibility: visible
}
#navmenu ul ul a:hover {
color: #f0f0f0;
background-color: #214565;
}
#navmenu ul ul span::before {
content: '';
display: block;
border-color: transparent transparent transparent #000000;
border-style: solid;
border-width: 5px;
position: absolute;
z-index: 1001;
}
#navmenu ul ul li.highlights span::before {
border-color: transparent transparent transparent #fff;
}
#navmenu ul ul span:hover::before {
border-color: transparent transparent transparent #fafafa;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#navmenu ul ul span {
position: absolute;
right: 20px;
top: 10px;
}
</style>
Step 4. Click Save template.
COMMENTS