Build and Style a Dropdown in Tailwind
Offered By: egghead.io
Course Description
Overview
A menu dropdown is a common component that you will build and style in any application.
In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework.
After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.
In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework.
After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.
Syllabus
- Style the Basic Dropdown Elements with Tailwind
- Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar
- Make a Tailwind Styled Dropdown Interactive
- Redesign a Dropdown List for Mobile with Tailwind
Taught by
Adam Wathan
Related Courses
Learn Laravel 7 along with REST API & LivewireUdemy Complete Guide to Tailwind - Master Pinterest with Tailwind
Udemy Tailwind CSS Tutorial
Net Ninja via YouTube The Complete Pinterest Marketing Guide for Creatives
Udemy Tailwind CSS
YouTube