How To Add jQuery Drop Down Menu To Blogger
Drop downward Navigation carte du jour is an essential component subdivision of whatever spider web log or website. Maintaining a clean, slow to usage navigation carte du jour is a huge component subdivision of creating an effective design. Too many links tin confuse a reader, piece besides few tin larn out them wondering what they’re missing. Influenza A virus subtype H5N1 drib downward carte du jour is a groovy agency to cover extra links piece nevertheless making them available to curious readers. Drop downward menus tin assist organize as well as categorize content links. If your spider web log contains a large sum of data as well as you’re interested inwards categorizing your links a piffling better, a drib downward carte du jour mightiness live the ticket! It helps visitors to easily larn the required content from the whole blog.
Since Blogger doesn’t offering the pick to automatically add together a drib downward carte du jour every bit WordPress does, nosotros accept to brand our own. This requires a piffling flake of CSS as well as HTML knowledge, but I volition walk you lot through it therefore it doesn’t appear therefore confusing. The carte du jour I’ve pose together is built solely amongst CSS3, HTML, jQuery as well as JavaScript. You tin sentiment a exhibit of it here. While WordPress makes it slow to add together a drib downward carte du jour (sub items), it’s a piffling to a greater extent than complicated on Blogger. We’ll basically live creating a listing within a list, as well as all that’s needed is or therefore extra code as well as styling! To larn started, you’ll involve to follow the below tutorial amongst images:
Step 1. Login to your blogger job organisation human relationship > Dashboard > Template > Edit HTML
Step 2. Click anywhere within the code as well as detect the next code ( usage Ctrl + F ) :
Step 3. Just below </header> add together the next HTML code :
Step 4. Configuration of HTML code :
Say if your ship URL is
or if your page URL is http://howbloggerz.blogspot.com/p/page.html
To brand certain that electrical current page link highlighter industrial plant properly amongst province 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 total URL for domicile page link ( exercise non usage to a higher house format ).
<a href="#">Title</a>
To add together or therefore other category country "Group" earlier "About", house the next code only to a higher house it :
<li><a href="#">Group</a></li>
Example :
Say if you lot desire to add together sub-category to category "Group" as well as then house the next code only to a higher house 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 together or therefore other sub category inwards "Group" add together next code only to a higher house 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 lot desire to add together sub-sub category within "Group" inwards "Sub Group 1" add together the next code only to a higher house 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 detect the code </head> as well as house anyone of the next code only to a higher house it :
Step 4. Click Save template.
Since Blogger doesn’t offering the pick to automatically add together a drib downward carte du jour every bit WordPress does, nosotros accept to brand our own. This requires a piffling flake of CSS as well as HTML knowledge, but I volition walk you lot through it therefore it doesn’t appear therefore confusing. The carte du jour I’ve pose together is built solely amongst CSS3, HTML, jQuery as well as JavaScript. You tin sentiment a exhibit of it here. While WordPress makes it slow to add together a drib downward carte du jour (sub items), it’s a piffling to a greater extent than complicated on Blogger. We’ll basically live creating a listing within a list, as well as all that’s needed is or therefore extra code as well as styling! To larn started, you’ll involve to follow the below tutorial amongst images:
Adding The jQuery 2-Sub Drop Down Menu
Step 1. Login to your blogger job organisation human relationship > Dashboard > Template > Edit HTML
Step 2. Click anywhere within the code as well as detect the next code ( usage Ctrl + F ) :
</header>
Step 3. Just below </header> add together the next 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 # amongst the URL of the link.
Say if your ship URL is
or if your page URL is http://howbloggerz.blogspot.com/p/page.html
To brand certain that electrical current page link highlighter industrial plant properly amongst province 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 total URL for domicile page link ( exercise non usage to a higher house format ).
2. Replace the text within the code amongst championship of that specific URL.
<a href="#">Title</a>
3. How to add together to a greater extent than categories :
To add together or therefore other category country "Group" earlier "About", house the next code only to a higher house 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 together Sub-category :
Say if you lot desire to add together sub-category to category "Group" as well as then house the next code only to a higher house 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 together or therefore other sub category inwards "Group" add together next code only to a higher house 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 together Sub-sub category :
Say if you lot desire to add together sub-sub category within "Group" inwards "Sub Group 1" add together the next code only to a higher house 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 detect the code </head> as well as house anyone of the next code only to a higher house 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 bridge {
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 bridge {
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 corporation #214565;
}
#navmenu > ul > li {
float: left;
position: relative;
border-right: 1px corporation #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 bridge {
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 bridge {
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 corporation #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 corporation #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 bridge {
-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 bridge {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7f8TCEX7a1stXxvEtMMw3DljFxfkNam7_2zup1-60FQHdWPfBp-eRYLs2LqXfk0aTZ2Du8bY5R5CDWf9fZnq_Om3CgCV_wuvQvG5sf7C0KPEtDGb75pDVEY6XfxafAJwLfit4Di-vQWB0/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 corporation #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 bridge {
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 bridge {
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");
});
component subdivision getRandomClass() {
var classes = novel Array("a", "b", "c", "d", "e", "f");
var randomNumber = Math.floor(Math.random()*7);
provide 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 bridge {
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 bridge {
position: absolute;
right: 20px;
top: 10px;
}
</style>
Step 4. Click Save template.
Belum ada Komentar untuk "How To Add jQuery Drop Down Menu To Blogger"
Posting Komentar