YoVDO

Build and Style a Dropdown in Tailwind

Offered By: egghead.io

Tags

Tailwind Courses Responsive Design Courses

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.

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

Mobile Web Development
Google via Udacity
iDESWEB, Introducción al desarrollo web
Miríadax
Information Design
University of California, San Diego via Coursera
Advanced Styling with Responsive Design
University of Michigan via Coursera
Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera