53. Adding a Navigation Bar

Jul 14, 2026 04:28 · 5:09 · English · Whisper Turbo · 2 ໄມໂຄຣໂຟນ

ບົດບັນທຶກນີ້ຈະໝົດອາຍຸໃນມື້ນີ້. ປັບປຸງໃຫ້ເປັນບ່ອນເກັບທີ່ບໍ່ປ່ຽນແປງ →

ລາຍການສອນ

0:02

S… Speaker 1 (53. Adding a Navigation Bar)

So we added all the components we created to our templates

0:06

S… Speaker 1 (53. Adding a Navigation Bar)

Now let's fine -tune them and add the real content we want to have there,

0:10

S… Speaker 1 (53. Adding a Navigation Bar)

starting in the header.

0:11

S… Speaker 2 (53. Adding a Navigation Bar)

Of course,

0:12

S… Speaker 1 (53. Adding a Navigation Bar)

I don't want to have this H1 tag here.

0:14

S… Speaker 1 (53. Adding a Navigation Bar)

Instead,

0:15

S… Speaker 1 (53. Adding a Navigation Bar)

I will use a couple of bootstrap classes to create a nice -looking header.

0:19

S… Speaker 1 (53. Adding a Navigation Bar)

So I'll create a wrapping nav element,

0:22

S… Speaker 1 (53. Adding a Navigation Bar)

and on this element,

0:24

S… Speaker 1 (53. Adding a Navigation Bar)

I'll add the navbar class and then navbar default.

0:28

S… Speaker 2 (53. Adding a Navigation Bar)

Again,

0:28

S… Speaker 1 (53. Adding a Navigation Bar)

these are just bootstrap classes,

0:30

S… Speaker 1 (53. Adding a Navigation Bar)

which will give me this default bootstrap header.

0:34

S… Speaker 1 (53. Adding a Navigation Bar)

In there,

0:35

S… Speaker 1 (53. Adding a Navigation Bar)

I'll place a container fluid div to have my own

0:39

S… Speaker 1 (53. Adding a Navigation Bar)

view container basically in there.

0:40

S… Speaker 1 (53. Adding a Navigation Bar)

And the first thing I want to have here is a header.

0:44

S… Speaker 1 (53. Adding a Navigation Bar)

For that,

0:45

S… Speaker 1 (53. Adding a Navigation Bar)

we get the navbar header class we can add to a div.

0:48

S… Speaker 1 (53. Adding a Navigation Bar)

And in this div,

0:50

S… Speaker 1 (53. Adding a Navigation Bar)

I want to have a clickable header.

0:51

S… Speaker 1 (53. Adding a Navigation Bar)

So I'll add an anchor tag with pointing to hash for now.

0:55

S… Speaker 2 (53. Adding a Navigation Bar)

We'll later,

0:55

S… Speaker 1 (53. Adding a Navigation Bar)

of course, add a route there once we learned how to do this.

0:58

S… Speaker 1 (53. Adding a Navigation Bar)

And this should have the class navbar.

1:03

S… Speaker 1 (53. Adding a Navigation Bar)

to give this this brand -like text style.

1:06

S… Speaker 1 (53. Adding a Navigation Bar)

I'll say recipe book here,

1:08

S… Speaker 1 (53. Adding a Navigation Bar)

since this is the name of our application.

1:10

S… Speaker 1 (53. Adding a Navigation Bar)

So that's the header part of

1:14

S… Speaker 1 (53. Adding a Navigation Bar)

our header, so this main brand part.

1:17

S… Speaker 1 (53. Adding a Navigation Bar)

Now let's work on the actual links.

1:20

S… Speaker 1 (53. Adding a Navigation Bar)

For this, I'll add a div,

1:21

S… Speaker 1 (53. Adding a Navigation Bar)

which will receive the collapse class and then the navbar collapse

1:26

S… Speaker 2 (53. Adding a Navigation Bar)

class.

1:26

S… Speaker 1 (53. Adding a Navigation Bar)

Now,

1:27

S… Speaker 1 (53. Adding a Navigation Bar)

I won't really use the collapse feature.

1:29

S… Speaker 1 (53. Adding a Navigation Bar)

I won't add a hamburger icon here,

1:31

S… Speaker 1 (53. Adding a Navigation Bar)

since we will not have many links on our header anyways.

1:34

S… Speaker 1 (53. Adding a Navigation Bar)

But this gives us some nice styles.

1:37

S… Speaker 2 (53. Adding a Navigation Bar)

And of course,

1:38

S… Speaker 1 (53. Adding a Navigation Bar)

collapse here should have an E at the end,

1:41

S… Speaker 2 (53. Adding a Navigation Bar)

like that.

1:42

S… Speaker 1 (53. Adding a Navigation Bar)

So in here,

1:44

