• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tutorial Membuat Desain Website Responsif Bagian 1 - Navigasi Menu

28‘13
March

info72.jpg

Beberapa hari yang lalu saya mengenalkan Desain Responsif (Responsive Design) kepada anda, dimana dengan Desain Responsif website dapat tampil dengan baik di berbagai browser dengan ukuran layar yang berbeda.

Sekarang mari kita perdalam lagi pengetahuan kita dengan sama-sama belajar membuat sebuah halaman desain web responsif. Pada tutorial dibagian ke 1 (satu) ini saya akan memberikan tutorial tentang membuat menu navigasi yang responsif

Berikut ini merupakan tampilan dari tutorial kali ini

Apa yang harus saya kuasai?

Untuk memulai tutorial ini anda harus memiliki pemahaman yang cukup tentang CSS dan HTML, silahkan klik link berikut CSS dan HTML untuk mempelajarinya

Membuat struktur HTML

Struktur HTML yang akan kita buat kali ini berisi Header yang akan digunakan untuk logo dan navigasi website, content yang akan kita gunakan sebagai isi dari halaman website, sidebar yang kita gunakan untuk kepentingan google ads dan terakhir footer

Tag html yang akan kita gunakan adalah sebagai berikut

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo: Responsive Menu</title>
</head>
<body>
    
    <div class="header">
        <h1><a href=""><img src="http://www.w3function.com/images/logo.png" alt="W3Function.com" ></a></h1>
        <h3>A Responsive Design Tutorial By <a href="http://www.twitter.com/imwoodie">Widi Mawardi</a></h3>
        <div class="navigation">
            <ul>
                <li class="current"><a href="#">Home Page</a></li>
                <li><a href="#">Fortpolio</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
        </div>
    </div>
    <div class="wrap">
        <div class="content">
            <h3>Resize browser anda untuk melihat pergerakan design</h3>
            <p>Lorem Ipsum is simply dummy text .</p>
        
            <h3>Atau lihat di mobile browser anda</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and.</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
        </div>
        <div class="sidebar">
            <h3>Sidebar</h3>
            <p class="column-1">
            	Isi dengan kode adsense ukuran 300
            </p>
            
            <p class="column-2">
            	Isi dengan kode adsense ukuran 468
            </p>
            
            <p class="column-3">
            	Isi dengan kode adsense ukuran 728
            </p>
            </div>
        </div>
    <div class="footer">
        <p>Copy Right &copy; w3function.com</p>
    </div>
</body>
</html>

Untuk tutorial ini Anda bisa mendownload scriptnya untuk pembelajaran anda

Tujuan dari tutorial ke 1

Saya akan menunjukan kepada anda bagaimana navigasi menu awal yang dibuat lebar untuk ukuran desktop bisa menjadi menu dropdown untuk viewport (layar) yang lebih kecil

Tentunya saat dibuka dengan layar yang lebih kecil seperti layar mobile akan lebih elegan apabila menu ditampilkan dropdown, tag yang akan digunakan untuk navigasi adalah tag <ul>.

    <div class="navigation">
        <ul>
            <li class="current"><a href="#">Home Page</a></li>
            <li><a href="#">Fortpolio</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </div>

CSS untuk Navigasi

CSS untuk tampilan navigasi dilayar yang biasa (desktop) sederhana saja, dibuat berjejer kearah kiri. Di CSS untuk <li> saya menggunakan display:inline-block daripada yang biasa saya gunakan float:left. Hal ini berguna supaya area text di menu dapat berjajar ke kiri, kanan atau tengah (align) secara otomatis mengikuti text-align di elemen <ul>

.navigation {
	margin: 20px 0 0 0;
}
.navigation ul {
	margin: 0;
	padding: 0;
}
.navigation li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}
.navigation a {
	padding: 3px 12px;
	text-decoration: none;
	color: #ff4e00;
	line-height: 100%;
}
.navigation a:hover {
	color: #000;
}
.navigation .current a {
	background: #555;
	color: #fff;
	border-radius: 5px;
}

Bagian Responsif

Sekarang saatnya membuat menu navigasi menjadi responsif saat halaman dibuka dilayar kecil seperti di browser tab / mobile

Pada saat layar di break ke ukuran 500px saya membuat elemen dengan class navigation ke posisi relatif( position:relative ) sehingga bisa membuat elemen <ul> pada posisi absolute, saya menyembunyikan semua <li> kecuali first-child yaitu <li> yang pertama atau disini dengan class current. Saat disorot mouse saya membuat tampilan <li> menjadi sebuah blok sehingga akan menghasilkan menu dropdown.

Berikut ini tag CSS yang saya buat untuk menghasilkan menu navigasi yang responsif

@media screen and (max-width: 500px) {
	.navigation {
		position: relative;	
		min-height: 36px;
		margin-bottom:10px;
	}	
	.navigation ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url("http://www.w3function.com/images_tutor/icon-menu-72.png") no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.navigation li {
		display: none; /* menyembunyikan <li> */
		margin: 0;
	}
	.navigation .current {
		display: block; /* menampilkan <li> yang pertama dengan class current */
	}
	.navigation a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.navigation .current a {
		background: none;
		color: #666;
	}

	/* on navigation hover */
	.navigation ul:hover {
		background-image: none;
	}
	.navigation ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	
	.sidebar .column-1 {
		display:block;
	}
	.sidebar .column-3, .sidebar .column-2 {
		display:none;
	}
}

Update Artikel

Tutorial bagian kedua sudah saya post dan dapat anda lihat di link berikut : Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif, Semoga bermanfaat

Anda juga mungkin suka dengan artikel ini :

  1. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 1
  2. CSS 3 untuk border dan background
  3. Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)
  4. Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya
  5. Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3

Komentar

  • lapak pasir (02 Aug 2016 01:30:15)

    kalo cara membuat gambara dan judulnya rapih dan ga brantakan gimana ya saat di buka di hp

  • ogitu web (26 Sep 2015 01:14:41)

    ilmunya bermanfaat banget akan tetapi alangkah lebih baik kalau tidak pakai disable block.. :)

  • Grosir Produk Green World (20 Apr 2015 01:19:51)

    Terimakasih atas informasinya :)

  • sikak (26 Jun 2013 08:48:10)

    kalau mau buat posting sekalian aja di kasih password, pelit amat

  • i[at]w3function.com (11 May 2013 06:30:25)

    sidebar selanjutnya boleh dibikin sendiri boleh juga ikutin tahap tutorial responsif kedua di http://w3function.com/blog/index.php?p=det&idn=76

» Muat Komentar Sebelumnya (6 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff