Salam Blogger, Artikel BLOGINGPASURUAN kali ini tentang tutorial “Cara Membuat MENU NAVIGASI HORISONTAL menggunakan CSS dan HTML 2014”. Menu Navigasi Horisontal ini memiliki peran yang sangat penting dalam desain Blog, selain mempercantik blog tujuannya tak lain mempermudah pengunjung blog mengakses semua yang ada di dalam Blog Sobat.
Disini sobat Blogger akan saya sajikan beberapa desain Menu Horisontal, dan Sobat Blogger bisa memilihnya sendiri sesuai selera.
Bagaimana cara membuat Menu Navigasi Horisontal, berikut ini langkah langkahnya :
1. Silahkan Sobat masuk ke Akun BLOGGER Sobat
2. Pilih Template >> Pilih EDIT HTML
Catatan: Silahkan BACKUP dulu template Sobat, hal ini mencegah jika terjadi kesalahan sobat tidak kehilangan DESAIN TEMPLATE Sobat sebelumnya. Caranya lihat sebelah kanan atas menu EDIT HTML lalu tekan backup/restore atau cadangkan/pulihkan.
3. Cari kode berikut ]]></b:skin>
4. Letakkan ( setiap kode CSSdibawah ini ) diatas kode ]]></b:skin>
5. Simpan Template
6. Kemudian masuk ke LAYOUT ( Tata Letak )
7. Pilih Add gadget, Kemudian masukkan kode HTML ( dibawah ini ) dalam kotak HTML lalu tekan SAVE/Simpan ( lihat gambar di bawah ini )
 |
| klik untuk melihat gambar lebih besar |
Posisi tambah gadget untuk menambahkan kode HTML-nya adalah seperti contoh diatas.
8. Selesai dan lihat hasilnya
CATATAN : Pertanyaannya, Bagaimana jika tidak memiliki desain kolom dibawah header, atau saya sudah memiliki MENU HORISONTAL namun tampilan kurang menarik ?
Okey… BLOGGINGPASURUAN akan sedikit menjelaskan jika ada pertanyaan seperti diatas, karena desain template tentunya berbeda antara satu dengan yang lainnya, Problem seperti pertanyaan diatas tentunya ada.
Langsung saja saya jelaskan :
Langsung saja saya jelaskan :
1. Langkah diatas harus tetap dilakukan kecuali no. 6 sampai dengan no. 8
2. Setelah Sobat selesai melakukan langkah ke 5
3. Silahkan sobat masuk ke TEMPLATE kemudian pilih EDIT HTML ( jangan keluar dari menu ini )
Perhatikan gambar dibawah ini :
 |
| Klik untuk memperbesar gambar |
4. Pada gambar diatas adalah contoh Menu Horisontal milik saya.
 |