S… Speaker 1 (53. Adding a Navigation Bar)

I now want to have a group of list items,

1:47

S… Speaker 1 (53. Adding a Navigation Bar)

so a group of links in the end.

1:49

S… Speaker 1 (53. Adding a Navigation Bar)

This will be an unordered list with the CSS classes nav and

1:54

S… Speaker 1 (53. Adding a Navigation Bar)

then navbar nav.

1:56

S… Speaker 1 (53. Adding a Navigation Bar)

So make sure to create this unordered list with these classes.

2:00

S… Speaker 1 (53. Adding a Navigation Bar)

And in there,

2:01

S… Speaker 1 (53. Adding a Navigation Bar)

if we add some list items,

2:03

S… Speaker 1 (53. Adding a Navigation Bar)

they will actually sit next to each other.

2:05

S… Speaker 1 (53. Adding a Navigation Bar)

So they will automatically be positioned correctly by Bootstrap.

2:09

S… Speaker 1 (53. Adding a Navigation Bar)

Each list item should hold a link.

2:11

S… Speaker 1 (53. Adding a Navigation Bar)

So here I'll add an anchor tag,

2:13

S… Speaker 1 (53. Adding a Navigation Bar)

also pointing to just hash for now.

2:16

S… Speaker 1 (53. Adding a Navigation Bar)

One for the recipe section and a second one

2:20

S… Speaker 1 (53. Adding a Navigation Bar)

for the shopping list section.

2:22

S… Speaker 1 (53. Adding a Navigation Bar)

Now with that added,

2:24

S… Speaker 1 (53. Adding a Navigation Bar)

I'll add another area in my header here.

2:27

S… Speaker 1 (53. Adding a Navigation Bar)

This will be another unordered list,

2:29

S… Speaker 1 (53. Adding a Navigation Bar)

which will receive the classes nav and now also navbar

2:33

S… Speaker 1 (53. Adding a Navigation Bar)

nav like before,

2:35

S… Speaker 1 (53. Adding a Navigation Bar)

but then also navbar right to position these links

2:39

S… Speaker 1 (53. Adding a Navigation Bar)

at the right.

2:40

S… Speaker 1 (53. Adding a Navigation Bar)

And actually,

2:41

S… Speaker 1 (53. Adding a Navigation Bar)

this will only be one link here,

2:43

S… Speaker 1 (53. Adding a Navigation Bar)

which will receive a class of dropdown.

2:45

S… Speaker 1 (53. Adding a Navigation Bar)

This list item will...

2:47

S… Speaker 1 (53. Adding a Navigation Bar)

Because later we will add our own directive,

2:50

S… Speaker 1 (53. Adding a Navigation Bar)

which will turn this into a working drop -down where we can then choose

2:54

S… Speaker 1 (53. Adding a Navigation Bar)

some options to store our data on a server,

2:57

S… Speaker 1 (53. Adding a Navigation Bar)

something we'll also implement later in this course,

2:59

S… Speaker 1 (53. Adding a Navigation Bar)

or fetch it from there.

3:01

S… Speaker 1 (53. Adding a Navigation Bar)

So in this drop -down,

3:03

S… Speaker 1 (53. Adding a Navigation Bar)

I simply want to have my drop -down menu,

3:06

S… Speaker 1 (53. Adding a Navigation Bar)

which when using Bootstrap is added by adding an unordered list

3:11

S… Speaker 1 (53. Adding a Navigation Bar)

with the class drop -down.

3:14

S… Speaker 1 (53. Adding a Navigation Bar)

menu so this will hold the items of this drop down and

3:18

S… Speaker 1 (53. Adding a Navigation Bar)

Here I'll add a couple of list items which all hold

3:22

S… Speaker 1 (53. Adding a Navigation Bar)

some links pointing to just hash for now one for saving

3:27

S… Speaker 1 (53. Adding a Navigation Bar)

data and one for Fetching

3:31

S… Speaker 2 (53. Adding a Navigation Bar)

data again.

3:32

S… Speaker 1 (53. Adding a Navigation Bar)

This will be filled with working code later So

3:36

S… Speaker 1 (53. Adding a Navigation Bar)

that's my header.

3:37

S… Speaker 1 (53. Adding a Navigation Bar)

Let's save it and see how it looks

3:40

S… Speaker 2 (53. Adding a Navigation Bar)

Looks okay.

3:41

S… Speaker 1 (53. Adding a Navigation Bar)

I don't see my dropdown though.

3:45

S… Speaker 1 (53. Adding a Navigation Bar)

The brand looks off.

3:46

S… Speaker 1 (53. Adding a Navigation Bar)

So I'm not entirely happy with that.

3:49

S… Speaker 1 (53. Adding a Navigation Bar)

Let's see what is wrong.

3:50

