1. envato-tuts+
  2. Home
  3. Web Design
  4. HTML/CSS
  5. CSS

Practical CSS: Desktop to Mobile Navigation Patterns

Adi PurdilaLessons: 7Length: 49 minutes
HTML/CSS CSS
Next Lesson

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.1 Welcome

Welcome to this short course, in which you’ll build five different types of website navigation, catering to desktop and mobile.

We’ll walk through examples for simple menus, which only contain a few items, and complex ones with submenus up to two levels deep.

I’ll be using pure CSS and a tiny bit of JavaScript, making it possible for anyone to follow along.

1.Introduction
2 lessons, 04:45

1.1
Welcome
00:49

1.2
A Simple, but Flawed, Approach
03:56

2.Simple Navigation Patterns
3 lessons, 24:52

2.1
Pattern 1: Slide Down Menu
07:28

2.2
Pattern 2: Full-Screen Overlay
08:03

2.3
Pattern 3: Overlay Mega Menu
09:21

3.Advanced Patterns
2 lessons, 19:29

3.1
Pattern 4: Off-Canvas
11:38

3.2
Pattern 5: Alternative Off-Canvas
07:51

1.1 Welcome

Creating your website navigation that looks the same on every device is not really possible. Because of the smaller screen size mobile devices require a different type of navigation. In this short course, you'll learn five different ways of converting a website navigation from a desktop format, to a mobile one. You'll see examples for both simple menus that only have a few items, to more complex ones that have some menus of up to two levels deep. I'll be using pure CSS and a tiny bit of JavaScript so anyone can follow along. I'm Adi Purdila welcome to Practical CSS, Desktop to Mobile Navigation Patterns. Let's begin.

Back to the top
Adi Purdila
Adi Purdila
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.
View on GitHub
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.