Day 5: Mobile Dropdown Menu | Tiffany R. White Blog

Day 5: Mobile Dropdown Menu

Reading time: 1 min

Day_5

We went over more of the same but learned some new methods and event handlers.

We learned about GET methods like

.prop()

which manipulates the DOM to get the property value of the first element in the set.

We learned about the

.change()

event handler with an anonymous function that we used to change the function of the dropdown menu. Before we had a Go button but what good is that? You would select the dropdown and the link to say, an FAQ, and then press “Go”. Well what about just going to that page when you touch or click on the dropdown menu link for that page? That is what we did by changing the whole behavior of the dropdown, and eliminating the appended Go button. Here is the code:

$select.change(function() {
 //Go to select's locaiton
 window.location = $select.val();

$select.change(function() {
 //Go to select's locaiton
 window.location = $select.val();


$select.change(function() {
 //Go to select's locaiton
 window.location = $select.val();

});
The
.val()
gets the select input without passing any arguments. Which is just clicking on a link that we specified in the HTML and the class we referenced in the jQuery that holds that link. jQuery isn’t at all bad. And I have two more things to go to complete that part of the Front End Web Dev Track.

Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.

Newsletter