Langsung ke konten utama

Silver Transparent Horizontal Navigation

Silver Transparent Horizontal Navigation  - Rasa dahaga saya untuk terus berbagi cara dalam membuat menu navigasi semakin kuat . Bukan tanpa alasan tentunya , karena pada awal saya belajar ngeblog , kesulitan dalam mencari menu saya rasakan begitu memprihatinkan . Melihat pada pengalaman itu untuk beberapa waktu kedepan saya akan terus berbagi tutorial tentang menu navigasi bagi blogger pemula. 

Menu kali ini mengusung tema silver ( itu efect dari background body saja ) karena pada dasarnya menu ini adalah white transparent ( sedikit bisa menyesuaikan warna dengan background body template brada ) .Bahan dasar menu kali ini kita hanya memanfaatkan CSS dan linear-gradient sebagai warna pendukung serta konsep rgba pada border-bottom hover . 


CSS 
/*          - NAVIGATION - */
#nav {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  width:100%;height:2.3em;
  padding:0;margin:auto;
  outline:.5em solid rgba(255,255,255,.2);
  -moz-box-shadow:0 0 3em 3em rgba(0,0,0,.3);
  -webkit-box-shadow:0 0 3em 3em rgba(0,0,0,.3);
  box-shadow:0 0 3em 3em rgba(0,0,0,.3);
  background:rgba(255,255,255,.3);
  background-image:-ms-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
  background-image:-moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
  background-image:-o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
  background-image:linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,.1)), color-stop(1, rgba(0,0,0,.3)));
  display:block;
}
/*- HEADER - */
#nav:before {
  content:'Action Blog Nakula';
  position:absolute;
  top:-2em;left:0;right:0;
  display:inline-block;
  font-size:2.5em;
  color:rgba(255,255,255,.4);
  line-height:2.7em;
  letter-spacing:.05em;
  text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
/* - FOOTER - */
#nav:after {
  content:'';
  position:absolute;
  bottom:-3em;left:0;right:0;
  width:1.3em;height:1.1em;
  margin:auto;
  background:transparent url('http://static.tumblr.com/epkyugq/2NTmek7iz/logo.png') center center no-repeat;
  background-size:100% 100%;
  display:inline-block;
  opacity:.5;
}
/* - LINKS - */
a, a:hover {
  position:relative;
  padding:.3em 1em 0;margin:0;
  -moz-transition:.2s ease-in-out;
  -webkit-transition:.2s ease-in-out;
  -o-transition:.2s ease-in-out;
  transition:.2s ease-in-out;
  background:rgba(0,0,0,0);
  display:inline-block;
  color:rgba(255,255,255,.5);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
}
a:hover {
  padding:.3em 2em 0;margin:0 2em;
  color:rgba(255,255,255,.6);
}
.about:hover:before, .contact:hover:before, .blog:hover:before {
  content:'';
  position:absolute;
  top:0;left:-.3em;bottom:0;
  width:.5em;height:.01em;
  padding:0;margin:auto;
  -moz-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
  -webkit-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
  box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
  background:rgb(255,255,255);
  display:block;
}
.home:hover:after, .about:hover:after, .contact:hover:after {
  content:'';
  position:absolute;
  top:0;right:-.3em;bottom:0;
  width:.5em;height:.01em;
  padding:0;margin:auto;
  -moz-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
  -webkit-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
  box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
  background:rgb(255,255,255);
  display:block;
}
.home {
  border-bottom:.6em solid transparent;
  text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.home:hover {
  border-bottom:.6em solid rgba(0,0,0,.2);
}
.about {
  border-bottom:.6em solid transparent;
  text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.about:hover {
  border-bottom:.6em solid rgba(0,0,0,.4);
}
.contact {
  border-bottom:.6em solid transparent;
  text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.contact:hover {
  border-bottom:.6em solid rgba(0,0,0,.6);
}
.blog {
  border-bottom:.6em solid transparent;
  text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.blog:hover {
  border-bottom:.6em solid rgba(0,0,0,.8);
}
HTML 
<nav id="nav">
<a href="#" class="home">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="contact">Contact</a>
<a href="#" class="blog">Blog</a>
</nav> 
Ini hanya dasar saja , tentunya bisa dikembangkan lebih jauh.
Tapi kalau cukup puas dengan tampilan ini silahkan tempatkan kode CSS diatas kode ]]></b:skin> atau </style> . kode HTML bisa brada tempatkan sesuai selera.
Label:

Komentar

  1. UnknownSabtu, Oktober 12, 2013

    Wah ini baru yang namanya keren bang Bro

    BalasHapus
  2. Eka IkhsanudinSabtu, Oktober 12, 2013

    mantaaaaap kang, di sorot mouse Linknya bisa gerak otomatis yah menunya..... hehehe... :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Oktober 13, 2013

      itu mungkin kelebihan menu kali ini kang .......

      Hapus
  3. UnknownMinggu, Oktober 13, 2013

    wah g paham sy :)

    BalasHapus
  4. no dataMinggu, Oktober 13, 2013

    keren gan, blognnya rapi dan cerah, salam damai!

    BalasHapus
  5. JuniyarsaMinggu, Oktober 13, 2013

    Makasih infonya mas, mampir ke blog butut ku ya.

    BalasHapus
  6. Mas AndesMinggu, Oktober 13, 2013

    blognya mau di apain lagi kang, kayaknya masih di oles2 nih.. hehe
    btw navigasinya keren kang asik ueyy goyangannya hehehe

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Oktober 13, 2013

      Itu bagian dari menghilangkan jenuh saat ngeblog mas .. kalau ada perubahan dikit jadi betah lagi ngeblog'y ...

      Hapus
  7. Staff AdministratorMinggu, Oktober 13, 2013

    Kang Ruli orangnya ndak betahan ya... :)
    Nguprak ngaprik tampilan blognya teyus...hehe
    Namun keren deh ih :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Oktober 13, 2013

      gitu deh mas .. jgnkan sama blog lagi ngobrol sama org kalau dah bosen saya suka pergi gitu aja mas .. entahlah saya juga gak ngerti hehe

      Hapus
  8. Kang IsmetMinggu, Oktober 13, 2013

    maaanggg.. nuju ngedit? coba solusi loncatan hash tos di waler di blog abdi :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Oktober 13, 2013

      muhun kang hehe .. siapppp meluncur

      Hapus
    2. Kang IsmetMinggu, Oktober 13, 2013

      nganggo smooth scrollnya kang? kalau pake smooth scroll, mending jangan pake CSS target, mending pake ini :
      http://blog.kangismet.net/2013/10/membuat-smooth-scroll-pada-anchor-point.html

      punten nyimpen link

      Hapus
    3. Sopala MultapaMinggu, Oktober 13, 2013

      iya pantesan aja kang masih tetep .. urang cobian atuh kunu eta ..duh punten we ngarepotkeun yeuh

      Hapus
    4. Kang IsmetMinggu, Oktober 13, 2013

      kumaha kang? siga teu ditambihan scriptna ning....
      mengatasi fixed bar tambih script ieu:

      'scrollTop': $target.offset().top

      jadi

      'scrollTop': $target.offset().top - 65

      Hapus
    5. Sopala MultapaMinggu, Oktober 13, 2013

      sudah saya tambahkan ..Masih tetep kang cobi we di klik kang ...

      Hapus
    6. Kang IsmetMinggu, Oktober 13, 2013

      teu sing ah... sudah rebes oge.. di refresh heula atuh halaman na kang :)

      Hapus
    7. Sopala MultapaMinggu, Oktober 13, 2013

      eh iya kang saya tidak merefreshnya .. sudah oke kang ..duh makasih banyak kang atas bantuan'y hanya allah yg bisa membalas ..amiennn

      Hapus
  9. Kang IsmetMinggu, Oktober 13, 2013

    amieennn.. balesanamah kirim kupat we.. :) wilujeng boboran we kang.. sok edan keun ngeditna, enjing mah takbiran :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Oktober 13, 2013

      JNE na tutup cenah hehe .. di hadiahan we nya ..
      sawangsulna kang .. Allahu Akbar

      Hapus
  10. M. Alex JoenaediSabtu, Oktober 19, 2013

    wah sexy euy,,,, hehhehhehhe

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya