Showing posts with label menu-navigation. Show all posts
Showing posts with label menu-navigation. Show all posts

Monday, January 11, 2016

Vertical Fixed Navigation #2

Vertical Fixed Navigation

A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.

Our first concept of vertical fixed navigation is one of our most popular resources. This time, we tried to push this concept a little further.

The basic idea behind putting round indicators on the side of a web page, is to give a hint to the user about the number of sections she/he can go through. We think of each dot as a content chapter, with its own title. Usually, users have to hover over a dot to access the title.

In an attempt to simplify this pattern, we decided to transform the dots when the user interacts with them, by scaling them up and showing an icon + label. Users don't need to select a specific dot/item, but just move to the side, thus showing their willingness to access the navigation.

Here is a quick preview of the final result (created using After Effects):

Vertical Fixed Navigation

Icons: Nucleoapp.com

Creating the structure

Our navigation is an unordered list wrapped in a nav.cd-vertical-nav. A button.cd-nav-trigger is used to open the navigation on small devices.

Besides, a section.cd-section has been created for each navigation item.


 

 

Vertical Fixed Navigation #2

scroll down

Adding style

On small devices (viewport width smaller than 800px), we set a position: fixed for the .cd-nav-trigger and nav elements and placed them at the bottom-right corner of the page; we then scale down the navigation, using the bottom-right corner as transform origin.

When user clicks on the .cd-nav-trigger element, we give the .open class to the navigation to change its scale value from 0 to 1, with a CSS3 transition to achieve a smooth animation.

.cd-nav-trigger {
  display: block;
  position: fixed;
  z-index: 2;
  bottom: 30px;
  right: 5%;
}
 
.cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  transform: scale(0);
  transform-origin: right bottom;
  transition: transform 0.2s;
}
.cd-vertical-nav.open {
  transform: scale(1);
}

On bigger devices, we use Modernizr to detect touch and no-touch devices (using .touch and .no-touch classes).

On touch devices, the lateral navigation items (labels and icons) are visible by default, while on no-touch devices they are shown when the user hovers over the lateral navigation.

We set a fixed height and width for the nav element, and place it on the right side of the viewport. We use its ::before pseudo-element to create the navigation background; on no-touch devices only, the ::before element is, by default, translated to the right (outside the viewport) and is moved back to its original position when the user hovers over the navigation. The same happens for the span.label elements.

@media only screen and (min-width: 800px) {
  .cd-vertical-nav {
    right: 0;
    top: 0;
    height: 100vh;
    width: 90px;
  }
  .cd-vertical-nav::before {
    /* this is the navigation background */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    transition: transform 0.4s;
  }
  .no-touch .cd-vertical-nav:hover::before, 
  .touch .cd-vertical-nav::before {
    transform: translateX(0);
  }
  .cd-vertical-nav .label {
    display: block;
    transform: translateX(100%);
    transition: transform 0.4s;
  }
  .no-touch .cd-vertical-nav:hover .label, 
  .touch .cd-vertical-nav .label {
    transform: translateX(0);
  }
}

To create the navigation item icons and dots, we use, respectively, the ::after and ::before pseudo-elements of the navigation anchor elements (a). On no-touch devices only, the ::after and ::before are scaled down by default and then scaled back up when the user hovers over the navigation.

@media only screen and (min-width: 800px) {
  .cd-vertical-nav a {
    position: relative;
    padding: 3em 0 0;
    margin: 1.4em auto;
  }
  .cd-vertical-nav a::before, 
  .cd-vertical-nav a::after {
    /* used to create the filled circle and the background icon */
    content: '';
    position: absolute;
    left: 50%;
    transition: transform 0.4s 0s;
  }
  .cd-vertical-nav a::before {
    /* filled circle */
    top: 0;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #eaf2e3;
    transform: translateX(-50%) scale(0.25);
  }
  .cd-vertical-nav a::after {
    /* icon */
    top: 8px;
    height: 16px;
    width: 16px;
    background: url(../img/cd-nav-icons.svg) no-repeat;
    transform: translateX(-50%) scale(0);
  }
  .no-touch .cd-vertical-nav:hover a::before, 
  .no-touch .cd-vertical-nav:hover a::after, 
  .touch .cd-vertical-nav li:nth-of-type(n) a::before, 
  .touch .cd-vertical-nav li:nth-of-type(n) a::after {
    transform: translateX(-50%) scale(1);
  }
}

Now the tricky part: when the navigation dots are scaled down, they are too distant one from the other. We can reduce this distance translating them along the Y axis.

Let's start from the central dots (in our case, the second and the third); we want to translate down the second one (so we have to use a positive translate value), while we want to translate up the third one (so we have to use a negative translate value). In our case we have:

.cd-vertical-nav li:nth-of-type(2) a::after {
    transform: translateX(-50%) translateY(1.5em) scale(0);
  }
  .cd-vertical-nav li:nth-of-type(2) a::before {
    transform: translateX(-50%) translateY(1.5em) scale(0.25);
  }
  .cd-vertical-nav li:nth-of-type(3) a::after {
    transform: translateX(-50%) translateY(-1.5em) scale(0);
  }
  .cd-vertical-nav li:nth-of-type(3) a::before {
    transform: translateX(-50%) translateY(-1.5em) scale(0.25);
  }

Then, the translate value for the first dot is gonna be three times the one of the second dot, and the same for the fourth one (three times the translate value of the third dot).

.cd-vertical-nav li:first-of-type a::after {
    transform: translateX(-50%) translateY(4.5em) scale(0);
  }
  .cd-vertical-nav li:first-of-type a::before {
    transform: translateX(-50%) translateY(4.5em) scale(0.25);
  }
  .cd-vertical-nav li:nth-of-type(4) a::after {
    transform: translateX(-50%) translateY(-4.5em) scale(0);
  }
  .cd-vertical-nav li:nth-of-type(4) a::before {
    transform: translateX(-50%) translateY(-4.5em) scale(0.25);
  }

If you have a different number of navigation items, you have to change these translate values accordingly. For example, if you have six items, starting again from the central dots (in this case, the third and the fourth), you can assign them a translateY value of 1.5 em/-1.5em; then to the second and the fifth a translateY value of 4.5em/-4.5em (3*1.5), and finally to the first and sixth a translateY value of 7.5em/-7.5em (5*1.5).

If you have an odd number of items, let's say 5, you do not translate the central one (in this case the third one). You then assign a translateY value of 3em/-3em(2*1.5) to the second and the fourth dots, and finally a translateY value of 6em/-6em(4*1.5) to the first and fifth dots.

Events handling

When user scrolls through the sections, the updateSections() function evaluates which section is currently being viewed and assigns the .activebutton.cd-nav-trigger to open/close the navigation on small devices.


Wednesday, November 25, 2015

Creating an Animated Menu Indicator with CSS Selectors

Animated Menu Indicator with CSS Selectors

In this article, I'll cover creative ways of using sibling selectors and pseudo elements to make a CSS-only menu indicator that would normally be achieved using JavaScript.

Friday, June 20, 2014

Responsive Multi-level Menu

Responsive Multi-level Menu

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the "parent" level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Saturday, May 03, 2014

Off Canvas Menus with CSS3 Transitions and Transforms

Off Canvas Menus

Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we'll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Tuesday, December 24, 2013

Challenges & Solutions for Your Responsive Navigation

Responsive Navigation

One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page, a user should have no issues as they try to navigate around your website no matter what device they are on.

Wednesday, November 06, 2013

E-Commerce Navigation: Show Sibling Categories for Easy Scope Adjustment

E-Commerce Navigation

Sibling categories – that is, categories that are placed next to one another in the site's category taxonomy – are hugely important as they enable users to make easy scope adjustments and better interpret the current scope.

Thursday, October 03, 2013

Animated border menus

Animated border menus

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps.

Monday, September 30, 2013

Targeting menu elements with submenus in a navigation bar

Targeting menu elements with submenus in a navigation bar

You might be aware of the jQuery .has method, which allows you to select an element if it has any of another selector as a descendant. There is sadly no such selector in CSS yet. But if you know a little something about the HTML structure, you can use a combination of positional selectors to mimic it.

Thursday, May 30, 2013

Create An Animated CSS Box Menu

Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into the box to represent the page on the navigation.

Tuesday, April 09, 2013

Better Navigation Through Proprioception

Better Navigation Through Proprioception
Close your eyes and touch your nose. How did you do it? How did you sense where your hand was and direct it to the right point? You're not using sight, hearing, taste, smell, or touch (except right at the end). Instead, you're relying on proprioception: the sense of your body's position in space and the position of various parts of the body in relation to each other.

Wednesday, April 03, 2013

Horizontal centering using CSS fit-content value

Horizontal centering using CSS fit-content value

Further reading: Centering Things

The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it's about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths.

Tuesday, December 18, 2012

The creation of a CSS3 clickable, rotating menu

CSS3 clickable, rotating menu

Over the past few days I've been messing around with transitions and transforms and managed to come up with this little menu. It incorporates a bunch of different CSS techniques, but is very experimental!

Sunday, November 25, 2012

Tiny Circleslider: who said sliders are boring?

Tiny Circleslider

Image - or, more general, content sliders are as popular as can be. There are plenty of them on the market. Design and functionality resemble, the choice of a slider is more or less a matter of taste. Tiny Circleslider is different though. This tool lets you place content elements in a circle. This makes for a futuristic look and feel.

Tuesday, October 16, 2012

Cool animated menu with jQuery

Cool animated menu with jQuery

In this tutorial we'll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

Tuesday, October 16, 2012

How to create accordion menu (CSS3 + jQuery)

How to create accordion menu (CSS3 + jQuery)

As you may noticed a few days ago we released a tutorial about How to Create an Accordion Menu in Pure CSS3. As this pure CSS3 Accordion Menu will not work on all browsers because the :target selector in not supported in the oldest browsers we decided to create a jQuery version of this menu. Also jQuery offers more stability and cross browser compatibility support so if you want to provide to your visitors/client a better product you may consider use this jQuery version.

Wednesday, October 10, 2012

CSS ribbon menu

CSS ribbon menu

This uses CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup.

Wednesday, October 10, 2012

Exceptional CSS navigation techniques

* Click on the images for more details and tutorials.

The Menu menu

CSS navigation

This another great CSS menu Stu Nicholls that's unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

Wednesday, October 10, 2012

Simple scalable CSS based breadcrumbs

Simple scalable CSS based breadcrumbs

A few days ago I was implementing breadcrumbs in a website I'm working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it's been a while since I last wrote about anything CSS-related. The one I'll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

Tuesday, October 02, 2012

The elements of navigation

Elements of navigation_1

This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. This is the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.

Wednesday, September 26, 2012

Slide down box menu with JQuery and CSS3

Slide down box menu with JQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left...