Menu with blinds effect

<section class="demo">

    <dl class="list nigiri">
        <dt>Nigiri</dt>
        <dd><a href="#">Maguro</a></dd>
        <dd><a href="#">Sake</a></dd>
        <dd><a href="#">Unagi</a></dd>
        <dd><a href="#">Buri</a></dd>
        <dd><a href="#">Suzuki</a></dd>
        <dd><a href="#">Saba</a></dd>
        <dd><a href="#">Iwashi</a></dd>
        <dd><a href="#">Kohada</a></dd>
        <dd><a href="#">Hirame</a></dd>
        <dd><a href="#">Tobiwo</a></dd>
    </dl>

    <dl class="list maki">
        <dt>Maki</dt>
        <dd><a href="#">Ana-kyu</a></dd>
        <dd><a href="#">Chutoro</a></dd>
        <dd><a href="#">Kaiware</a></dd>
        <dd><a href="#">Kampyo</a></dd>
        <dd><a href="#">Kappa</a></dd>
        <dd><a href="#">Natto</a></dd>
        <dd><a href="#">Negitoro</a></dd>
        <dd><a href="#">Oshinko</a></dd>
        <dd><a href="#">Otoro</a></dd>
        <dd><a href="#">Tekka</a></dd>
    </dl>

    <dl class="list sashimi">
        <dt>Sashimi</dt>
        <dd><a href="#">Maguro</a></dd>
        <dd><a href="#">Toro</a></dd>
        <dd><a href="#">Ebi</a></dd>
        <dd><a href="#">Saba</a></dd>
        <dd><a href="#">Ika</a></dd>
        <dd><a href="#">Tako</a></dd>
        <dd><a href="#">Tomago</a></dd>
        <dd><a href="#">Kani</a></dd>
        <dd><a href="#">Katsuo</a></dd>
        <dd><a href="#">Maguro</a></dd>
    </dl>
    <a href="#" class="toggle">Toggle</a>
</section>

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
//Скрипт js надо подключать здесь

body {
  background-color: #0e3e50;
}
.list {
  -webkit-transform-style: preserve-3d;
  -moz-transform-stle: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  text-transform: uppercase;
  position: absolute;
  margin-left: -140px;
  top: 20%;
}

.list a {
  display: block;
  color: #fff;
}

.list a:hover {
  text-indent: 20px;
}

.list dt, .list dd {
  text-indent: 10px;
  line-height: 55px;
  background: #E0FBAC;
  margin: 0;
  height: 55px;
  width: 270px;
  color: #fff;
}

.list dt {
  /* Since we're hiding elements behind here, we need it in 3d */
  -webkit-transform: translateZ(0.3px);
  -moz-transform: translateZ(0.3px);
  -ms-transform: translateZ(0.3px);
  -o-transform: translateZ(0.3px);
  transform: translateZ(0.3px);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 15px;
}

.list dd {
  border-top: 1px dashed rgba(255,255,255,0.3);
  line-height: 35px;
  font-size: 11px;
  height: 35px;
  margin: 0;
}

/* UI */

