search

Cara menggunakan cara membuat navbar bootstrap

1 years ago
Komentar: 0
Dibaca: 93

Selamat datang di warung belajar, masih dalam seri tutorial bootstrap 4, dalam tutorial ini kita akan membahas mengenai pembuatan menu navigasi dengan bootstrap, menu navigasi adalah hal yang cukup penting dalam pembuatan aplikasi berbasis web, bootstrap 4 memberikan beberapa class yang bisa digunakan untuk membuat navigasi dengan tampilan yang menarik, baik  langsung saja kita mulai pembahasannya.

Show

Cara membuat menu navigasi

Untuk membuat menu navigasi anda bisa menggunakan tag <nav> lalu menambahkan class .navbar didalam tag tersebut, selain itu anda juga bisa menambahkan class expand-xl, expand-lg, expand-md, expand-sm (Class ini digunakan untuk mengatur menu navigasi agar tampil secara vertical ketika diakses dengan ukuran layar tertentu ) untuk pembahasan ukuran layar silahkan melihat di tutorial kami sebelumnya mengenal grid system pada bootstrap.

jadi semisal nih kita menambahkan navbar-expand-lg, sesuai aturan grid system lg itu digunakan untuk device ukuran besar, dengan ukuran lebar 992 pixel atau lebih, maka jika kita berikan class navbar-expand-lg pada menu navigasi, menu tersebut akan menjadi vertical ketika diakses menu dibawah ukuran 992 pixel.

Untuk contoh pembuatan menu navigasi perhatikan skrip dibawah ini :

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

 

<nav class="navbar navbar-expand-lg bg-dark">

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Link 1</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link 2</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link 3</a>

    </li>

  </ul>

  <span class="navbar-text text-white">

     Text pada Navbar

  </span>

</nav>

<br>

 

<div class="container-fluid">

 

  <h3>Contoh Menu Navigasi</h3>

  <p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>

</div>

 

</body>

</html>

Semisal kita simpan dengan nama basic_navbar.html, lalu kita buka di browser maka hasilnya adalah :

Cara menggunakan cara membuat navbar bootstrap

Jika diakses dengan ukuran kurang dari 992 pixel maka menu navigasi menjadi vertical.

Cara menggunakan cara membuat navbar bootstrap

Keterangan :

  • Untuk membuat navigasi silahkan buat tag <nav> dan tambahkan class navbar, perhatikan line 14
  • tambahkan juga class .navbar-expand-lg untuk membuat menu navigasi dengan tampilan horizontal, anda bisa mengganti dengan class lain seperti class expand-xl, expand-md, expand-sm silahkan sesuaikan dengan pengaturan tampilan seperti yang telah dijelaskan dibagian sebelumnya
  • pada line 14 jika anda tidak menambahkan class navbar-expand-lg maka menu navigasi akan ditampilkan secara vertical bukan horizontal
  • lalu berikutnya anda bisa mengatur warna pada navigasi yang diinginkan dalam contoh diatas di line 14 kita tambahkan class .bg-dark sehingga warna navigasinya adalah hitam, anda juga mengganti dengan warna, detailnya nanti kita bahas di bagian selanjutnya.
  • berikutnya silahkan buat tag <ul> dan tambahkan class .navbar-nav perhatikan line 15
  • didalam tag <ul> tambahkan tag <li> dengan tambahakan class nav-item perhatikan pada line 16,19,22
  • didalam tag <li> tambahkan tag <a> dan tambahkan class nav-link perhatikan pada line 17, 20, 23
  • perhatikan line 26 kita menuliskan tag <span> dan memberikan class navbar-text untuk memberikan text pada bagian menu navigasi, serta kita tambahkan class text-white untuk memberikan warna putih pada text tersebut

 

 

Merubah Warna Menu Navigasi

Untuk merubah warna pada menu navigasi anda bisa menambahkan class yang disediakan oleh bootstrap untuk merubah warna menu navigasi, tambahkan class tersebut pada tag <nav>, classnya antara lain adalah :

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Baik untuk contoh penggunaannya adalah sebagai 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

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

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

 

<nav class="navbar navbar-expand-sm bg-light navbar-light">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-success navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-info navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-warning navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-danger navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

 

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Active</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#">Disabled</a>

    </li>

  </ul>

</nav>

</body>

</html>

Semisal kita simpan dengan nama warna_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Cara menggunakan cara membuat navbar bootstrap

Keterangan :

  • Menu navigasi akan ditampilkan sesuai dengan class warna yang ditambahkan pada tag <nav>, perhatikan penggunaan class tersebut di line 14,31, 48, 65, 82, 99, 116, dan 133
  • pada tag <nav> kita berikan class navbar-dark agar text pada menu berubah yang sebelumnya berwarna biru menjadi warna gelap
  • anda juga bisa memberikan class active pada tag <ul> untuk memberikan highlight pada link yang diinginkan
  • anda juga bisa memberikan class disaled pada tag <a> untuk mendisabled pada bagian link

 

 

Menambahkan Logo pada menu navigasi

Anda juga bisa menambahkan logo pada menu navigasi yang anda buat, caranya dengan menambahkan class navbar-brand, baik untuk contoh perhatikan skrip dibawah ini :

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <!-- Brand/logo -->

  <a class="navbar-brand" href="#">

    <img src="logo_warung_belajar.png" alt="logo" style="width:40px;">

  </a>

  

  <!-- Links -->

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Home</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">About</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Contact Us</a>

    </li>

  </ul>

</nav>

</body>

</html>

Semisal kita simpan dengan nama logo_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Cara menggunakan cara membuat navbar bootstrap

Keterangan :

  • Untuk membuat logo pada menu navigasi anda perlu membuat sebuah tag <a> dan menambahkan class navbar-brand seperti pada line 15, lalu silahkan buat tag <img> untuk memberikan gambar pada menu navigasi seperti pada line 15, jika anda mengetahui bagaimana cara menambahkan gambar pada html silahkan baca artikel kami mengenai cara menambahkan gambar dengan HTML

 

 

Menambahkan Collapse pada menu navigasi

Anda juga dapat menambahkan fitur collapse pada menu navigasi yang anda buat dengan bootstrap, baik langsung saja contoh penggunaan collapse pada menu navigasi adalah sebagai 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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#kumpulan_menu">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="kumpulan_menu">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>    

    </ul>

  </div>  

</nav>

</body>

</html>

Semisal kita simpan dengan nama collapse_navbar.html, jika dibuka di browser maka hasilnya adalah :

Keterangan :

  • Untuk membuat collapse pada bagian menu navigasi buatlah <button>, tambahkan class navbar-toggler, lalu tambahkan attribute data–toggle dengan value collapse,  dan tambahkan attribute data-target=’#nama-id’ nama id disini isikan sesuai dengan nama id yang digunakan pada bagian menu yang ingin ditampilkan secara collapse ketika tombol di klik, dalam contoh ini kita tuliskan nama id adalah kumpulan_menu, perhatikan line 15
  • diantara dari <button> </button> kita tuliskan tag <span> dengan class navbar-toggler-icon, untuk membuat icon pada bagian collapse, perhatikan line 16
  • berikutnya buat tag <div> sebelum tag <ul> dan tambahkan class collapse dan class navbar-collapse, dan tambahkan id yang sesuai dengan value pada attribute data-target, karena itu disini kita tambahkan id dengan nama kumpulan_menu, perhatikan pada line 18

 

 

Membuat Dropdown pada Menu Navigasi

Dalam bagian ini kita akan  membahas mengenai cara menambahkan Dropdown pada menu navigasi, untuk contoh perhatikan skrip dibawah ini :

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <!-- Brand -->

  <a class="navbar-brand" href="#">Logo</a>

 

  <!-- Links -->

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Menu 1</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Menu 2</a>

    </li>

 

    <!-- Dropdown -->

    <li class="nav-item dropdown">

      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

        Menu 3

      </a>

      <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Sub Menu 1</a>

        <a class="dropdown-item" href="#">Sub Menu 2</a>

        <a class="dropdown-item" href="#">Sub Menu 3</a>

      </div>

    </li>

  </ul>

</nav>

<br>

</body>

</html>

Semisal kita simpan dengan nama dropdown_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

  • untuk membuat dropdown tambahkan class dropdown pada tag <li> perhatikan line 27
  • lalu tambahkan menu sebagai pemicu dropdown menu, dengan membuat tag <a> dan tambahkan class dropdown-toggle, lalu tambahkan id semisal dengan nama navbardrop, dan tambahkan attribute data-toogle dengan value dropdown, perhatikan line 28
  • Berikutnya buatlah tag <div> yang digunakan untuk membuat dropdown menunya, tambahkan class dropdown-menu perhatikan pada line 31
  • didalam tag <div> anda dapat menuliskan link dengan menggunakan tag <a> dan tambahkan class dropdown-item, perhatikan line 32 – 34

 

 

Menambahkan form dan tombol pada menu navigasi

Anda juga bisa menambahkan form dan tombol pada menu navigasi, anda bisa memanfaatkan hal ini untuk membuat beberapa hal semisal form pencarian pada bagian menu navigasi, untuk contohnya perhatikan skrip dibawah ini :

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <ul class="navbar-nav">

  <li>

      <a class="navbar-brand" href="#">Logo</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Menu 1</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Menu 2</a>

  </li>

  </ul>

  <form class="form-inline" action="/action_page.php">

    <input class="form-control" type="text" placeholder="Search">

    <button class="btn btn-success" type="submit">Search</button>

  </form>

</nav>

<br>

</body>

</html>

Semisal kita simpan dengan nama form_pada_menu_navigasi.html, lalu kita buka di browser maka hasilnya :

Cara menggunakan cara membuat navbar bootstrap

Keterangan :

  • Perhatikan pada line 25 kita menambahkan form dengan class form-inline, lalu silahkan tambahkan field untuk bagian formnya, dan tombol.

 

 

Membuat Fixed Navigation

Fixed Navigation adalah istilah untuk membuat menu navigasi yang fixed berada dibagian tertentu meskipun browser di scroll, untuk contoh pembuatannya adalah seperti berikut ini :

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body style="height:500px">

 

<nav class="navbar navbar-expand-lg bg-dark fixed-top">

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Link 1</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link 2</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link 3</a>

    </li>

  </ul>

  <span class="navbar-text text-white">

    Text pada Navbar

  </span>

</nav>

<br/>

<br/>

<br/>

<div class="container-fluid">

 

  <h3>Contoh Menu Navigasi</h3>

  <p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>

</div>

</body>

</html>

Semisal kita simpan dengan nama fixed_top_navbar.html, lalu kita buka di browser maka hasilnya :

Cara menggunakan cara membuat navbar bootstrap

dan ketika di scroll maka hasilnya adalah seperti berikut ini :

Cara menggunakan cara membuat navbar bootstrap

Keterangan :

  • Pada bagian navbar kita berikan class fixed-top pada line 14, karena itu ketika di scroll maka navbar akan static dibagian atas, jika anda ingin fixednya dibagian bawah maka tambahkan class fixed-bottom

 

 

Membuat Sticky Top pada navigasi menu

Sticky top disini maksudnya adalah menu navigasi ketika di scroll akan berada diatas sama seperti konsep fixed-top, hanya saja untuk posisi menu navigasi awalnya tidak berada diatas, tapi ditengah konten.

untuk contoh skripnya adalah seperti berikut ini :

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Menu Navigasi</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body style="height:500px">

<div class="container-fluid">

 

  <h3>Contoh Menu Navigasi</h3>

  <p>Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, </p>

</div>

<nav class="navbar navbar-expand-lg bg-dark sticky-top">

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Link 1</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link 2</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Link 3</a>

    </li>

  </ul>

  <span class="navbar-text text-white">

    Text pada Navbar

  </span>

</nav>

<div class="container-fluid">

 

  <h3>Contoh Menu Navigasi</h3>

  <p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>

</div>

</body>

</html>

Semisal kita simpan dengan nama sticky_top_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Cara menggunakan cara membuat navbar bootstrap

Posisi dari menu berada dibagian tengah, tetapi ketika di scroll maka hasilnya menu navigasi akan tertahan dibagian atas.

Cara menggunakan cara membuat navbar bootstrap

Keterangan :

kita menambahkan class sticky-top pada tag <nav> coba perhatikan di Line 18, karena itu posisi menu navigasi akan sticky top ketika dilakukan scroll

 

Baik sekian dulu teman – teman pembahasan mengenai bagaimana cara membuat menu navigasi dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa ditutorial bootstrap 4 selajutnya.

Apa itu NavBar pada bootstrap?

