Nav Dropdowns

4 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.19
You save:  €37.48
List Price:  £112.24
You save:  £32.07
List Price:  CA$192.60
You save:  CA$55.03
List Price:  A$217.25
You save:  A$62.07
List Price:  S$190.37
You save:  S$54.39
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
List Price:  NZ$236.19
You save:  NZ$67.48
List Price:  د.إ514.11
You save:  د.إ146.90
List Price:  ৳15,319.96
You save:  ৳4,377.44
List Price:  ₹11,694.97
You save:  ₹3,341.66
List Price:  RM669.64
You save:  RM191.34
List Price:  ₦181,567.03
You save:  ₦51,880
List Price:  ₨38,857.05
You save:  ₨11,102.81
List Price:  ฿5,147.32
You save:  ฿1,470.77
List Price:  ₺4,550.80
You save:  ₺1,300.32
List Price:  B$732.62
You save:  B$209.33
List Price:  R2,665.20
You save:  R761.54
List Price:  Лв256.41
You save:  Лв73.26
List Price:  ₩192,455.38
You save:  ₩54,991.18
List Price:  ₪530.55
You save:  ₪151.59
List Price:  ₱8,009.48
You save:  ₱2,288.58
List Price:  ¥21,617.62
You save:  ¥6,176.90
List Price:  MX$2,374.63
You save:  MX$678.51
List Price:  QR509.31
You save:  QR145.52
List Price:  P1,929.29
You save:  P551.26
List Price:  KSh18,618.67
You save:  KSh5,320
List Price:  E£6,790.31
You save:  E£1,940.22
List Price:  ብር7,942.45
You save:  ብር2,269.43
List Price:  Kz117,241.62
You save:  Kz33,500
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
List Price:  CN¥1,013.40
You save:  CN¥289.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
List Price:  DA18,826.63
You save:  DA5,379.42
List Price:  FJ$317.87
You save:  FJ$90.82
List Price:  Q1,085.64
You save:  Q310.20
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
List Price:  DH1,416.82
You save:  DH404.83
List Price:  L2,505.87
You save:  L716.01
List Price:  ден8,074.51
You save:  ден2,307.16
List Price:  MOP$1,125.87
You save:  MOP$321.70
List Price:  N$2,657.05
You save:  N$759.21
List Price:  C$5,137.77
You save:  C$1,468.04
List Price:  रु18,685.75
You save:  रु5,339.16
List Price:  S/525.19
You save:  S/150.06
List Price:  K530.57
You save:  K151.60
List Price:  SAR525.14
You save:  SAR150.05
List Price:  ZK3,528.03
You save:  ZK1,008.08
List Price:  L652.66
You save:  L186.48
List Price:  Kč3,316.71
You save:  Kč947.70
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
List Price:  Bs966.66
You save:  Bs276.20
List Price:  COP$547,598.77
You save:  COP$156,467.96
List Price:  ₡69,943.14
You save:  ₡19,985.18
List Price:  L3,446.12
You save:  L984.67
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In


Hello in this video for bootstrap four, we're going to show you how to integrate drop downs inside of your nav. If you know how to do drop downs, you'll feel right at home. If you don't, don't worry, there's a video in this series that covers that as well. So we've got our drop down in our nav right here. So let's just use the first one. And what we're gonna do is create a new list item, you can obviously just replace an existing one if you want to.

And this is gonna have a class of nav dash item just as the other items do. But it's also going to have a class or drop down. And inside here, we're going to put up a href equals for this was going to put a hash because we don't want it to go anywhere, but you can either chain day if you want to, but if it's dropped down date you would want to we're going to put a class classes I should say, the multiple NAB dash link, drop down toggle data toggle. And for this drop down and this need to pour a role equal turn all of this, like I said, we've covered in a separate video. So if you want more information, go check that out in this series, area dash x banded equals false. And durscher actually removed this curve, it's gonna call this drop down.

And now what we actually need to do is create the drop down menu, aka what actually pops up because at the moment, we just got the button. Actually, I'm going to save it. refresh the browser so you can see what So we've got this, when we click on it, it's basically highlighting it, but it's not actually showing a drop down simply because we haven't coded one in yet. Do that. It's all symbols. You need a div with a class on drop down menu.

Inside here you need to have your own term. So for this I'm important a class equals drop down dash item, a href. And for this, I'm just gonna put our company website and inside here, I'm just gonna put put one and I'm gonna just copy and paste this a few times. So changed To button free. And also what I'm going to do is create knockin, there'll be no, what I'm going to put a divider in here. So to do that I just put an empty div with a class of drop down.

Goyder obviously don't have to have these items, you can have any sort of drop down item. This is just a particular items I'm choosing. And now that looks like we're ready to go. So if we just save this, go to our web browser refresh, click Done. As you can see, we have a drop down, and if you click it, it takes us to the designated website. Well, we have a drop down that works with in our navigational menu.

You might be thinking, can you add it within the pill and we need to really match the style of the navigational pill and Yes, you will. So to do that simple at the same time, code and I'm actually gonna add it in the middle of the item, so tool in the middle, so it looks a lot different. But there we go, go drop down, click it. And as you can see, it visually does look different because it matches the style of the navigational menu that it's in. So that's it for dropdowns. Within abs are the next task, we want you to actually put it within the stat nav, see how that looks.

If you have any questions, feel free to post them on sonar learning Dakota, UK for slash question dot php, there'll be a link in the description. Plus, there'll be another link in the description to the source code from this video and the source code from every other video in this series. So you can check out the code for the drop down via that link. Please rate, comment and subscribe as it really does help. And as usual, thank you for watching, and I hope you have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.