| Klik untuk memperbesar gambar |
5. Pada gambar diatas lihat no. 2 dan 3
- Lihar gambar no. 2 (Pada menu EDIT HTML ketik Ctrl + F ) : kemudian ketik salah satu judul Menu Horisontal milik sobat (saya mengetikan judul BERANDA judul menu horisontal milik saya )
- Setelah Sobat ketik judulnyalalu tekan ENTER.
- Lihat gambar no. 3 , Yang saya blok warna abu abu adalah kode HTML yang harus Sobat ganti dengan kode HTML dibawah ini.
- Ingat jangan hapus kode yang saya tulis “ jangan hapus kode ini “
Di bawah ini 10 contoh menu horisontal berikut kode CSS dan HTML nya :
Horizontal menu bar: Desain #1
Kode CSS
#Hr-1 {
list-style:none;
margin:0 0 0px 0;
padding:0;
}
#Hr-1 li {
margin:0;
padding:0;
float:left;
}
#Hr-1 li a {
display:inline;
overflow:hidden;
width:auto;
margin:0;
padding:8px 12px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-weight:bold;
font-style:normal;
font-size:23px;
color:rgba(236,236,236,0.5);
text-shadow:0px 1px 0px #000;
border-right:1px solid #202020;
background-color::#4B4B4B;
background:-webkit-gradient(linear,left top,right bottom,from(#2B2B2B),color-stop(0.33 #4B4B4B),color-stop(0.66 #5B5B5B),to(#3D3C3C));
background:-webkit-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:-moz-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:-o-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:-ms-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-o-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}
#Hr-1 li a:hover,#Hr-1 li a:active,#Hr-1 li a:focus {
color:#ECB036;
text-shadow:0px 1px 0px #8E620C;
background:#313130;
-moz-transition:none;-webkit-transition:none;-o-transition:none;transition:none;
}
Kode HTML
<ul id="Hr-1">
<li><a href=" http://bloggingpas.blogspot.com" target="_blank">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Horizontal Menu Bar: Desain #2
KODE CSS
#Hr-2 {
list-style:none;
margin:0 0 10px; 0;
padding:0;
}
#Hr-2 li {
margin:0;
padding:0;
float:left;
}
#Hr-2 li a {
display:inline;
position:relative;
margin:0;
padding:10px 13px;
width:auto;
height:auto;
text-decoration:none;
text-align:center;
font-style:normal;
font-size:24px;
font-weight:bold;
color:#2B2B2B;
text-shadow:0px 1px 0px #1F1F1F;
text-transform:capitalize;
border-right:1px solid #666562;
background:-webkit-gradient(100% 0%,0% 0%,from(#ABA9A6),color-stop(0.35 rgba(177,176,173,0.6)),color-stop(0.70 #A3A19D),to(#92908C));
background:-moz-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:-webkit-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:-o-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:-ms-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
-moz-transition:all .8s ease-out;
-webkit-transition:all .8s ease-out;
transition:all .8s ease-out;
}
#Hr-2 li a:hover,#Hr-2 li a:active {
color:rgba(244,244,244,0.3);
text-shadow:0px 1px 0px #545453;
background:-webkit-gradient(100% 0%,0% 0%,from(#999896),color-stop(0.35 rgba(177,176,173,0.6)),color-stop(0.70 #A3A19D),to(#817F7A));
background:-moz-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:-webkit-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:-o-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:-ms-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
-moz-transition:all .6s ease-in;
-webkit-transition:all .6s ease-in;
transition:all .6s ease-in;
}
KODE HTML
<ul id="Hr-2">
<li><a href="http://bloggingpas.blogspot.com" target="_blank">Home</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Term of Service</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Horizontal menu bar: Desain #3
KODE CSS
#Hr-4 {
list-style:none;
margin:0;
padding:0;
float:left;
}
#Hr-4 li {
margin:0;
padding:0;
float:left;
}
#Hr-4 li a {
display:inline;
float:left;
overflow:hidden;
margin:0;
width:auto;
height:auto;
padding:10px 12px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:25px;
border-right:1px dotted #1C1C1C;
color:#ECECEC;
font-family:'Comic Sans MS',cursive;
background:#2C2C2C;
background:-webkit-gradient(linear,left top,right bottom,from(#101010),color-stop(0.35 #2C2C2C),color-stop(0.73 #545252),color-stop(0.90 #3F3C3C),to(#2A2727));
background:-webkit-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-moz-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-o-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-ms-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
}
#Hr-4 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-4 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-4 li a:hover,#Hr-4 li a:focus {
background:#2C2C2C;
color:#4A75F7;
cursor:pointer;
}
KODE HTML
<ul id="Hr-4">
<li><a href="http://bloggingpas.blogspot.com" target=”_blank">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Social media</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Horizontal menu bar: Desain #4
KODE CSS
#Hr-5 {
list-style:none;
margin:0;
padding:0;
float:left;
}
#Hr-5 li {
float:left;
margin:0;
padding:0;
}
#Hr-5 li a {
display:inline;
float:left;
width:auto;
height:auto;
overflow:hidden;
margin:0;
padding:9px 13px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-weight:bold;
font-size:24px;
font-style:normal;
color:#F2EFEF;
border-right:1px dotted #060606;
background:#222121;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#131212,0),color-stop(#222121,0.4),color-stop(#474646,0.8),color-stop(#3C3939,1));
background:-webkit-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: -moz-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: -o-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
-moz-transition:0.5s ease-out;
-webkit-transition:0.5s ease-out;
transition:0.5s ease-out;
}
#Hr-5 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-5 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-5 li a:hover,#Hr-5 li a:active {
background-color:#3047DB;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#3047DB,0),color-stop(#3088DB,0.4),color-stop(#48AAE7,0.8),color-stop(#48BAE7,1));
background:-webkit-linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
background: -moz-linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
background: -o-linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
background: linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
color:#97410F;
-moz-transition:0.5s ease-in;
-webkit-transition:0.5s ease-in;
transition:0.5s ease-in;
border-right:1px solid transparent;
}
KODE HTML
<ul id="Hr-5">
<li><a href=http://bloggingpasuruan.blogspot.com target="_blank">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Social media</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Horizontal menu bar: Desain #5
KODE CSS
#Hr-6 {
list-style:none;
margin:0 0 10px 0;
padding:0;
float:left;
}
#Hr-6 li {
margin:0;
padding:0;
float:left;
}
#Hr-6 li a {
display:inline;
margin:0;
overflow:hidden;
padding:10px 12px;
float:left;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:24px;
width:auto;
height:auto;
color:#EAEEEE;
background:#994A22;
border-right:1px solid #A1721A;
background:-webkit-gradient(linear,left top,left bottom,from(#643118),color-stop(0.35 #924C29),color-stop(0.70 #9D4214),to(#6C2B0A));
background:-webkit-linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:-moz-linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:-o-linear-gradient:(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:-ms-linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#643118, endColorstr=#6C2B0A);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#643118, endColorstr=#6C2B0A)";
font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
}
#Hr-6 li a:hover,#Hr-6 li a:focus {
background:#843F20;
-moz-box-shadow:inset 0px 0px 2px 2px #5E2710;
-webkit-box-shadow:inset 0px 0px 2px 2px #5E2710;
box-shadow:inset 0px 0px 2px 2px #5E2710;
color:#F2F4F4;
}
#Hr-6 li a:active {
position:relative;
top:0px;
-moz-box-shadow:inset 0px 0px 4px 2px #5E2710;
-webkit-box-shadow:inset 0px 0px 4px 2px #5E2710;
box-shadow:inset 0px 0px 4px 2px #5E2710;
}
#Hr-6 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-6 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
KODE HTML
<ul id="Hr-6">
<li><a href="http://bloggingpasuruan.blogspot.com" target=”_blank”> Home</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Horizontal menu bar: Desain #6
KODE CSS
#Hr-10 {
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-10 li {
margin:0;
padding:0;
float:left;
}
#Hr-10 li a {
float:left;
display:inline;
overflow:hidden;
white-space:nowrap;
width:auto;
height:auto;
margin:0;
padding:10px 13px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
line-height:auto;
font-style:normal;
font-size:26px;
color:#5B5B5A;
text-shadow:0 1px 0 #222,0 1px 0 #222;
border-right:1px solid #B69D2E;
font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
background:-webkit-gradient(left top,left bottom,from(#DDC432),color-stop(0.50 #EFC700),to(#C9A017));
background:-webkit-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:-moz-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:-o-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:-ms-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
}
#Hr-10 li a:hover,#Hr-10 li a:focus {
color:blue;
-moz-box-shadow:inset 0 0 2px 1px #D3A50F;
-webkit-box-shadow:inset 0 0 2px 1px #D3A50F;
box-shadow:inset 0 0 2px 1px #D3A50F;
background:#E5CF2C;
}
#Hr-10 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-10 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
#Hr-10 li a:active {
-moz-box-shadow:inset 0 0 4px #D3A50F;
-webkit-box-shadow:inset 0 0 4px #D3A50F;
box-shadow:inset 0 0 4px #D3A50F;
}
KODE HTML
<ul id="Hr-10">
<li><a href="http://bloggingpasuruan.blogspot.com" target="_blank">Home</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
Horizontal menu bar: Desain #7
KODE CSS
#Hr-16 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-16 li {
margin:0;
padding:0;
float:left;
}
#Hr-16 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#555452;
background:#29BCFB;
border:1px solid #707071;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
color:#F6F6F8;
text-shadow:0px -1px 0px black;
-moz-transition:all 310ms ease-in-out 0s;
-webkit-transition:all 310ms ease-in-out;
-o-transition:all 310ms ease-in-out;
transition:all 310ms ease-in-out;
}
#Hr-16 li a:hover {
box-shadow:inset 0px 60px 0px 0px #4B83F4;
-moz-transition:all 270ms ease-in-out 0s;
-webkit-transition:all 310ms ease-in-out;
-o-transition:all 270ms ease-in-out;
transition:all 270ms ease-in-out;
}
KODE HTML
<ul id="Hr-16">
<li><a href="http://bloggingpasuruan.blogspot.com" target="_blank">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
Horizontal menu bar: Desain #8
KODE CSS
#Hr-17 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-17 li {
margin:0;
padding:0;
float:left;
}
#Hr-17 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
overflow:hidden;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
border:1px ridge #DB7C08;
text-shadow:0px -2px 1px #E4C31F,0px -1px 1px #E4C31d;
-moz-border-radius:20px 0px 20px 0px;
-webkit-border-radius:20px 0px 20px 0px;
border-radius:20px 0px 20px 0px;
color:#5F5F60;
-moz-box-shadow:6px 0px 0px 0px #DBB408;
-webkit-box-shadow:6px 0px 0px 0px #DBB408;
box-shadow:6px 0px 0px 0px #DBB408;
background:#EED51C;
background:-webkit-gradient(linear,left top,left bottom,from(#EED51C),to(#E8C84B));
background:-webkit-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-moz-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-o-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-ms-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:linear-gradient(top,#EED51C 0%,#E8C84B 100%);
-moz-transition:all 0.6s ease-out;
-webkit-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
}
#Hr-17 li a:hover {
-moz-border-radius:25px 0px 25px 0px;
-webkit-border-radius:25px 0px 25px 0px;
border-radius:25px 0px 25px 0px;
-moz-box-shadow:inset 0px 0px 50px 0px #14B946;
-webkit-box-shadow:inset 0px 0px 50px 0px #14B946;
box-shadow:inset 0px 0px 50px 0px #14B946;
text-shadow:none;
-moz-transition:all 0.4s ease-in;
-webkit-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;
transition:all 0.4s ease-in;
}
KODE HTML
<ul id="Hr-17">
<li><a href="http://bloggingpasuruan.blogspot.com" target="_blank">Home</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
</ul>
Horizontal menu bar: Desain #9
KODE CSS
#Hr-19 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-19 li {
margin:0;
padding:0;
float:left;
}
#Hr-19 li a {
overflow:hidden;
display:inline;
float:left;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
text-shadow:0 -1px 2px #bbb;
color:#1D19A3;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
border:1px solid #545454;
-moz-border-radius:0 0 16px 16px;
-webkit-border-radius:0 0 16px 16px;
border-radius:0 0 16px 16px;
background:rgba(175,77,194,0.80);
background:-webkit-gradient(linear,left top,left bottom,from(#8F57CB),color-stop(0.40 rgba(175,77,194,0.80)),to(#C24DA1));
background:-webkit-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:-moz-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:-o-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:-ms-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
-moz-transition:all 0.45s ease;
-webkit-transition:all 0.45s ease;
-o-transition:all 0.45s ease;
transition:all 0.45s ease;
}
#Hr-19 li a:hover {
background:yellow;
-moz-box-shadow:inset 0 100px 0 0 #EFB849;
-webkit-box-shadow:inset 0 100px 0 0 #EFB849;
box-shadow:inset 0 100px 0 0 #EFB849;
-moz-transition:all 0.45s ease;
-webkit-transition:all 0.45s ease;
-o-transition:all 0.45s ease;
transition:all 0.45s ease;
}
KODE HTML
<ul id="Hr-19">
<li><a href="http://bloggingpasuruan.blogspot.com" target="_blank">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Why us ?</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Horizontal menu bar: Desain #10
KODE CSS
#Hr-20 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-20 li {
margin:0;
padding:0;
float:left;
}
#Hr-20 li a {
position:relative;
display:inline;
padding:11px 14px;
overflow:hidden;
text-decoration:none;
text-align:center;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
border-top:5px solid #323233;
border-bottom:5px solid #323233;
text-shadow:0 -1px 1px #bbb;
color:#E9E9F2;
background:#575759;
background:-webkit-gradient(linear,left top,left bottom,from(#3E3E41),color-stop(0.45 #575759),to(#424244));
background:-webkit-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:-moz-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:-o-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:-ms-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
}
#Hr-20 li a:hover::before {
content:'';
width:0;
height:0;
position:absolute;
top:0;
right:43%;
border-top:11.5px solid #FFCC00;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
}
KODE HTML
<ul id="Hr-20">
<li><a href="http://bloggingpasuruan.blogspot.com" target="_blank">Home</a></li>
<li><a href="l#">Web Design</a></li>
<li><a href="l#">Blogging</a></li>
<li><a href="l#">Promotion</a></li>
<li><a href="l#">SEO</a></li>
<li><a href="l#">Contact</a></li>
<li><a href="l#">About</a></li>
</ul>
Demikian 10 macam MENU HORISONTAL Keren yang bisa Sobat pilih untuk mempercantik Blog. Selamat Mencoba..............................
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat MENU NAVIGASI HORISONTAL Menggunakan CSS dan HTML. Semoga bermanfaat dan terima kasih..