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

Front-End Web UI Frameworks and Tools: Bootstrap 4
The Hong Kong University of Science and Technology via Coursera
Build a Webpage with HTML and CSS
Board Infinity via Coursera
Build Restaurant Business Website using Google Sites
Coursera Project Network via Coursera
Build Training Website using Google Sites
Coursera Project Network via Coursera
Building High Quality User Experience Using Material UI
NIIT StackRoute via Coursera