Membuat Menu Navigasi
1.
Pertama , silahkan masuk ke editor template terlebih
dahulu
2.
Kemudian Pasang kode css berikut , tepat diatas
kode ]]></b:skin> atau </style> cara mencari lebih mudah adalah tekan
CTRL + F pada keyboard
/*
NAVIGATION MENU 2 */
|
.toggleMenu{display:none;background:#E73138;padding:0
15px;height:48px;line-height:48px;color:#fff!important}
|
#nav{font:normal
bold 12px
Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
|
.nav-menu2{background:#333333;list-style:none;margin:0
0 0 0;*zoom:1;float:left}
|
.nav-menu2:before,.nav-menu2:after{content:"
";display:table}
|
.nav-menu2:after{clear:both}
|
.nav-menu2
ul{list-style:none;margin:0 0 0 0;width:12em}
|
.nav-menu2
a{display:block;padding:0 15px}
|
.nav-menu2
li{position:relative;margin:0 0}
|
.nav-menu2
> li{float:left}
|
.nav-menu2
> li >
a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0
#333333 inset}
|
.nav-menu2
> li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
|
.nav-menu2
> li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
|
.nav-menu2
li
ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all
.25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all
.25s ease-out;transition:all .25s ease-out;border:1px solid
#d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px
rgba(0,0,0,0.2)}
|
.nav-menu2
li li ul{left:100%;top:-1px}
|
.nav-menu2
> li.hover > ul{visibility:visible;opacity:10}
|
.nav-menu2
> li >
ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent
transparent #fff transparent;display:block}
|
.nav-menu2
li li.hover ul{visibility:visible;opacity:10}
|
.nav-menu2
li li
a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
|
.nav-menu2
li li a:hover{background:#f0f0f0}
|
.nav-menu2
li li li a{background:#fff;z-index:20;color:#333}
|
.nav-menu2
li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
|
#search-form{background:#333333;float:right;margin:0
0;width:200px}
|
#search-form
table{width:100%;margin:0 0 0 0}
|
#search-form
td.search-box{padding-right:30px}
|
#search-form
input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px
0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
|
#search-form
input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px
10px 5px 0;padding:0 12px;border:none;outline:none;transition:all
0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
|
#search-form
input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
|
#search-form
input#search-box[type="text"]:focus{background:#eee;outline:none}
|
3.
Untuk
memanggil kode css diatas silahkan pasang htmlnya , caranya pasang kode dibawah
ini tepat dibawah kode </header>
<nav id='nav'>
|
<!-- secondary navigation menu start
-->
|
<ul class='nav nav-menu2'>
|
<li><a class='active'
href='https://blogskomcom.blogspot.co.id/'><i class='fa fa-home'/>
Home</a></li>
|
<li><a
href='http://blogskomcom.blogspot.co.id/p/privacy-policy.html'>Privacy
Policy</a>
|
<ul>
|
<li><a href='#'>Sub Menu
1</a></li>
|
<li><a href='#'>Sub Menu
2</a></li>
|
<li><a href='#'>Sub Menu
3</a></li>
|
</ul>
|
</li>
|
<li>
|
<ul>
|
<li><a href='#'>Sub Menu
1</a>
|
</li>
|
<li><a href='#'>Sub Menu
2</a></li>
|
<li><a href='#'>Sub Menu
3</a></li>
|
</ul>
|
</li>
|
<li><a
href='http://blogskomcom.blogspot.co.id/p/contact-us.html'>Disclaimer</a></li>
|
<li><a
href='http://blogskomcom.blogspot.co.id/p/about.html'>About
us</a></li>
|
<li><a href='http://blogskomcom.blogspot.co.id/p/contak.html'>Contact
us</a></li>
|
<li><a
href='http://zakky67.blogspot.co.id/'>TEKNOLOGI</a></li>
|
</ul>
</nav> |
Jika sudah silahkan save template
EmoticonEmoticon