A Pen by Ruocaled.

CSS3-SAO-flyout-menu-.markdown

CSS3 SAO flyout menu

made with fonts awesome, sass and css3. (Work in progress)

A Pen by Ruocaled on CodePen.

License.

CSS3-SAO-style-flyout-menu-.markdown

CSS3 SAO style flyout menu

made with fonts awesome, sass and css3. (Work in progress)

A Pen by Mark Ni on CodePen.

License.

index.html

<p>Move the cursor to the bottom left side of the page to show hidden menu.</p>
<nav class="sao" rule="navigation">
    <ol>
        <li><i class="fa fa-user"></i>
            <ol>
                <li><i class="fa fa-home"></i> Homepage</li>

                <li><i class="fa fa-camera"></i> Photostream
                    <ol>
                        <li><i class="fa fa-picture-o"></i> Asuna.jpg</li>
                        <li><i class="fa fa-picture-o"></i> Leafa.jpg</li>
                        <li><i class="fa fa-picture-o"></i> Alice.jpg</li>
                    </ol>
                </li>

                <li><i class="fa fa-calendar"></i> Calendar</li>

            </ol>
        </li>
        <li><i class="fa fa-group"></i>
            <ol>
                <li><i class="fa fa-facebook"></i> Twitter</li>
                <li><i class="fa fa-twitter"></i> Facebook</li>
                <li><i class="fa fa-flickr"></i> Flickr</li>
            </ol>
        </li>
        <li><i class="fa fa-comments">
        </i></li>
        <li><i class="fa fa-map-marker"></i></li>
        <li><i class="fa fa-cog"></i></li>
    </ol>

</nav>

script.js

//move the cursor to the bottom left side of the page to show hidden menu

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Lato);

body {
  background-color: #292D37;
  color: white;
  background-repeat: no-repeat;
}

p {
  text-align: center;
  font-size: 30px;
  font-family: 'Lato', sans-serif;
}

@import url(http://fonts.googleapis.com/css?family=Dorsa);

$primary-color: #f5c722;
//orange
$secondary-color: #efeff1;
//gray

//first level icon size, most things looks good just changing these two parameters. Suggested:(80,2),(100,3)
$c-height: 80;
$border-thickness: 2;

//distance bettween each icon
$c-margin-bottom: 20;

//distance bettween border and inner icon circle
$c-inner-offset: 5;

//number of first level icons
$first-level-num: 5;

//distance to travel when fly in
$offset: 800;

//submenu settings

$tip-width: $c-height / 2.4;

$tip-side: $c-height / 5;

$s-width: 300;

//max number of submenus in level two
$max-level-two-num: 5;

//quick hand mixins for animations

@mixin keyframes($animationName) {
  @-webkit-keyframes $animationName {
	@content;
  }
  @-moz-keyframes $animationName {
	@content;
  }
  @-o-keyframes $animationName {
	@content;
  }
  @keyframes $animationName {
	@content;
  }
}

//top level menu

.sao {
  position: absolute;
  bottom: 0;
  left: 0;

  ol, li, nav {
	margin: 0;
	padding: 0;
  }

  > ol {

	height: #{($c-height * ($first-level-num + 1 ) + $c-margin-bottom * ($first-level-num))}px;
	width: 240px;
	position: relative;

	&:hover {
	  >li {
		opacity: 1;
	  }
	}

	> li {
	  cursor: pointer;
	  position: absolute;
	  bottom: #{ $first-level-num * ($c-height + $c-margin-bottom) + 500 }px;
	  left: 20px;

	  -webkit-transform: translate3D(0, 0, 0);
	  opacity: 0;

	  border: rgba($secondary-color, 0.5) #{$border-thickness}px solid;
	  margin-bottom: #{$c-margin-bottom}px;
	  list-style: none;
	  display: block;
	  height: #{$c-height}px;
	  width: #{$c-height}px;
	  border-radius: 50%;
	  text-align: center;

	  > i {
		display: block;
		position: relative;

		margin: #{$c-inner-offset}px auto 0 auto;
		height: #{$c-height - $c-inner-offset * 2}px;
		width: #{$c-height - $c-inner-offset * 2 }px;
		background-color: rgba($secondary-color, 0.5);
		border-radius: 50%;

		line-height: #{$c-height - $c-inner-offset * 4 }px;
		font-size: #{ $c-height / 2 }px;
		color: #b0afb4;
		text-shadow: 0 -1px 0 rgba(black, 0.7);

		&:before {
		  display: block;
		  padding-top: #{$c-inner-offset}px;
		}
	  }

	  &:hover {
		border-color: $primary-color;

		> i {
		  background-color: $primary-color;
		  color: white;
		}
	  }

	}

  }

}

@for $i from 0 through ($first-level-num - 1) {

  @include keyframes(fly-in-#{$i + 1}) {
	0% {
	  bottom: #{ $first-level-num * ($c-height + $c-margin-bottom) + $offset }px;
	  opacity: 0
	}

	#{ ($first-level-num - $i - 1) * 12% + 20%} {
	  opacity: 1;
	  bottom: #{ ($first-level-num  - $i - 1 ) * ($c-height + $c-margin-bottom)}px;

	}

  }

  .sao > ol:hover >li:nth-of-type(#{$i + 1}) {
	$animation-name: fly-in-#{$i + 1};
	-webkit-animation: $animation-name 1.5s ease-in-out;
	-moz-animation: $animation-name 1.5s ease-in-out;
	-o-animation: $animation-name 1.5s ease-in-out;
	animation: $animation-name 1.5s ease-in-out;
	bottom: #{ ($first-level-num  - $i - 1 ) * ($c-height + $c-margin-bottom)  }px;
  }

}

//submenu
.sao > ol li:hover  > ol {
  display: block;
}

.sao > ol > li {
  //general rules for all sub menus
  ol {
	display: none;
	position: absolute;
	left: #{$c-height - 2 * $c-inner-offset}px;
	bottom: #{- ($c-height)}px;
	@include background-image(linear-gradient(top, transparent 0%, rgba(white, 0.9) 51%, transparent 100%));
	background-size: 2px 100%;
	background-repeat: no-repeat;
	background-position-x: 60px;

	> li {
	  position: relative;
	  list-style: none;
	  font-weight: 800;
	  width: #{$s-width}px;
	  height: #{ $c-height - 2 * $c-inner-offset}px;
	  line-height: #{ $c-height - 2 * $c-inner-offset}px;
	  margin-bottom: #{$c-inner-offset}px;
	  background-color: rgba(white, 0.9);
	  margin-left: #{$tip-width * 2}px;
	  position: relative;
	  opacity: 0;
	  font-size: #{ $c-height / 2 }px;
	  letter-spacing: #{ $c-height / 30 }px;
	  text-align: left;
	  padding-left: #{$c-margin-bottom}px;
	  text-shadow: 0 0;
	  font-family: 'Dorsa', sans-serif;
	  color: rgba(black, 0.6);
	  @include transition(margin-left 100ms ease-in-out);

	  &:hover {
		background-color: $primary-color;
		color: white;

		> i {
		  background-color: white;
		  color: $primary-color;
		}
	  }

	  //add triangle tooltip to the second last item in the list
	  &:nth-last-of-type(2):before {
		content: '';
		border-top: #{$tip-side}px solid transparent;
		border-bottom: #{$tip-side}px solid transparent;
		border-right: #{$tip-width}px solid rgba(white, 0.9);

		display: block;
		position: absolute;
		left: #{- ($tip-width + 5 )}px;
		top: #{$c-height / 2 -  $tip-width / 2 }px;
	  }

	  //add little dot that does nothing
	  &:nth-last-of-type(2):after {
		content: '';
		display: block;
		border-radius: 50%;
		width: 8px;
		height: 8px;
		background-color: rgba(black, 0.6);
		position: absolute;
		left: #{- ($tip-width) / 2}px;
		top: #{$c-height / 2 - $c-inner-offset}px;
	  }

	  > i {
		display: inline-block;
		color: white;

		font-weight: normal;
		border-radius: 50%;
		height: #{ ($c-height - 2 * $c-inner-offset)*0.6}px;
		width: #{ ($c-height - 2 * $c-inner-offset)*0.6}px;
		background-color: rgba(black, 0.6);
		font-size: #{ $c-height / 4 }px;
		line-height: #{ ($c-height - 2 * $c-inner-offset)*0.6}px;
		text-align: center;
		margin-right: #{$c-inner-offset * 2}px;

		vertical-align: text-bottom;
	  }

	}
  }

  //second level specific style

  > ol {
	&:hover {
	  background-image: none;
	  > li {
		margin-left: #{$tip-width * 2 - 5}px;
	  }
	}

	>li {
	  &:nth-last-of-type(2):hover:before {
		border-right: #{$tip-width}px solid $primary-color;
		left: #{- ($tip-width - 1 )}px;
	  }

	  &:nth-last-of-type(2):hover:after {
		display: none;
	  }

	  //third and futher level menu overwrite
	  ol {
		//move closer
		left: #{ - 5 * $c-inner-offset + $s-width}px;

		>li {
		  opacity: 1;
		}

	  }

	}
  }

}

@include keyframes(fade-in) {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}

  }

@for $i from 0 through ($max-level-two-num - 1) {
  

  .sao > ol > li:hover  > ol > li:nth-of-type(#{$i+1}) {
	$animation-name: fade-in;
  -webkit-animation: $animation-name 0.1s ease-in #{100*$i}ms both;
	-moz-animation: $animation-name 0.1s ease-in #{100*$i}ms both;
	-o-animation: $animation-name 0.1s ease-in #{100*$i}ms both;
	animation: $animation-name 0.1s ease-in #{100*$i}ms both;


  }

}