Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Menus are such a ubiqutious need for websites they are hard to even talk about as a pattern. They are a million ways to do them, from the simple and mundane to the exotic and interactive. They stand between your users and your content though, so you have to do it right. Let’s have a play at designing a menu this week.

Your challenge this week: take this Pen and style the menu.

How to Participate

Create a Pen and tag it codepenchallenge and cpc-menus. We’ll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

• Notice the nested lists in these menus. Which way are you going to take it? Display all the items all the time, or make it interactive with some way to reveal the sub menus?
• Menus these days have the unique challenge of needing to accomodate both huge and tiny screens. Can you make this menu work both ways?
• The unstyled Pen is incredibly boring as-is. Is there some way to make it even more boring?

Resources

• Have you seen the :focus-within CSS selector? It might be able to help.
• There are a number of official CodePen Patterns collections that you can reference, like menu icons, tabs, and dropdown menus. Notice on that Patterns page how there are three ways to browse: the collection, search, or the tag.
• CSS play has literally hundreds of menus check out.

Thanks to our Sponsor!

This month’s challenge is sponsored by Jetpack — the ideal way to experience WordPress. We use it right here on this blog!

JetPack is a WordPress plugin that combines all sorts of powerful functionality into a single plugin. Here’s a handful of things it can do:

• Secure and back up your site.
• Connect your social media accounts for easy publishing after posting.
• Enable Markdown and editing enhancements.
• Increase performance though CDN-hosted and responsive images and video.