Navbar adalah singkatan dari navigation bar. merupakan komponen website yang berupa menu. yang biasanya diletakkan pada header website. Komponen navbar biasanya digunakan untuk membuat menu navigasi yang terletak pada bagian header website. bisa kita sebut sebagai menu utama dari sebuah website.
B.NavBar atau Navigation Bar adalah sebuah balok navigasi yang terletak di bagian atas halaman blog. Bentuknya kecil memanjang secara horizontal. NavBar berfungsi baik bagi pemilik atau pengunjungnya untuk melakukan hal-hal tertentu yang masih terkait dengan navigasi blog.

Manakah Class pada bootstrap yang digunakan untuk membuat navigasi tetap berada di atas?

Didalam Bootstrap untuk menggunakan standar navigasi bar kita gunakan class . navbar, lalu bisa kita ikutkan dengan fitur responsive collaps dengan beberapa ukuran standar yang diberikan seperti extra large, large, medium atau small.

kode bootstrap

Pos Terkait

Cara menggunakan bootstrap kelebihan dan kekurangan
Cara menggunakan bootstrap kelebihan dan kekurangan

Cara menggunakan high-dimensional optimization python
Cara menggunakan high-dimensional optimization python

Mengapa menemukan dan mengganti tidak berfungsi di google sheets?
Mengapa menemukan dan mengganti tidak berfungsi di google sheets?

Bagaimana Anda menggunakan fungsi variabel di python?
Bagaimana Anda menggunakan fungsi variabel di python?

Bisakah saya menggunakan python di ros?
Bisakah saya menggunakan python di ros?

Aktifkan debugging javascript di visual studio 2022
Aktifkan debugging javascript di visual studio 2022

Membalikkan baris dalam file python
Membalikkan baris dalam file python

Python mengganti pola dalam string
Python mengganti pola dalam string

Mengirim email otomatis dengan php
Mengirim email otomatis dengan php

Cara edit spreadsheet di laptop
Cara edit spreadsheet di laptop

Periklanan

BERITA TERKINI

Cara membuat kotak ajaib dengan python
1 years ago . by VerticalAnkle
Cara menggunakan perintah php-fpm
1 years ago . by HelmetedCloseness
Cara membuat tas dari kain satin
1 years ago . by HomesickClerk
Tarik data dari kamus python bersarang
1 years ago . by SpecializedRegulator
Sesi php berakhir terlalu cepat
1 years ago . by ArrestingPneumonia
Cara menghapus aplikasi yang tidak bisa dihapus di HP Realme
1 years ago . by TemptingHousing
Cara mengecek rumus di google sheets
1 years ago . by SaturatedAppraisal
How to install PHP GD in xampp?
1 years ago . by BorrowedFoyer
Concat string dalam loop php
1 years ago . by CardboardAllegation
Di mana prosedur tersimpan di mysql?
1 years ago . by CounterproductiveLiterature

Toplist Popular

#1
Top 10 6 nilai minimum f x y 4x 2y pada d 16 e 14 2x 3y 18 4x 3y 24 x 0 y 0 adalah a 40 b 36 c 2022
1 years ago
#2
Top 10 dia selalu lupa membawa pensil ke sekolah saran yang tepat untuk dia adalah 2022
1 years ago
#3
Top 10 diketahui sebuah data tunggal 2 4 6, 7 7, 8, 9, 10 berapakah modusnya 2022
1 years ago
#4
Top 10 persamaan kuadrat yang akar akarnya 7/ 2 dan -5 adalah 2022
1 years ago
#5
Top 10 jika panjang sisi bangun persegi panjang 16 cm dan lebar 8 cm maka kelilingnya adalah 2022
1 years ago
#6
Top 9 perhatikan gambar mata berikut nama bagian mata yang ditunjukkan angka i dan ii adalah 2022
1 years ago
#7
Top 10 jelaskan apa yang dimaksud dengan 3 jenis kemasan? 2022
1 years ago
#8
Top 9 sebutkan tiga keadilan yang harus terwujud dalam kehidupan bermasyarakat 2022
1 years ago
#9
Top 10 pada getaran harmonik pegas, jika massa beban yang digantung pada ujung bawah pegas 100g 2022
1 years ago
#10
Top 10 permainan bulu tangkis di atas meja yang dimainkan oleh dua atau empat orang 2022
1 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeendejakoptzhthittr
Copyright © 2024 apacode Inc.