40 Creative Navigation Menus

289

One of the first things to do when planning out a new website is to work out all of the content that will be in the site. You then divide that up into sections and then into various levels of navigation.

The result is a boring list of links.

That list of links is one of the most important part of your website though, it goes without saying that every visitor to the site will be using them to get around.

In this post we’ve pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you ideas to enhance your own.

Read More »

10 Ways to Install Accordion Menus in Your WordPress Theme

82

accordion-menu

Today you will learn 10 ways to install accordion menus in your Worpress theme!

This will help to organize your blog, make your site look more professional, and possibly save you some precious real estate in your layout. Real estate on a blog is as important as it is in the real world (especially in congested areas), you need to make the most out of your space as you can.

accordion-handsAccordion menus get their name from the instrument of the same name. Much like the bellows going in and out as someone plays music on an accordion, an accordion menu expands and contracts from user interaction, one section at a time.

This way top level names are listed at all times, but sub-categories and child items are only exposed as each section is expanded. Your visitors only see what they need to at any given time.

Read More »

How to Create Dropdown Navbars for Your Subpages and Subcategories

78

milodropdown1

In this tutorial, you will see how to display your sub-categories in an animated dropdown, and how to create similar dropdowns for sub-pages as well. You’ll even be able to highlight the page your reader is currently on.

The code is written by milo, and you  can see a demo of it in use in one of her free WordPress themes; Nash (Check out the two nav menus in the black header).

The code is very easy to set up and you will have no trouble there. You will want to edit the CSS in the end to make it match your theme, but even for beginners, a little meddling will get you through.

Read More »

Add Google-Style Page Navigation to your Category and Search Pages

30

milopage1

It can be very tedious to navigate through a category on a WordPress blog. Your navigation options tend to be limited to “Next Page”/”Previous Page".

Not the most efficient method in the world…

When you do a search on Google, you can skip to page 3, 4, 5 or anything else. And once you do, you can always click back to page 1. It makes flicking through a large number of results much, much easier.

So, why don’t we recreate that in WordPress? Milo is going to show us how.

Read More »

Get Total Control Over Your Page Styles With CSS

34

bodyids1

A WordPress site is made up of lots of different types of pages. The home page, post pages, category pages etc. So what if you could control how each of these looked individually?

You could create different template files for each, but that’s time consuming and makes it difficult to easily update across your whole website.

In this article, we’ll show you how you can set the <body> tag to have a different ID depending on the type of page, and then how you can use CSS to style the page any way you like because of that. No more template editing needed in the future!

Read More »

Design Review: Dillydesigns.com

23

Housewife confessions blog. Dillydesigns.com is a blog run by Evelester, and it has nothing to do with design. The blog hosted here is actually called Confessions of a Housewife and is her personal advice blog, with a very distinct style.

What Has Been Done Well?

  • Cartoon drawing. Easily the most memorable aspect of this blog’s design is the cartoon housewife fixed in the background. The smiling housewife, hard at work with the house chores is a great design, and a uniquely memorable feature. You won’t forget her in a hurry.

Read More »

Design Review: Carlocab.com

18

Carlocab Carl Ocab writes a blog on how to make money online. There are many, many sites about making money online, but this one is different. Carl is 14 years old. Starting at age 13, he has worked up his way to 300 subscribers, and designed the theme himself! When Carl asked for a review, I was happy to oblige.

What Has Been Done Well?

  • Style. Carl is 14, and he’s proud of it. Perhaps the site could have looked more professional? Traditional? Dollar-bill-green? Instead, Carl’s theme is modern and forward. It’s a new generation. New advice. A classic design just wouldn’t cut it for him.
  • Color and logo. The color and logo are the main proponents of the style here. The highly contrasting black and white colors, mixed with the dark red look modern. The logo is fantastic, not because of the modern font, but look at the decoration behind it. It’s not just a decoration. It’s a graph! A perfect fit with the blog’s topic.

Read More »