Free Online Tools And Generator

Mywapmaster


☰ subc


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




membuat menu navigation responsive bag.1 Rated 4.5/5 based on 144 reviews
Diposkan pada 07-05-2016 16:08
Tags: css , script , Template
och4
22-05-2016 15:08

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

RifkyUchiha
08-05-2016 06:37

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

Mywapmaster (Author)
07-05-2016 16:11

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

Please login in order to post comments: Login | Signup


Close ×

Info

Note :

Do Not Copy Code Using Translator.
( Jangan Copy Code Menggunakan Translator Bahasa)

Please Like This Page

Terima Kasih