Types of page with fixed navigation menu

From the resource:   Matthew Smith (netmagazine.com), Designboms và  Joshua Johnson (designshack)

There are 2 kinds of fixed navigation menu: horizontal fixed navigation and vertical fixed navigation. When could we use horizontal fixed navigation and when could we use vertical horizontal? Could we mix horizontal and vertical in our design? what is advantage and disadvantage?

1. Horizontal  page with fixed navigation menu:

It is good for web that have the landscape, that make user have experiment and playful in landscape => could be apply in introducing factory involve in working with garden, landscape, ect,…

Take a look some horizontal fixed navigation to see how it works.

1.1  Horizontal page- left fixed navigation

Netontwerp (http://www.netontwerp.com/index_en.htm):

  1. use left fixed navigation menu
  2. Small site, small content
  3. left fixed navigation take a 1/3 web page

Conclusion: This web is a good solution for small web contents such as : portfolio, introduce company

 1.2 Yii-Craft (http://www.yiidesign.com/en/collection.php)

2. Vertical page with fixed navigation menu:

Vertical fixed navigation is a kind of fixed navigation that the page can fixed the menu land scroll on vertical page. It is good for blog, shopping website.

2.1.Vertical page- left fixed navigation

2.1.1 The Black Estate (http://www.blackestate.co.nz/)

  1. Use left fixed navigation menu
  2. Small  content web
  3. Left fixed navigation take a 1/10 web page
  4. fixed navigation use transparent that users could see the content.
  5. Could not lose way in this page with fixed navigation


2.1.2  Parachute (www.madebyparachute.com)

  1. Use left fixed navigation menu
  2. Small  content web
  3. Left fixed navigation take a 1/10 web page
  4. fixed navigation use transparent that users could see the content.
  5. Could not lose way in this page with fixed navigation
  6. The logo and fixed navigation occupy 1/3 page=> do not have space for products


2.1.3 Virgin ( (http://www.virginracing.com/) )

  1. Use left fixed navigation menu
  2. Medium  content web, use big pictures on the right
  3. Left fixed navigation take a 1/10 web page
  4. Could not lose way in this page with fixed navigation



2.1.4 Doug Neiner (http://dougneiner.com/)



2.1.5

2.1.6

 http://progresspackaging.co.uk/luxury-items

2.2 Vertical  page – right fixed navigation 

2.2.1  Fat-man (fat-man-collective.com):

  1. Use right fixed navigation menu
  2. Small  content web, use big pictures on the right
  3. Left fixed navigation take a 1/10 web page
  4. Could not lose way in this page with fixed navigation
  5. Interactive man that can animate, jump, move body  when scrolling  pages.

2.2.2 Piensa en Pixel (http://www.piensaenpixels.com/) 

  1. Use right fixed navigation menu
  2. Medium content web, use big pictures on the right
  3. Left fixed navigation take a 1/6 web page
  4. Could not lose way in this page with fixed navigation

2.2.3  Efektivedesign(http://www.effektivedesign.co.uk/

  1. Use right fixed navigation menu
  2. Medium content web, use big pictures on the right
  3. Left fixed navigation take a 1/5 web page
  4. Could not lose way in this page with fixed navigation
  5. Content (text+picture)

2.2.4 Deda (http://deda.me/)

  1. Use right fixed navigation menu
  2. Small content web, use big pictures on the right
  3. Left fixed navigation take a 1/20 web page
  4. Could not lose way in this page with fixed navigation

2.3 Vertical page- top fixed navigation

  1. Use right fixed navigation menu
  2. Small content web, use big pictures on the right
  3. Left fixed navigation take a 1/10 web page
  4. Could not lose way in this page with fixed navigation

2.3.1 Campaignmonitor (http://www.campaignmonitor.com/templates/)

  1. Use top fixed navigation menu
  2. Medium  content web
  3. Left fixed navigation take a 1/20 web page=> use small real state.
  4. Could not lose way in this page with fixed navigation
  5. Can  jump up or jump down if users click on options in menu

2.3.2. Academy (http://www.weareacademy.com/page/projects/):

  1. Use top fixed navigation menu
  2. Medium  content web, use big pictures more then text
  3. Left fixed navigation take a 1/20 web page=> use small real state.
  4. Could not lose way in this page with fixed navigation
  5. Can not use the effect ” jump up, jump down” . When click onto options, it opens a new page.

2.3.3.  Strukaxiom ( http://struckaxiom.com/blog/)

  1. Use top right fixed navigation menu +logo company=> easy to identity the brand
  2. Medium  content web (blog, work, work, contact)
  3. Left fixed navigation take a 1/30 web page=> use small real state.
  4. Have sub header under the main header (with simple keyword)
  5. Could not lose way in this page with fixed navigation. Use color to emphasis the content.
  6. Can not use the effect ” jump up, jump down” . When click onto options, it opens a new page.
  7. Use  “fade out” effect when opening a new pages

4.4 Trang DKNG (http://www.dkngstudios.com/work/posters/#the-swell-season-deer) cũng sử dụng menu  nằm ở đầu trang, giúp cố định trang và dễ nhận dạng thương hiệu công ty. Tương tự trang web StruckAxiom, khi lăn chuột các hình ảnh bên dưới sẽ trượt lên trên, menu cố định (chứa các header) và thương hiệu công ty  luôn nằm ở phần đầu trang. Ngoài ra trang này còn có thêm một sub header, nhưng sub header này lại nằm bên trái của trang. (xem lại)

2.3.4.  Themolitor (http://www.themolitor.com/category/portfolio/)

  1. Use top right fixed navigation menu +logo company=> easy to identity the brand
  2. Medium  content web (work, service, about, blog, contact)
  3. Left fixed navigation take a 1/50 web page=> use very small real state. Use text only for menu.
  4. Can not use the effect ” jump up, jump down” . When click onto options, it opens a new page.
  5. Use  “fade out” effect when opening a new page.

2.3.5.  Satellitevoice ( http://www.satellitevoices.com/paris/photography)

  1. Use top right fixed navigation menus. There are many part: city and topic in menu => very detail. Only use text for design menu
  2. Medium  content web
  3. Left fixed navigation take a 1/20 web page=> use  small real state. Use text only for menu.
  4. Can not use the effect ” jump up, jump down” . When click onto options, it opens a new page.

2.3.6.   Twofishillustration  (http://twofishillustration.com/)

  1. Use top right fixed navigation menus.  use  small real state,
  2. Medium  content web (profolio: introduction, my work, profile, hire me)
  3. Use very small real state for menu=> minimalist and modern design

Advertisements
Comments
One Response to “Types of page with fixed navigation menu”
  1. Johnc820 says:

    Hey I am so excited I found your website, I really found you ecfcaegbbeek

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: