selamat siang kawan kawan CariKoder, tadi saya lagi maen2 di facebook, eh dapat pertanyaan dari kawan gimana cara membuat Menu responsive dengan css, tapi dengan CSS Pakek Bootstrap, Karena katanya agak ribet, tapi maunya pakek CSS. kebetulan saya bisa dan pernah buat nih, maka saya coba membantu nih, semoga bisa di ikuti.
Oke, kita akan membuat menu yang tampilannya akan seperti di bawah ini jika di buka versi desktop,
dan jika di buka versi mobile maka tampilannya akan seperti ini
1. membuat menu
pertama – tama buat menu seperti biasanya,
buka teks editor kesayangan anda dan ketikkan syntak berikut :
1
2
3
4
5
6
7
8
9
10
11
|
<link href="style.css" type="text/css" rel="stylesheet"/>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
</nav>
|
beri nama index.php
tampilanny masih sangat simpel, nah, sekarang kita berikan style-nya biar menarik dikit.
2. membuat style untuk menu
masih di folder yang sama buat file css baru dengan nama style.css, kemudian ketikkan syntak berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
|
hasilnya begini nih,
nah, sekarang coba tes responsivenya, caranya bisa dengan zoom layar browser anda dengan menekan Ctrl dan = bersamaan.
pasti tampilannya akan hancur seperti ini.
oke, sekarang mari kita lanjutkan, untuk membuat menu menjadi responsive
3. Membuat menu responsive dengan css
pertama – tama, tambahkan dulu meta vieport di dalam file index.php
1
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
kemudian untuk membuat menunya responsive pada layar gadget yang berukuran lebih kecil dari 600px maka ketikkan syntak berikut dalam file style.css :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
|
nah, sekarang coba zoom lagi layar browser anda, pasti tampilannya sudah lumayan responsive seperti ini :
pada syntak di atas, kita bisa lihat bahwa CSS memeriksa kondisi layar browser, kemudian jika layar browser itu lebih kecil dari 600px, maka lebar menu akan di bagi menjadi dua, 50% – 50%.
sekarang untuk membuat menu responsive pada ukuran layar di bawah 480px atau dengan kata lain ketika web di buka dengan SmartPhone ukuran sekitar 4,5Inch, tambahkan syntak berikut pada style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
nav a#pull {
display: none;
}
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
|
kemudian tambahkan syntak berikut dalam tag <nav> di file index.php
1
|
<a href="#" id="pull">Menu CariKode</a>
|
okey, sekarang jalankan, dan zoomkan layar browser anda sebesar mungkin agar dan lihat perubahannya.
oke, tampilannya responsivenya sudah sangat oke, tapi tombol ikon dropdownnya itu belum aktif, sekarang buka lagi index.php dan tambahkan syntak berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
|
nah, sekarang silahkan jalankan kembali, dan zoomkan sebesar mungkin. dan kemudian klik ikon dropdown dan tampilannya akan seperti ini.
oke, sekian tutorial dari saya hari ini, jika ada hal yang mau di tanyakan silahkan di comment saja ya….
berikut syntak lengakapnya
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="style.css" type="text/css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
<a href="#" id="pull">Menu CariKode</a>
</nav>
|
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Nov 10, 2014, 3:46:27 PM
Author : carikode
*/
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
nav a#pull {
display: none;
}
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
|
silahkan Demo dan download file
0 komentar:
Post a Comment