5

I want to know whats the name of the navigation of these sites bellow:

I searched for 'responsive grid', but its refers to all site, and its not what i want. I want to know the name of the navigation of the news, that adjust in a animation to screen size.

|improve this question
4

If you are talking about the way the components re-position themselves when the screen-size changed then the word you are looking for is relayout. The layout pattern is called masonry or cell based layout.

There are many plugins that let you implement such layouts. See Isotope.

|improve this answer
  • That is exactly what i was talkin about. Thank you! – J.Vinicius Apr 22 '14 at 19:31
  • It's colloquially referred to as "Metro" style Navigation, since Microsoft most recently popularized it. Personally, I think it has far too much in common with the early 2000s mystery meat navigation for my tastes. Your navigation is supposed to effectively impart information to the end user, not entertain them. Leave the entertainment to your site content. Any time you force the end user guess, wait, or iterate you lose engagement. – Imperative Apr 22 '14 at 20:20
2

I've seen it called an off-canvas navigation, a slideout menu, slideout navigation, and simply a responsive navigation. It's built into Bootstrap, which is one of the most popular responsive frameworks, so you'll see more of it as more sites implement responsive design.

|improve this answer
  • hm I guess your answers refers to the style of menu, and I wanted to know not the menu's name, but the navigation of the news that adjust in the grid. Thanks anyway! – J.Vinicius Apr 22 '14 at 16:01
  • Oh okay, I think I understand what you're asking about. There's an article on how to do that here (called Animated Media Queries): css-tricks.com/animated-media-queries. Check out the demo: codepen.io/chriscoyier/full/tynas and watch the light blue "Search" box move positions slowly. The grid is using a responsive design with elements changing positions based on window width; the repositioning is animated with CSS Transitions. – PixelGraph Apr 22 '14 at 17:24
0

I would say the type of navigation for the sites you listed above is "Category Navigation. You can read more about different types of navigation here and also another example of "Category Navigation" which relates to it example. Hope this helped.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.