Design Shack - Web design showcase, CSS tutorials and web standards

Code a Useful Expanding Vertical Navigation Menu

February 6th, 2012    5 Comments

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

Weekly Freebies: 30 Amazing Free Fonts From Behance

Welcome to another installment of our weekly collection of awesome design freebies from around the web. This time we have a real treat: thirty gorgeous free fonts from Behance. There’s a ton of great work on that site and if you know where to look you can score some spectacular finds.

Peruse the options below and download your favorites, then feel free to leave a comment to let us know what you think.

5 Online Playgrounds for HTML, CSS and JavaScript Compared

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

How to Create a Facebook Timeline Cover Photo: Examples and Best Practices

Facebook announced Jan. 24 that it will be moving all users to the timeline format in the next few weeks. Although the change will be mandatory soon, you can make it early as some users have been doing since it was launched in September. Timeline is the new Facebook “wall” and highlights your personal information based on when it happened.

The biggest visual change included in Facebook timeline is creation of a cover photo. When someone lands on your page they not only see a small square profile image but also a large photo that you have selected for the top of your page. The shape can a little intimidating and includes a hole where the profile image rests. But you can crop or create your own timeline cover photo in just a few minutes. Follow along as we take a look at some great examples and advice for creating the perfect cover photo.

10 Awful Client Cliches That Make Every Designer Cringe

This is the third part in our series all about making fun of design related clichés that drive us all crazy. We’ve already picked on designers plenty with 5 Former Design Trends That Aren’t Cool Anymore and 5 Cliché Logo Design Trends to Avoid, now it’s time to turn around and give some attention to all the crazy things that clients say to their designers.

We put out the word on Twitter and asked for some of the worst things that you hear again and again from clients. The following are some of our favorites.