Cara Membuat Navigasi di Atas Header

Ditulis oleh: -

Tutorial ini direquest oleh Aditia Novit. Oke, berikut tutorial "Cara Membuat Navigasi di Atas Header"

Dalam tutorial ini saya akan membuat navigasi yang berada dalam element full size. Konsepnya seperti di bawah ini.

Jadi element yang berwarna hitam akan berukuran penuh layar, dan di dalamnya terdapat navigasi (merah).

Letakkan CSS berikut tepat di atas ]]</b:skin>
ul#mainMenu {
margin: 0 auto;
overflow: hidden;
text-align: left;
padding:0px;
max-width:1020px;
}
ul#mainMenu li {
cursor: pointer;
display: inline-block;
list-style-type: none;
}
ul#mainMenu li a{
display: inline-block;
padding: 5px 6px;
color: rgba(238, 238, 238, 0.65);
cursor: pointer;
font: 14px/25px 'OpenSansExtrabold', Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
ul#mainMenu li a:hover{background:#DC1E25;color:#fff;}
.tumpasMenu{width: 100%;
background: #393939;
border-bottom: 3px solid #DC1E25;
overflow: hidden;
padding: 0px;
font-size: 12px;
color: #9c9c9c;}
.tumpasMenu{
width: 100%;
background: #393939;
border-bottom: 3px solid #DC1E25;
overflow: hidden;
padding: 0px;
font-size: 12px;
color: #9c9c9c;}

Kemudian Letakkan HTML berikut tepat di bawah </body>
<nav class="tumpasMenu">
<ul class="dNone" id="mainMenu">
<li class="menuNews"><a href="/" title="Home">Home</a></li>
<li class="menuNews"><a href="http://facebook.com/novalbs" title="Facebook">Facebook</a></li>
<li class="menuNews"><a href="http://twitter.com/novalbintangs" title="Template">Twitter</a></li>
<li class="menuNews"><a href="/p/gallery.html" title="Gallery">Gallery</a></li>
</ul>
</nav>

23komentar:

  1. kunjungann mlm sob. salm knl..ikut nyimak aja...

    ReplyDelete
  2. PERTAMAX
    oplosan banyak :D
    Thanks udah share , bisa membantu buat design template :D
    - Blogwalking -

    ReplyDelete
  3. mantep sob.. jgn lupa kunjungan balik :)

    ReplyDelete
  4. Ini sekalian bisa juga jadi menu float kan mas.

    ReplyDelete
  5. wah keren gan, kapan kapan mau nyoba ah :)

    ReplyDelete
  6. Mantep nih tutornya, thanks dah dishare ...

    ReplyDelete
  7. Thanks mas sudah dibuatkan postingannya :-D

    ReplyDelete
  8. Keren mas tutornya, mampir juga ya ke blog bututku..

    ReplyDelete
  9. sekalian dengan tombolsearchnya dong mas :)

    ReplyDelete
  10. oo, begitu caranya. itu gak pake elemen "position" ya sob?

    ReplyDelete
  11. Wahhh Keren Nihhh Tipsnyaa Makasii yah Atas Infonya ^_^

    ReplyDelete
  12. WOW PERTAMAX!
    makasih udah share sob!
    - Blogwalking -

    ReplyDelete
  13. wah kalo saya udah terpasang hehe :D
    Btw nice info ya mas

    ReplyDelete
  14. Source codenya cukup simple, dan hasilnya mngagumkan. keren sob,,,,,
    ngomong2 blog nya kok byk amat yah....

    ReplyDelete
  15. wah keren ni kayaknya menunya :)
    thanks

    comeback

    ReplyDelete
  16. kode nya putih jadi kaga keliatan kwkwkwkw hampir ane kabur duluan

    ReplyDelete
  17. wahh jadi lebih ngerti tentang menu navigasi

    ReplyDelete
  18. mantap infonya.....ntar diterapin ....salam sukses ya...

    ReplyDelete