.toggle {
  -webkit-transform: translateZ(100px);
  -moz-transform: translateZ(100px);
  -ms-transform: translateZ(100px);
  -o-transform: translateZ(100px);
  transform: translateZ(100px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 50px;
  margin-left: -70px;
  margin-top: -20px;
  background: #2b2b2b;
  text-align: center;
  font-size: 12px;
  position: absolute;
  z-index: 1;
  height: 50px;
  bottom: 10%;
  width: 140px;
  color: #fff;
  left: 50%;
}

.toggle:hover {
  background: #E42692;
}

/* No CSS 3D support warning */
.warning {
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  -ms-transform: translateZ(2px);
  -o-transform: translateZ(2px);
  transform: translateZ(2px);
  background: rgba(255,255,255,0.6);
  position: fixed;
  display: none;
  z-index: 999;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.warning .message {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  text-align: center;
  margin-left: -150px;
  margin-top: -60px;
  line-height: 1.5;
  background: #222;
  font-size: 12px;
  position: absolute;
  padding: 10px;
  width: 280px;
  color: #fff;
  left: 50%;
  top: 50%;
}

/* Individual styles */
.sashimi dt, .sashimi dd, .sashimi a { background: #73C8A9; }
.nigiri dt, .nigiri dd, .nigiri a { background: #E32551; }
.maki dt, .maki dd, .maki a { background: #FFC219; }
.sashimi a:hover { background: #61c19e; }
.nigiri a:hover { background: #d31b46; }
.maki a:hover { background: #ffbb00; }

.nigiri {
  -webkit-transform: perspective(1200px) rotateY(40deg) !important;
  -moz-transform: perspective(1200px) rotateY(40deg) !important;
  -ms-transform: perspective(1200px) rotateY(40deg) !important;
  -o-transform: perspective(1200px) rotateY(40deg) !important;
  transform: perspective(1200px) rotateY(40deg) !important;
  -webkit-transform-origin: 110% 25%;
  -moz-transform-origin: 110% 25%;
  -ms-transform-origin: 110% 25%;
  -o-transform-origin: 110% 25%;
  transform-origin: 110% 25%;
  left: 20%;
}

.maki {
  -webkit-transform: perspective(600px) translateZ(1px) !important;
  -moz-transform: perspective(600px) translateZ(1px) !important;
  -ms-transform: perspective(600px) translateZ(1px) !important;
  -o-transform: perspective(600px) translateZ(1px) !important;
  transform: perspective(600px) translateZ(1px) !important;
  left: 50%;
}

.sashimi {
  -webkit-transform: perspective(1200px) rotateY(-40deg) !important;
  -moz-transform: perspective(1200px) rotateY(-40deg) !important;
  -ms-transform: perspective(1200px) rotateY(-40deg) !important;
  -o-transform: perspective(1200px) rotateY(-40deg) !important;
  transform: perspective(1200px) rotateY(-40deg) !important;
  -webkit-transform-origin: -10% 25%;
  -moz-transform-origin: -10% 25%;
  -ms-transform-origin: -10% 25%;
  -o-transform-origin: -10% 25%;
  transform-origin: -10% 25%;
  left: 80%;
}

/**
 * Copyright (C) 2012 by Justin Windle
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

(function ($) {
	// Global initialisation flag
	var initialized = false;
  
	// For detecting browser prefix and capabilities
	var el = document.createElement("div");
	var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/;
  
	// Establish vendor prefix and CSS 3D support
	var vendor =
	  (function () {
		for (var p in el.style) if (re.test(p)) return p.match(re)[0];
	  })() || "";
	var canRun = vendor + "Perspective" in el.style;
	var prefix = "-" + vendor.toLowerCase() + "-";
  
	var $this, $root, $base, $kids, $node, $item, $over, $back;
	var wait, anim, last;
  
	// Public API
	var api = {
	  // Toggle open / closed
	  toggle: function () {
		$this = $(this);
		$this.makisu($this.hasClass("open") ? "close" : "open");
	  },
  
	  // Trigger the unfold animation
	  open: function (speed, overlap, easing) {
		// Cache DOM references
		$this = $(this);
		$root = $this.find(".root");
		$kids = $this.find(".node").not($root);
  
		// Establish values or fallbacks
		speed = utils.resolve($this, "speed", speed);
		easing = utils.resolve($this, "easing", easing);
		overlap = utils.resolve($this, "overlap", overlap);
  
		$kids.each(function (index, el) {
		  // Establish settings for this iteration
		  anim = "unfold" + (!index ? "-first" : "");
		  last = index === $kids.length - 1;
		  time = speed * (1 - overlap);
		  wait = index * time;
  
		  // Cache DOM references
		  $item = $(el);
		  $over = $item.find(".over");
  
		  // Element animation
		  $item.css(
			utils.prefix({
			  transform: "rotateX(180deg)",
			  animation:
				anim +
				" " +
				speed +
				"s " +
				easing +
				" " +
				wait +
				"s 1 normal forwards"
			})
		  );
  
		  // Shading animation happens when the next item starts
		  if (!last) wait = (index + 1) * time;
  
		  // Shading animation
		  $over.css(
			utils.prefix({
			  animation:
				"unfold-over " +
				speed * 0.45 +
				"s " +
				easing +
				" " +
				wait +
				"s 1 normal forwards"
			})
		  );
		});
  
		// Add momentum to the container
		$root.css(
		  utils.prefix({
			animation:
			  "swing-out " +
			  $kids.length * time * 1.4 +
			  "s ease-in-out 0s 1 normal forwards"
		  })
		);
  
		$this.addClass("open");
	  },
  
	  // Trigger the fold animation
	  close: function (speed, overlap, easing) {
		// Cache DOM references
		$this = $(this);
		$root = $this.find(".root");
		$kids = $this.find(".node").not($root);
  
		// Establish values or fallbacks
		speed = utils.resolve($this, "speed", speed) * 0.66;
		easing = utils.resolve($this, "easing", easing);
		overlap = utils.resolve($this, "overlap", overlap);
  
		$kids.each(function (index, el) {
		  // Establish settings for this iteration
		  anim = "fold" + (!index ? "-first" : "");
		  last = index === 0;
		  time = speed * (1 - overlap);
		  wait = ($kids.length - index - 1) * time;
  
		  // Cache DOM references
		  $item = $(el);
		  $over = $item.find(".over");
  
		  // Element animation
		  $item.css(
			utils.prefix({
			  transform: "rotateX(0deg)",
			  animation:
				anim +
				" " +
				speed +
				"s " +
				easing +
				" " +
				wait +
				"s 1 normal forwards"
			})
		  );
  
		  // Adjust delay for shading
		  if (!last) wait = ($kids.length - index - 2) * time + speed * 0.35;
  
		  // Shading animation
		  $over.css(
			utils.prefix({
			  animation:
				"fold-over " +
				speed * 0.45 +
				"s " +
				easing +
				" " +
				wait +
				"s 1 normal forwards"
			})
		  );
		});
  
		// Add momentum to the container
		$root.css(
		  utils.prefix({
			animation:
			  "swing-in " +
			  $kids.length * time * 1.0 +
			  "s ease-in-out 0s 1 normal forwards"
		  })
		);
  
		$this.removeClass("open");
	  }
	};
  
	// Utils
	var utils = {
	  // Resolves argument values to defaults
	  resolve: function ($el, key, val) {
		return typeof val === "undefined" ? $el.data(key) : val;
	  },
  
	  // Prefixes a hash of styles with the current vendor
	  prefix: function (style) {
		for (var key in style) {
		  style[prefix + key] = style[key];
		}
  
		return style;
	  },
  
	  // Inserts rules into the document styles
	  inject: function (rule) {
		try {
		  var style = document.createElement("style");
		  style.innerHTML = rule;
		  document.getElementsByTagName("head")[0].appendChild(style);
		} catch (error) {}
	  }
	};
  
	// Element templates
	var markup = {
	  node: '<span class="node"/>',
	  back: '<span class="face back"/>',
	  over: '<span class="face over"/>'
	};
  
	// Plugin definition
	$.fn.makisu = function (options) {
	  // Notify if 3D isn't available
	  if (!canRun) {
		var message = "Failed to detect CSS 3D support";
  
		if (console && console.warn) {
		  // Print warning to the console
		  console.warn(message);
  
		  // Trigger errors on elements
		  this.each(function () {
			$(this).trigger("error", message);
		  });
		}
  
		return;
	  }
  
	  // Fires only once
	  if (!initialized) {
		initialized = true;
  
		// Unfold
		utils.inject(
		  "@" +
			prefix +
			"keyframes unfold        {" +
			"0%   {" +
			prefix +
			"transform: rotateX(180deg);  }" +
			"50%  {" +
			prefix +
			"transform: rotateX(-30deg);  }" +
			"100% {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"}"
		);
  
		// Unfold (first item)
		utils.inject(
		  "@" +
			prefix +
			"keyframes unfold-first  {" +
			"0%   {" +
			prefix +
			"transform: rotateX(-90deg);  }" +
			"50%  {" +
			prefix +
			"transform: rotateX(60deg);   }" +
			"100% {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"}"
		);
  
		// Fold
		utils.inject(
		  "@" +
			prefix +
			"keyframes fold          {" +
			"0%   {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"100% {" +
			prefix +
			"transform: rotateX(180deg);  }" +
			"}"
		);
  
		// Fold (first item)
		utils.inject(
		  "@" +
			prefix +
			"keyframes fold-first    {" +
			"0%   {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"100% {" +
			prefix +
			"transform: rotateX(-180deg); }" +
			"}"
		);
  
		// Swing out
		utils.inject(
		  "@" +
			prefix +
			"keyframes swing-out     {" +
			"0%   {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"30%  {" +
			prefix +
			"transform: rotateX(-30deg);  }" +
			"60%  {" +
			prefix +
			"transform: rotateX(15deg);   }" +
			"100% {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"}"
		);
  
		// Swing in
		utils.inject(
		  "@" +
			prefix +
			"keyframes swing-in      {" +
			"0%   {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"50%  {" +
			prefix +
			"transform: rotateX(-10deg);  }" +
			"90%  {" +
			prefix +
			"transform: rotateX(15deg);   }" +
			"100% {" +
			prefix +
			"transform: rotateX(0deg);    }" +
			"}"
		);
  
		// Shading (unfold)
		utils.inject(
		  "@" +
			prefix +
			"keyframes unfold-over   {" +
			"0%   { opacity: 1.0; }" +
			"100% { opacity: 0.0; }" +
			"}"
		);
  
		// Shading (fold)
		utils.inject(
		  "@" +
			prefix +
			"keyframes fold-over     {" +
			"0%   { opacity: 0.0; }" +
			"100% { opacity: 1.0; }" +
			"}"
		);
  
		// Node styles
		utils.inject(".node {" + "position: relative;" + "display: block;" + "}");
  
		// Face styles
		utils.inject(
		  ".face {" +
			"pointer-events: none;" +
			"position: absolute;" +
			"display: block;" +
			"height: 100%;" +
			"width: 100%;" +
			"left: 0;" +
			"top: 0;" +
			"}"
		);
	  }
  
	  // Merge options & defaults
	  var opts = $.extend({}, $.fn.makisu.defaults, options);
  
	  // Extract api method arguments
	  var args = Array.prototype.slice.call(arguments, 1);
  
	  // Main plugin loop
	  return this.each(function () {
		// If the user is calling a method...
		if (api[options]) {
		  return api[options].apply(this, args);
		}
  
		// Store options in view
		$this = $(this).data(opts);
  
		// Only proceed if the scene hierarchy isn't already built
		if (!$this.data("initialized")) {
		  $this.data("initialized", true);
  
		  // Select the first level of matching child elements
		  $kids = $this.children(opts.selector);
  
		  // Build a scene graph for elements
		  $root = $(markup.node).addClass("root");
		  $base = $root;
  
		  // Process each element and insert into hierarchy
		  $kids.each(function (index, el) {
			$item = $(el);
  
			// Which animation should this node use?
			anim = "fold" + (!index ? "-first" : "");
  
			// Since we're adding absolutely positioned children
			$item.css("position", "relative");
  
			// Give the item some depth to avoid clipping artefacts
			$item.css(
			  utils.prefix({
				"transform-style": "preserve-3d",
				transform: "translateZ(-0.1px)"
			  })
			);
  
			// Create back face
			$back = $(markup.back);
			$back.css("background", $item.css("background"));
			$back.css(utils.prefix({ transform: "translateZ(-0.1px)" }));
  
			// Create shading
			$over = $(markup.over);
			$over.css(utils.prefix({ transform: "translateZ(0.1px)" }));
			$over.css({
			  background: opts.shading,
			  opacity: 0.0
			});
  
			// Begin folded
			$node = $(markup.node).append($item);
			$node.css(
			  utils.prefix({
				"transform-origin": "50% 0%",
				"transform-style": "preserve-3d",
				animation: anim + " 1ms linear 0s 1 normal forwards"
			  })
			);
  
			// Build display list
			$item.append($over);
			$item.append($back);
			$base.append($node);
  
			// Use as parent in next iteration
			$base = $node;
		  });
  
		  // Set root transform settings
		  $root.css(
			utils.prefix({
			  "transform-origin": "50% 0%",
			  "transform-style": "preserve-3d"
			})
		  );
  
		  // Apply perspective
		  $this.css(
			utils.prefix({
			  transform: "perspective(" + opts.perspective + "px)"
			})
		  );
  
		  // Display the scene
		  $this.append($root);
		}
	  });
	};
  
	// Default options
	$.fn.makisu.defaults = {
	  // Perspective to apply to rotating elements
	  perspective: 1200,
  
	  // Default shading to apply (null => no shading)
	  shading: "rgba(0,0,0,0.12)",
  
	  // Area of rotation (fraction or pixel value)
	  selector: null,
  
	  // Fraction of speed (0-1)
	  overlap: 0.6,
  
	  // Duration per element
	  speed: 0.8,
  
	  // Animation curve
	  easing: "ease-in-out"
	};
  
	$.fn.makisu.enabled = canRun;
  })(jQuery);
  
  // The `enabled` flag will be `false` if CSS 3D isn't available
  
  if ($.fn.makisu.enabled) {
	var $sashimi = $(".sashimi");
	var $nigiri = $(".nigiri");
	var $maki = $(".maki");
  
	// Create Makisus
  
	$nigiri.makisu({
	  selector: "dd",
	  overlap: 0.85,
	  speed: 1.7
	});
  
	$maki.makisu({
	  selector: "dd",
	  overlap: 0.6,
	  speed: 0.85
	});
  
	$sashimi.makisu({
	  selector: "dd",
	  overlap: 0.2,
	  speed: 0.5
	});
  
	// Open all
  
	$(".list").makisu("open");
  
	// Toggle on click
  
	$(".toggle").on("click", function () {
	  $(".list").makisu("toggle");
	});
  
	// Disable all links
  
	$(".demo a").click(function (event) {
	  event.preventDefault();
	});
  } else {
	$(".warning").show();
  }