navigation

Sticky, Smooth, Active Nav

Just like the title says! Here's a sidebar navigation bar that...

  1. Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible.
  2. Scrolls smoothly to the sections you click to.
  3. Activates the current nav based on scroll position (it's a single page thing).

(more…)

Container-Adapting Tabs With “More” Button

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.

There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website…

(more…)

Solved with CSS! Dropdown Menus

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.

Let’s see if we can make one of these menus with CSS alone.

Listless Navigation – Using CSS To Do More With Less

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

  • Code much, much less XHTML
  • Separate website formatting from content
  • Control as much of the website theme/design as the developer allows himself with one CSS file
  • Easily adapt website display to the user instead of the user adapting to the website
  • Change the display of our website for specific devices and special circumstances

The list goes on and on. The functionality to do great things with less code is there; it's up to the developer to code the XHTML to take full advantage of the power of CSS. One place I often see CSS being under-utilized is with navigation menus.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag