.
Add MultiLevel CSS Menu To Blogspot
Add MultiLevel CSS Menu To Blogspot
0) Preparation
Select a template for the blog, e.g. Awesome Inc Template.
1) Add Gadget To Layout
Default Templates have a Cross-Column Section wherein a menu gadget can be inserted as HTML/JavaScript Gadget.
Select HTML/JavaScript Gadget.
2) Add HTML and STYLE codes.
By default the tabs section does not allow overflow property that will be used by the menu.
We need to override the properties as shown in the highlighted statement below.
Copy the whole codes below and paste them into the HTML/JavaScript Gadget above.
<style>
/* override existing property values */
.tabs-outer {overflow: visible;}
.tabs .widget ul {overflow:visible;}
/* set the margin and padding to 0 */
.tabs-inner{padding:0px;}
.tabs .section {margin:0px;}
#menu ul {
margin: 0;
padding: 0;
}
#menu .main-menu {
display: none;
}
#tm:checked + .main-menu {
display: block;
}
#menu input[type="checkbox"],
#menu ul span.drop-icon {
display: none;
}
#menu li,
#toggle-menu,
#menu .sub-menu {
border-style: solid;
border-color: rgba(0, 0, 0, .05);
}
#menu li,
#toggle-menu {
border-width: 0 0 1px;
}
#menu .sub-menu {
background-color: #444;
border-width: 1px 1px 0;
margin: 0 1em;
}
#menu .sub-menu li:last-child {
border-width: 0;
}
#menu li,
#toggle-menu,
#menu a {
position: relative;
display: block;
color: white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}
#menu {
background-color: #09c;
}
#toggle-menu {
background: #333;
}
#toggle-menu,
#menu a {
padding: 1em 1.5em;
}
#menu a {
transition: all .125s ease-in-out;
-webkit-transition: all .125s ease-in-out;
}
#menu a:hover {
background-color: white;
color: #09c;
}
#menu .sub-menu {
display: none;
}
#menu input[type="checkbox"]:checked + .sub-menu {
display: block;
}
#menu .sub-menu a:hover {
color: #444;
}
#toggle-menu .drop-icon,
#menu li label.drop-icon {
position: absolute;
right: 0;
top: 0;
}
#menu label.drop-icon, #toggle-menu span.drop-icon {
padding: 1em;
font-size: 1em;
text-align: center;
background-color: rgba(0, 0, 0, .125);
text-shadow: 0 0 0 transparent;
color: rgba(255, 255, 255, .75);
}
@media only screen and (min-width: 1024px) {
#menu .main-menu {
display: block;
}
#toggle-menu,
#menu label.drop-icon {
display: none;
}
#menu ul span.drop-icon {
display: inline-block;
}
#menu li {
float: left;
border-width: 0 1px 0 0;
}
#menu .sub-menu li {
float: none;
}
#menu .sub-menu {
border-width: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
width: 12em;
z-index: 3000;
}
#menu .sub-menu,
#menu input[type="checkbox"]:checked + .sub-menu {
display: none;
}
#menu .sub-menu li {
border-width: 0 0 1px;
}
#menu .sub-menu .sub-menu {
top: 0;
left: 100%;
}
#menu .sub-menu .drop-icon {
position: absolute;
top: 0;
right: 0;
padding: 1em;
}
#menu li:hover > input[type="checkbox"] + .sub-menu {
display: block;
}
}
</style>
<nav id="menu" >
<label for="tm" id="toggle-menu">Navigation <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm" />
<ul class="main-menu cf">
<li><a href="../#">Home</a></li>
<li><a href="../p/tentang-kami.html">About Us</a></li>
<li><a href="#">Categories
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm0">▾</label>
</a>
<input type="checkbox" id="sm0" />
<ul class="sub-menu">
<li><a href="../#programming">Programming</a></li>
<li><a href="../#multimedia">Multimedia</a></li>
<li><a href="../#database">Database</a></li>
</ul>
</li>
<li><a href="../#contact">Contact Us</a></li>
<li><a href="../#location">Our Location</a></li>
</ul>
</nav>
|
No comments:
Post a Comment