S… Speaker 1 (53. Adding a Navigation Bar)

The brand is not working because that should be navbar,

3:55

S… Speaker 1 (53. Adding a Navigation Bar)

not have H in between.

3:57

S… Speaker 1 (53. Adding a Navigation Bar)

So if you fix this,

3:58

S… Speaker 1 (53. Adding a Navigation Bar)

the brand looks all right.

3:59

S… Speaker 1 (53. Adding a Navigation Bar)

Now what's wrong with the dropdown?

4:02

S… Speaker 1 (53. Adding a Navigation Bar)

Well, the drop -down simply misses the link we would see to open the drop

4:06

S… Speaker 1 (53. Adding a Navigation Bar)

-down because this unordered class here simply is the content of the drop -down We

4:10

S… Speaker 1 (53. Adding a Navigation Bar)

of course also need a link to trigger it.

4:12

S… Speaker 1 (53. Adding a Navigation Bar)

So let's add an anchor tag pointing to hashtag here where I will say

4:16

S… Speaker 1 (53. Adding a Navigation Bar)

manage

4:18

S… Speaker 2 (53. Adding a Navigation Bar)

Just manage,

4:19

S… Speaker 1 (53. Adding a Navigation Bar)

maybe.

4:19

S… Speaker 1 (53. Adding a Navigation Bar)

You could, of course, change that text.

4:20

S… Speaker 1 (53. Adding a Navigation Bar)

And this should have a class of dropdown toggle

4:24

S… Speaker 1 (53. Adding a Navigation Bar)

because this will be the button toggling the dropdown in the end.

4:27

S… Speaker 1 (53. Adding a Navigation Bar)

Therefore,

4:28

S… Speaker 1 (53. Adding a Navigation Bar)

it will have a role of button to add some accessibility to this.

4:31

S… Speaker 1 (53. Adding a Navigation Bar)

Not required for this to work correctly,

4:34

S… Speaker 1 (53. Adding a Navigation Bar)

though. And with this,

4:35

S… Speaker 1 (53. Adding a Navigation Bar)

now if we save this,

4:37

S… Speaker 1 (53. Adding a Navigation Bar)

we see the dropdown.

4:38

S… Speaker 1 (53. Adding a Navigation Bar)

It would be nice to have a little arrow next to it indicating that it

4:42

S… Speaker 1 (53. Adding a Navigation Bar)

is a dropdown.

4:42

S… Speaker 1 (53. Adding a Navigation Bar)

So next to manage,

4:44

S… Speaker 1 (53. Adding a Navigation Bar)

I'll add a span with a class of...

4:47

S… Speaker 1 (53. Adding a Navigation Bar)

which will give us this arrow pointing to the bottom,

4:51

S… Speaker 1 (53. Adding a Navigation Bar)

this arrow here.

4:52

S… Speaker 1 (53. Adding a Navigation Bar)

And now we get a dropdown.

4:53

S… Speaker 1 (53. Adding a Navigation Bar)

It won't work if we click it because we haven't added any code which would open

4:57

S… Speaker 1 (53. Adding a Navigation Bar)

the dropdown.

4:58

S… Speaker 1 (53. Adding a Navigation Bar)

We will do this after the directives section though.

5:01

S… Speaker 1 (53. Adding a Navigation Bar)

So the header is now working.

5:03

S… Speaker 2 (53. Adding a Navigation Bar)

With that,

5:04

S… Speaker 1 (53. Adding a Navigation Bar)

let's move on and let's work on our recipes section.

ບົດບັນທຶກນີ້ໄດ້ຖືກສ້າງຂຶ້ນໂດຍ AI (ການຮັບຮູ້ການເວົ້າແບບອັດຕະໂນມັດ). ອາດມີຂໍ້ຜິດພາດ - ກວດສອບກັບສຽງຕົ້ນຕໍເພື່ອໃຊ້ຢ່າງຮີບດ່ວນ. ນະໂຍບາຍ AI

❤️ ຮັກ STT.ai? ເວົ້າກັບເພື່ອນຂອງທ່ານ!

ສັງລວມ

ກົດປຸ່ມສັງລວມ ເພື່ອສ້າງບົດສັງລວມ AI ຂອງບົດບັນທຶກນີ້.

ຖາມ AI ກ່ຽວກັບການແປນີ້

ຖາມທຸກຢ່າງກ່ຽວກັບບົດບັນທຶກນີ້ - AI ຈະຊອກຫາສ່ວນທີ່ກ່ຽວຂ້ອງແລະຕອບ.

ແປເປັນພາສາອື່ນ

53. Adding a Navigation Bar

ສັງລວມ

ຖາມ AI ກ່ຽວ​ກັບ​ການ​ແປ​ນີ້

ຖາມ AI ກ່ຽວກັບການແປນີ້