Assalamualaikum …
Om Swastiastu.
Selamat malam.
Tutorial kali ini kita akan melanjutkan pembahasan kita tentang framework CSS yang keren yaitu bootstrap .. hehe ..
di tutorial kali ini kita akan belajar membuat menu navigasi yang responsive menggunakan bootstrap .walaupun sudah banyak teman-teman master yang bisa dan sudah menguasai bootstrap di luar kepala, mungkin masih ada teman-teman yang baru mulai menggunakan bootstrap dan semoga tutorial carikode ini dapat bermanfaat bagi teman-teman .
dalam bootstrap , sudah di sediakan class untuk membuat menu navigasi, bahkan responsive tentunya ,berikut cara membuat nya , yang pertama untuk mulai tutorial ini sediakan:
Nah, bisa di perhatikan pada gambar di atas, kita sudah berhasil
membuat tampilan dari navigasi nya. tapi belum ada isi nya … hahahaha
Oke , selanjutnya kita buat judul website nya , kemudian menu-menu navigasi nya .
selanjut nya kita akan membuat judul website yang terletak di dalam navigasi yang sudah kita buat tadi.
Tambahkan class navbar-brand . navbar-brand ini berfungsi sebagai class judul navbar.
Sebelum itu kita atur dulu lebar nya dengan memberikan class
“container” agar judul dan navigasi agak masuk ke dalam. karena judul
dan menu navigasi nya kita letakkan di dalam class container ini
nah sekarang navigasi responsive kita sudah selesai kita buat menggunakan bootstrap . sekarang coba kita coba dulu,, sudah responsive apa belum,, hehehehe
coba teman-teman atur ukuran browser teman-teman seukuran kira-kira seukuran layar smartphone. maka menu nya akan berubah menjadi tombol yang sudah kita buat .
coba perhatikan, beginilah tampilan menu navigasi yang kita buat jika di buka dari browser, menu nya di kumpulkan , dan coba klik pada combol untuk membuka menu navigasi nya . hehehe
nah , navigasi menggunakan bootstrap selesai .. hehe
Om Swastiastu.
Selamat malam.
di tutorial kali ini kita akan belajar membuat menu navigasi yang responsive menggunakan bootstrap .walaupun sudah banyak teman-teman master yang bisa dan sudah menguasai bootstrap di luar kepala, mungkin masih ada teman-teman yang baru mulai menggunakan bootstrap dan semoga tutorial carikode ini dapat bermanfaat bagi teman-teman .
dalam bootstrap , sudah di sediakan class untuk membuat menu navigasi, bahkan responsive tentunya ,berikut cara membuat nya , yang pertama untuk mulai tutorial ini sediakan:
- framework bootstrap
- file php/html
- library jquery
Kemudian Untuk isi setiap folder seperti gambar di bawah ini kiranya sudah jelas.
Navbar/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Di sini saya sudah menghubungkan file index.html dengan css bootstrap , javascript bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
kemudian tambahkan class navbar dan navbar-inverse yang sudah di sediakan oleh bootstrap untuk membuat navigasi .
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Oke , selanjutnya kita buat judul website nya , kemudian menu-menu navigasi nya .
selanjut nya kita akan membuat judul website yang terletak di dalam navigasi yang sudah kita buat tadi.
Tambahkan class navbar-brand . navbar-brand ini berfungsi sebagai class judul navbar.
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web"KORIKS"</a>
</div>
</div>
Class container di letakkan di dalam class navbar, teman-teman bisa juga menggantinya dengan class container-fluid untuk membuat lebar nya penuh
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web"KORIKS"</a>
</div>
</div>
</nav>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
judul sudah berhasil kita buat, dan kita menggunakan class container
untuk lebar nya. teman-teman bisa juga menggantinya dengan class
container-fluid untuk membuat lebar nya penuh . contoh nya
bisa teman-teman perhatikan jika menggunakan container-fluid maka lebar
nya penuh . di tutorial ini saya menggunakan container-fluid jadi lebarnya penuh.
selanjut nya kita akan membuat menu navigasi dengan navbar-collapsenya
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#">Product</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Download <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Ebook</a></li>
<li><a href="#">Sofware</a></li>
<li><a href="#">Video Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Article</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">About</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documentation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Doc PDF</a></li>
<li><a href="#">Doc ODT?DOCX</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>User Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Akun</a></li>
<li><a href="#">About</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<p><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-8"> </div>
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<br/>
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
Navbars adalah meta komponen responsif yang berfungsi sebagai header navigasi untuk aplikasi atau situs . Mereka mulai runtuh ( dan toggleable ) dalam pandangan mobile dan menjadi horisontal sebagai tersedia lebar viewport meningkat secara vertikal stackable . Hanya menambahkan .nav - ditumpuk .
Sekarang setelah menu navigasinya sudah berhasil di buat , maka kita
akan melanjutkan dengan membuat tombol untuk responsive menu nya. pada
saat di akses oleh device yg memiliki layar yang kecil contoh nya
seperti saat di buka menggunakan smartphone maka menu akan di atur ke
dalam tombol tersebut . seperti efek toggle .
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Di dalam tombol kita memberikan icon yang sudah di sediakan oleh
bootstrap ,di sini saya menggunakan tombol icon bar yang berupa garis,
sebanyak 3 buah icon .
letakkan di dalam element navbar container
letakkan di dalam element navbar container
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web"KORIKS"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#">Product</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Download <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Ebook</a></li>
<li><a href="#">Sofware</a></li>
<li><a href="#">Video Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Article</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">About</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documentation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Doc PDF</a></li>
<li><a href="#">Doc ODT?DOCX</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>User Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Akun</a></li>
<li><a href="#">About</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<p><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-8"> </div>
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<br/>
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
nah sekarang navigasi responsive kita sudah selesai kita buat menggunakan bootstrap . sekarang coba kita coba dulu,, sudah responsive apa belum,, hehehehe
coba teman-teman atur ukuran browser teman-teman seukuran kira-kira seukuran layar smartphone. maka menu nya akan berubah menjadi tombol yang sudah kita buat .
coba perhatikan, beginilah tampilan menu navigasi yang kita buat jika di buka dari browser, menu nya di kumpulkan , dan coba klik pada combol untuk membuka menu navigasi nya . hehehe
nah , navigasi menggunakan bootstrap selesai .. hehe
sekian Tutorial Bootstrap : Membuat menu navigasi responsive dengan
Bootstrap . semoga dapat bermanfaat bagi teman-teman yang membutuhkan
tutorial ini . sampai jumpa di tutorial selanjutnya .
Sekian tutorial dari saya semiga bermanfaat bagi kawan-kawan.
apabila kawan-kawan ingin men download sourcodenya bisa di download di bwah ini.
apabila kawan-kawan ingin men download sourcodenya bisa di download di bwah ini.
tes
ReplyDeletegetbootstrap.com
ReplyDeletegetbootstrap.com
ReplyDeletegetbootstrap.com
ReplyDelete