CSS Menu Navigasi Title Dengan 6 Pilihan

CSS Menu Navigasi Title Dengan 6 Pilihan - Banyak cara menampilkan label-label blog kepada pengunjung, salah satunya adalah dengan tampilan Menu Navigasi. Barang kali sahabat semua sudah bosan dengan bentuk desain menu navigasi blog saat ini, ingin mengubah tampilannya.?. Berikut tampilan CSS Menu Navigasi Title Dengan 6 Pilihan yang terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.




DEMO SHOW

BACA JUGA

Elemen Data HTML Template Halaman Komentar


Anda cukup pilih salah satu bentuk tampilan menu navigasi title pada elemen CSS dibawah ini. Agar lebih mudah, nama menu sudah saya beri warna MERAH, kode lengkapnya seperti ini:

.navigasi {margin: 0 auto}
#menu1 {
  background: #000;border-bottom: 3px solid #DC143C;
  display: inline-block;margin: 10px 0;
  position: relative;width: 100%;z-index: 999}

#menu1 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu1 ul li {border-right:1px dotted #999;float:left;margin:0;padding:0;position:relative}
#menu1 ul li a {
  color: #fff;display: block;font: italic 18px "Georgia";
  min-width: 5.5em;padding: .25em .5em;transition: all 0.5s ease 0s}

#menu1 ul li a span {display: block}
#menu1 ul li a .title {border-bottom: 1px dotted #999;padding: 0 0 .25em}
#menu1 ul li a .exp {
  font-size: 12px;padding: .25em 0 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);-khtml-opacity: 0;
  -moz-opacity: 0;opacity: 0;text-align: right}

#menu1 ul li a:hover {background:#DC143C;color:#fff;text-shadow:1px 2px 1px #111}
#menu1 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);-khtml-opacity: 1;-moz-opacity: 1;
  opacity: 1;color:#FFFF00}

#menu2 {
  background-image:linear-gradient(#ccc, #888, #ccc);
  border-bottom: 2px solid #666;border-top: 2px solid #666;
  display: inline-block;position: relative;
  width: 100%;height:38px;z-index: 999}

#menu2 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu2 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu2 ul li a {
  font:bold 17px/30px sans-serif;transition:all 0.5s linear 0s;
  color:#111;display:block}

#menu2 ul li a span {display: block;}
#menu2 ul li a .title {text-align:center}
#menu2 ul li a .exp {
  background: rgba(0, 0, 0, 0.75);bottom: -5px;
  color: #f0f0f0;font: bold italic 12px/1 sans-serif;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: 5px;position: absolute;right: 0;
  height:38px;width:92%;text-align: right;
  transition: all 0.5s linear 0s}

#menu2 ul li a:hover {background: #e0e0e0;color: #000;}
#menu2 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu3 {
  background: #DC143C;display: inline-block;margin: 10px 0;
  position: relative;width: 100%;z-index: 999}

#menu3 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu3 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu3 ul li a {
  color: #fff;text-shadow:1px 2px 1px #111;
  display: block;font: 18px Georgia;min-width: 6em;
  margin: 0;padding: .5em .5em;transition: all 0.3s linear 0s}

#menu3 ul li a span {display: block;transition: all 0.3s linear 0s}
#menu3 ul li a .title {
  border-bottom: 1px solid;border-top: 3px double;
  padding-bottom:3.5px;margin-bottom: .5em;text-align: center}

#menu3 ul li a .exp {
  color: #fff;font: 11px/1 Georgia;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  text-align: center;text-transform: uppercase}

#menu3 ul li a:hover {background: rgba(255, 0, 0, 0.1);}
#menu3 ul li a:hover .title {color:yellow;}
#menu3 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu4 {
  background: #00FF7F;display: inline-block;margin: 10px 0;
  padding: 0;position: relative;width: 100%;z-index: 999}

#menu4 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu4 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu4 ul li a {
  color: #333;display: block;font: bold 17px/1.5em sans-serif;
  min-width: 6em;margin: 0;padding: .25em .5em;transition: all 0.3s linear 0s}

#menu4 ul li a span {display: block;transition: all 0.3s linear 0s}
#menu4 ul li a .title {text-align: center}
#menu4 ul li a .exp {
  background: #FFC730;color: #333;font: bold 11px/1.5 Calibri;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: 0 .75em 0 0;text-align: center;border-radius:8px}

