Iklan
Anda di sini : / / Cara Membuat MENU NAVIGASI HORISONTAL Menggunakan CSS dan HTML

Cara Membuat MENU NAVIGASI HORISONTAL Menggunakan CSS dan HTML


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 CSS dibawah 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 )

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML
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 :

 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 :
Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML
Klik untuk memperbesar gambar

4. Pada gambar diatas adalah contoh Menu Horisontal milik saya.
Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML
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 judulnya lalu 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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML


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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

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..


Pinterest
More
Less
Tumblr
Mix
GMail
LinkedIn
Reddit
XING
WhatsApp
Hacker News
VK
Telegram
OK
Messenger
Line
Copy Link
Next
Prev Post
Previous
Next Post

1 comment:

  1. AnonymousJanuary 20, 2016 at 10:11 PM

    wah mantap nih desain menu nav nya.bisa dicoba buat blog saya nih.

    ReplyDelete

Subscribe to: Post Comments (Atom)