XtGem Forum catalog
MY
WAPMASTER

Free Online Tools And Generator

Contact
my wapmaster selekeh

Tips
Jika mendapati halaman blank ( blank Page ) silahkan gunakan halaman VERSI DASAR Kami. ×

New Update

membuat menu navigation responsive bag.1

responsive menu mobile

Tadi saya masuk mywapmaster ini, alangkah terkejutnya karena mendapati ada struktur file yang bertambah, saya jelas berpikir ada yang masuk disini, maklum hari ini hanya sekali masuk, masih mending biasanya mau ngepost saja baru masuk, tidak lama kemudian ada pesan masuk, ternyata dari Mr.Graham, rupanya beliau yang datang, tamu besar mau melihat Wap kecil ini, memang kemarin saya kirim pesan kepadanya untuk membenahi beberapa bagian utama situs ini, namun tidak kepikiran dia datang, duh malunya, isi dari Wap ini sangat-sangat berantakan, terima kasih saya ucapkan atas kepeduliannya terhadap mywapmaster ini..

Lanjut masih suasana libur jadi akan saya sempatkan untuk refresh Wap ini dengan artikel kecil yang sudah tersimpan tinggal mengedit sedikit serta membuat postingan terjadwal, sebelum kesibukan di dunia nyata datang, kali ini kita akan membuat menu responsive, dimana menu responsive ini berguna untuk memperjelas, menyingkat serta menghemat ruang, responsive disini dengan maksud menu tersebut dapat menyesuaikan tampilan Browser entah itu ios, touch atau desktop.

menu-responsive-1.jpg
Tampilan Menu Responsive touch dan tablet
Menu responsive ini berbentuk dropdown pada tampilan touch karya dari Osvaldas Valutis
menu-responsive-1a.jpg
Tampilan Menu Responsive dropdown touch


Disini diterapkan penggunaan css dan javascript memang hasilnya sangat memuaskan,

<link rel="stylesheet" href="http://ykub.xtgem.com/Demo/menu-resp/css/MenuResponsive-1.css" />
<script src="http://ykub.xtgem.com/Demo/menu-resp/js/MenuResponsive-1.js"></script>
<script src="http://ykub.xtgem.com/Demo/menu-resp/js/MenuResponsive-1a.js"></script>


<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
      <ul class="clearfix">
    <li><a href="http://ykub.xtgem.com">Home</a></li>
    <li> <a href="#"><span>Blog</span></a>
          <ul>
        <li><a href="/Home">Tools</a></li>
        <li><a href="/Blog?__xtblog_block_id=1&__xtblog_tag=css#xt_blog">Css</a></li>
        <li><a href="/Blog?__xtblog_block_id=1&__xtblog_tag=xtgem#xt_blog">Xtgem</a></li>
        <li><a href="/Blog?__xtblog_block_id=1&__xtblog_tag=script#xt_blog">JavaScript</a></li>
      </ul>
        </li>
    <li> <a href="#"><span>Work</span></a>
          <ul>
        <li><a href="/Blog">Web Design</a></li>
        <li><a href="/service">Typography</a></li>
        <li><a href="/login">Front-End</a></li>
      </ul>
        </li>
    <li><a href="/contact">About </a></li>
  </ul>
</nav>


* Uploads
MenuResponsive-1.js
MenuResponsive-1a.js
MenuResponsive-1.css








Back to posts

Comments:

:

Keren ****** .. boleh gk aku copas dan di post ulang di blog ku ?? .. soal nya blog xtgem ku msh baru .. dan jga sbgai catatan saya pribadi jga hehe ..

:

gk papa sob... Bermanfaat tutornya, jg lupa mampir ke wapsiteku ya.

:

Ampun ni post seharusnya terbit td mlm,Napa ga muncul setelah di cek salah jadwal :-(


Random Post




My Wapmaster
Rating 4 stars
Deskripsi
Author
Keywords Generator, Widget, wapmaster tools

Share
Navigation


My Wapmaster merupakan Wapsite layanan online umpan web, yang terdiri dari tools atau alat pengelola untuk blogger, serta tutorial publikasi lain yang berbasis web.
Css Konten jadi Menghilang Dengan Tombol Ex
sang begal komentar xtgem itu bernama badwords
Template sederhana responsive 3 kolom
cara ampuh memindah xt auth subscribe xtgem