#menu4 ul li a:hover {background:#DC143C;border-radius:25px;box-shadow:inset 0 3px 0 0 #fff;}
#menu4 ul li a:hover .title {color: #fff;text-shadow:1px 2px 1px #111}
#menu4 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu5 {
  background: #FFF;display: inline-block;margin: 10px 0;
  padding: 0;position: relative;width: 100%;z-index: 999}

#menu5 ul {list-style: none;margin: 0;padding: 0;position: relative;}
#menu5 ul li {
  border-left: 5px solid #888;float: left;margin: 0;
  padding: 0;position: relative}

#menu5 ul li:last-child {border-right: 5px solid #888}
#menu5 ul li a {
  color: #888;display: block;font: bold 18px/1.5em sans-serif;
  min-width: 6em;margin: 0}

#menu5 ul li a span {display: block;transition: all 0.5s linear 0s}
#menu5 ul li a .exp {
  color: #c00;font: bold 11px/1.5 sans-serif;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;padding: .25em 0 0;text-align: right;
  text-transform: uppercase}

#menu5 ul li a .exp:before {content: attr(data-hex) "\00a0";font: 18px/1 sans-serif}
#menu5 ul li a:hover .title {
  color: #fff;text-shadow:1px 2px 1px #111;
  background:#DC143C;width:6em;padding-left:5px}

#menu5 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu6 {
  background: #39f;border-radius: 10em;display: inline-block;
  margin: 10px 0;padding: 0;position: relative;width: 100%;z-index: 999}

#menu6 ul {
  float: right;list-style: none;margin: 0;
  padding: 0;position: relative;right: 50%}

#menu6 ul li {float: left;left: 50%;margin: 0;padding: 0;position: relative}
#menu6 ul li a {
  color: #00008B;display: block;border:4px double #39f;
  font:bold 14px/1.5em "Georgia";min-width: 8em;
  margin: 0;padding: .25em;text-align: center;
  text-transform: uppercase;transition: all 0.5s linear 0s}

#menu6 ul li a span {display: block;transition: all 0.5s linear 0s}
#menu6 ul li a .title {border-bottom: 2px solid #ccc}
#menu6 ul li a .exp {
  color: #FFFF00;font: 10px Georgia;letter-spacing: 1px;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: .25em 0 0;text-align: center}

#menu6 ul li a:hover {background: #DC143C;border:4px double #ccc}
#menu6 ul li a:hover .title {color: #fff;text-shadow:1px 2px 1px #111}
#menu6 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100); opacity: 1}

Untuk Pemanggil HTML, cukup gunakan 1 atribut id pada menu navigasi title pilihan Anda, lalu ganti teks link-Url sesuai nice blog Anda pada kode yang saya beri warna Orange seperti ini:

<div class="navigasi">
   <div id="menu1"> <!..Tampilan Menu Navigasi 1 ..!>
<ul>
<li><a href="/"><span class="title">menu1</span><span class="exp">menu1</span></a></li>
<li><a href="/"><span class="title">menu2</span><span class="exp">menu2</span></a></li>
<li><a href="/"><span class="title">menu3</span><span class="exp">menu3</span></a></li>
<li><a href="/"><span class="title">menu4</span><span class="exp">menu4</span></a></li>
<li><a href="/"><span class="title">menu5</span><span class="exp">menu5</span></a></li>
</ul>
   </div>

   <div id="menu2">  <!..Tampilan Menu Navigasi 2 ..!>
<ul>
<li><a href="/"><span class="title">menu1</span><span class="exp">menu1</span></a></li>
<li><a href="/"><span class="title">menu2</span><span class="exp">menu2</span></a></li>
<li><a href="/"><span class="title">menu3</span><span class="exp">menu3</span></a></li>
<li><a href="/"><span class="title">menu4</span><span class="exp">menu4</span></a></li>
<li><a href="/"><span class="title">menu5</span><span class="exp">menu5</span></a></li>
</ul>
   </div>

   <div id="menu3"> <!..Tampilan Menu Navigasi 3 ..!>
<ul>
<li> .... </li>
.....
....
//dan seterusnya....
</ul>
   </div>
</div><!..ending navigasi..!>