Loading

Pop-out Menus (with pointers) using Guard Mixins

Using a Guard Mixin to build all-axis pop-out menus, with direction controlled solely through one variable, with possible values: u (up) | d (down) | l (left) | r (right). This version implements pointers on the pop-ups.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Pop-out Menus (with pointers) using Guard Mixins</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="app-container">
	<div class="container">
		<div class="extended-menu-wrap detail-card">
			<button type="button" class="extended-menu-call">
				<span class="btn-txt">menu</span>
			</button>
			<div class="extended-menu">
				<div class="inner">
					<p>This is a pop-up menu.</p>
					<p>It does some standard animations, and other ideas that allow people to choose some new stuff.</p>
				</div>
			</div>
		</div> 
		<!-- End .detail-card -->
		<button type="button" class="modal-call">
			<span class="btn-txt">modal</span>
		</button>
	</div>
</div>
<!-- End .app-container -->
<!-- Overlay -->
<div class="overlay"></div>
<div class="extended-menu modal-card">
	<div class="inner">
		<p>This is a modal window, which pops up in the center of the screen.</p>
	</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.extended-menu-wrap {
  position: relative;
}
.extended-menu-wrap .extended-menu {
  position: absolute;
}
.extended-menu {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 0.375s;
  transition: 0.375s;
  width: 300px;
  -webkit-transform-origin: 50% calc(108%);
          transform-origin: 50% calc(108%);
  left: 50%;
  bottom: 100%;
  margin-left: -150px;
  margin-bottom: 4px;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4);
}
.extended-menu .inner {
  opacity: 0;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.panel-active > .extended-menu,
.modal-active > .extended-menu {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.panel-active > .extended-menu .inner,
.modal-active > .extended-menu .inner {
  opacity: 1;
  -webkit-transition: 0.375s;
  transition: 0.375s;
}
.extended-menu .inner {
  padding: 0.4em 0.8em;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid white;
}
.detail-card .extended-menu .inner:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 8px solid transparent;
}
.detail-card .extended-menu .inner:before {
  border-top-color: rgba(255, 255, 255, 0.95);
  left: 50%;
  bottom: -16px;
  margin-left: -4px;
}
.modal-card {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 0.375s;
  transition: 0.375s;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  margin: auto;
  z-index: 9999;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.8);
}
.modal-card .inner {
  opacity: 0;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.panel-active > .modal-card,
.modal-active > .modal-card {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.panel-active > .modal-card .inner,
.modal-active > .modal-card .inner {
  opacity: 1;
  -webkit-transition: 0.375s;
  transition: 0.375s;
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #eee;
}
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #444444;
}
.app-container {
  display: block;
  position: fixed;
  left: 50%;
  margin-left: -75px;
  top: 30%;
  width: 150px;
  text-align: center;
  border: 1px solid silver;
}
.container button {
  width: 140px;
}
button {
  background-image: -webkit-linear-gradient(#f0f0f0, #d1d1d1);
  background-image: linear-gradient(#f0f0f0, #d1d1d1);
  color: #444444;
  border: none;
  padding: 0.8em 0.4em;
  margin: 0.4em 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
button:before {
  content: "Open ";
}
button:hover,
button.call-active {
  background-image: -webkit-linear-gradient(#d05d6a, #ba3645);
  background-image: linear-gradient(#d05d6a, #ba3645);
  color: #ffffff;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
button.call-active:before {
  content: "Close ";
}
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
.modal-active .overlay {
  opacity: 1;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
  right: 0;
  bottom: 0;
}
/* Downloaded from https://ahoj.co.uk/ */
$('.extended-menu-call').on('click',function(){
	$(this).toggleClass('call-active');
	$(this).parent().toggleClass('panel-active');
});

$('.modal-call').on('click',function(){
	$(this).addClass('call-active');
	$('body').addClass('modal-active');
});

$('.overlay').on('click',function(){
	$('body').removeClass('modal-active');
	$('.modal-call').removeClass('call-active');
});

This awesome code is write by Chris Mounsey, you can se more from this user in the personal repository