Design Shack — Web Design Gallery, Articles & Community

40 Awesome jQuery Plugins You Need to Check Out

The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.

The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.

How to Build a Responsive Slide-Down Navigation Menu

After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.

For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.

Simple Steps for Creating a Fixed Navigation Bar

When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.

In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!

20 Fantastic jQuery Web Type Plugins

In recent years, web typography has gone from an embarrassment to a point of pride. From CSS to JavaScript, we’re gaining great tools almost daily that help us implement awesome type.

Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.

25 Useful Resources for Creating Tooltips With JavaScript or CSS

Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.

We all agree on how great tooltips are, but how we go about implementing them can differ dramatically. If you’re at square one, looking for some tooltip ideas for your current project, you’ve come to the right place. We’ve got a whopping twenty-five different options that fall into two categories: JavaScript and CSS. No matter which method you’re looking to use, we’ve got the best techniques available.

40 Awesome MooTools Plugins You Need to Check Out

Recently, we published an outstanding collection of 40 jQuery plugins that every developer should check out. Today we’re following that up with some love for the MooTools crowd.

Like jQuery, MooTools has an awesome community of developers that constantly churn out stellar free plugins for all types of tasks and interfaces. In this collection you’ll find plugins for sliders, lightboxes, tags, navigation and a lot more.

Developing a Mind-Blowing Personal Portfolio in 3 Weeks

So you decided you are going to design and develop yourself a personal portfolio. That’s great! You are well ahead of half of the web design and development community. But what about the remaining 50%? You have to show exclusive skills in a tiny space in order to shine in this fast growing industry.

In the past 3 weeks – since I made that decision, I learned a lot about developing a unique portfolio. Now I feel it is time to share this newly acquired knowledge with you.

What I came up after those 3 weeks is a cool game-inspired portfolio.

A Designer’s Introduction to Programming

Designers are often quite hesitant to venture beyond the realms of HTML and CSS into the territory of scripting and programming languages, and for good reason. Programming requires a very different set of skills than mocking up web pages. Further, there are so many different things to learn that most designers don’t even know where to begin: JavaScript, PHP, Ruby, Rails, how can you possibly keep up?

However, in practice, programming turns out to be much less scary than designers imagine it to be. Today I’m going to show you how programming is a skill that you can learn once and then apply to each new language that you pick up. We’ll take a look at three different programming constructs in three different languages to see how similar they really are. If you’d like to get started in programming but don’t know a single thing about it, this article is for you.

Design an iPhone App Website Template With E-Mail Signup

If you’ve been on the scene with iOS then you’ve surely seen some of the beautiful app websites cropping up. These have been released over the past couple of years as developers have been looking for ways to attract marketing potential. There are a lot of very standard-looking templates out there for web designers – but my hope is to tackle something new!

Today we’ll be creating a styled iPhone App website template using HTML5/CSS3. This will not be targeted onto a specific app, so we don’t include a download link to the app store. Instead I’ve created a small e-mail signup form through MailChimp so you can hook early adopters into the app for pre-release. This is great for developers who need to get something up and running for their product before it’s on the market.

Code a Web Magazine Style Dropdown Navigation Menu

Frontend web development has grown into a very popular niche. With the expansion of jQuery more web designers are beginning to create fantastic animations and page effects. The possibilities are limitless!

In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.