Drop downward Navigation bill of fare is an essential constituent of whatever weblog or website. Maintaining a clean, slow to utilisation navigation bill of fare is a huge constituent of creating an effective design. Too many links tin confuse a reader, piece likewise few tin move out them wondering what they’re missing. Influenza A virus subtype H5N1 driblet downward bill of fare is a non bad means to shroud extra links piece all the same making them available to curious readers. Drop downward menus tin assistance organize in addition to categorize content links. If your weblog contains a large total of data in addition to you’re interested inwards categorizing your links a piffling better, a driblet downward bill of fare powerfulness live the ticket! It helps visitors to easily teach the required content from the whole blog.
Since Blogger doesn’t offering the alternative to automatically add together a driblet downward bill of fare equally WordPress does, nosotros convey to brand our own. This requires a piffling chip of CSS in addition to HTML knowledge, but I volition walk yous through it hence it doesn’t appear hence confusing. The bill of fare I’ve position together is built exclusively amongst CSS3, HTML, jQuery in addition to JavaScript. You tin sentiment a exhibit of it here. While WordPress makes it slow to add together a driblet downward bill of fare (sub items), it’s a piffling to a greater extent than complicated on Blogger. We’ll basically live creating a listing within a list, in addition to all that’s needed is roughly extra code in addition to styling! To teach started, you’ll postulate to follow the below tutorial amongst images:
Adding The jQuery 2-Sub Drop Down Menu
Step 1. Login to your blogger draw of piece of job concern human relationship > Dashboard > Template > Edit HTML
Step 2. Click anywhere within the code in addition to detect the next code ( utilisation 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 postal service URL is /search?q=
or if your page URL is http://howbloggerz.blogspot.com/p/page.html
To brand certain that electrical flow page link highlighter industrial plant properly amongst Earth 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 habitation page link ( exercise non utilisation inwards 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 roughly other category nation "Group" earlier "About", house the next code only inwards 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 yous desire to add together sub-category to category "Group" in addition to hence house the next code only inwards 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 roughly other sub category inwards "Group" add together next code only inwards 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 yous desire to add together sub-sub category within "Group" inwards "Sub Group 1" add together the next code only inwards 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> in addition to house anyone of the next code only inwards 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 venture #214565;
}
#navmenu > ul > li {
float: left;
position: relative;
border-right: 1px venture #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 venture #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 venture #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/AVvXsEh2xNCzne9HFdcioiap2PYVM0WzNfL_9ver4LOKD7-2udUVQtSR-5GFVqGCcarawewJEMXK3rCAZXNFiqkKJgtbO1WX1wlzPbZ9Vg6CCj3oXYZmsGhplEHMYeHE3jkSw_eMZIx-Wz3tQZyE/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 venture #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");
});
role 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.
0 comments
Post a Comment