Web Design Blog – CSS Tutorials, jQuery Tutorials, SEO Tips, Learning Advice, Personal News, and More

I recently wrote an article for DesignM.ag on how to create a fixed navigation layout with CSS. You can check out the article here!

Today I would like to go over how to create a fixed sidenav layout for your blog or website.

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling.

As I was checking out some flash sites for inspiration, I ran across a couple websites that had some nice navigation effects. I’m not a huge fan of wildly animated navs, but these had simple and elegant roll over effects that I liked. I decided to imitate the effect with CSS and jQuery, and would like to share this technique today.

Not too long ago I wrote a tutorial on how to create a drop down menu with CSS & jQuery, today I would like to go over how to create a simple navigation with a horizontal subnav.

In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds.

I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner.

For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tutorials out there.

A couple of weeks ago, a co-worker and I had a nice little debate about whether the       “+” / ” -” for an accordion/toggle element should be left aligned or right aligned.

Following my instinct, I felt it was appropriate that it should be left aligned since most readers read from left to right, and having the “+” / “-” icon close to the label on the left also gives it that extra indication that this element is collapsible. I also saw it closely related to how file trees are represented in common applications.

This is the second part to my previous article “CSS Beginners Do’s and Dont’s Part 1“, if you haven’t checked it out yet now is a good time. In part one, I went over general tips and reminders, in this article I would like to go over more of the technical aspects of CSS.

1. DO use Class/IDs Appropriately (Don’t whore your Class/IDs!)

Beginners typically have the tendency to create a new class or ID for every element on a page.

I recently wrote a tutorial on creating a jQuery driven drop down menu on www.Noupe.com.

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential.