maybe, this is simpler than previous page menu style. but i am sure, Css code inside it is easier to understood. Because i was deliberately made it that way in order to ease you to understand css code.
okay, see the step below if you want to use this page menu
style on your blog. *like generally:
1. log in to your dashboard
2. go to layout/design menu
3. add gadget with HTML/javascript type.
4. then copy the code below and paste on HTML/javascript
gadget.
<style
type="text/css">
.menu {
z-index:9999;
text-transform:uppercase;
font-size:15px;
position:relative;
margin: 0 auto;
padding: 0 10px;
list-style:none;
height:32px;
background:#f0f0f0;
border:solid 1px #000;
}
.menu >li{
display:inline;
margin:0 auto;
position:relative;
padding:6px 1px;
text-align:center;
float:left;
}
.menu >li >a {
text-decoration:none;
background:#000;
color:white;
font-family:arial, calibri, trebuchet MS;
font-weight:bold;
padding: 4px 28px;
border:solid 2px #000;
}
.menu li a:hover {
background:#fff;
color:#000;
-moz-transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-google-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
}
.menu >li >a:visited, .child >li >a:visited {
background:#fff;
color:#000;
}
.child {
display:none;
position:absolute;
z-index:9999;
padding:0px;
width:150px;
}
.menu li:hover .child{
display:block;
top:30px;
}
.child >li{
padding:0px ;
display:block;
text-align:left;
position:relative;
border-bottom:solid 1px #fff;
}
.child >li:last-child{
border-bottom:solid 1px #000;
}
.child >li >a {
text-decoration: none;
border:solid 2px #000;
padding:5px;
background:#000;
color:white;
font-family:arial, calibri, trebuchet MS;
font-weight:bold;
display:block;
}
</style>
<ul
class="menu">
<!-- start menu
1-->
<li><a
href="#">menu 1</a></li>
<!-- end menu
1-->
<!-- start menu
2-->
<li><a
href="#">menu 2</a>
<ul
class="child">
<li><a
href="#">mn2 child 1</a></li>
<li><a
href="#">mn2 child 2</a></li>
<li><a
href="#">mn2 child 3</a></li>
</ul>
</li>
<!-- end menu
2-->
<!-- start menu
3-->
<li><a
href="#">menu 3</a>
<ul
class="child">
<li><a href="#">mn3 child 1</a></li>
<li><a
href="#">mn3 child 2</a></li>
<li><a
href="#">mn3 child 3</a></li>
</ul>
</li>
<!-- end menu
3-->
<!-- start menu 4-->
<li><a
href="#">menu 4</a>
<ul
class="child">
<li><a
href="#">mn4 child 1</a></li>
<li><a
href="#">mn4 child 2</a></li>
<li><a
href="#">mn4 child 3</a></li>
</ul>
</li>
<!-- end menu 4-->
</ul>
This is it Demo :
5. modify the red code to your url you like to linked.
6. modify the yellow code to change color on this menu.
remember!, adjust your page menu color with your template/blog design.
7. modify the green code to label for your menu, example “home”,
“About”, “contact us”, etc.
8. click save and place it on the top of your layout.
9. finish.
*tips: if you feel this page menu style is not comply with
your blog design, i strongly recommend you to don't use this page menu style.
that's all, if you have any questions, you can ask it on
comment box below, i looking forward for your response.
Happy Blogging :)
0 komentar:
Post a Comment