<nav>
<ul>
<li>
  <a href="#" class="button add">+</a>
  <div class="dialog" style="display:none">
  <div class="title">Add Event</div>
  <form action="addevent.php" method="post">
  <select name="type">
<option value="a">Appointment</option>
<option value="a">Block</option>
</select>
    <input name="start_dtm" type="datetime-local"/>
    <input name="duration" type="time"/>
    <input name="name" type="text" placeholder="Name"/>
    <input name="location" type="text" placeholder="Location"/>
    <textarea name="description" placeholder="Description" cols="30" rows="10" wrap="soft"></textarea>
    <input type="submit" value="Ok"/>
  </form>
</div>
</li>
<li class="radio">
  <a href="#" class="button active">Day</a>

  <a href="#" class="button">Week</a>

  <a href="#" class="button">Month</a>
</li>
</ul>
</div>        
</nav>
<p>Click the '+'!</p>
*
{
  box-sizing: border-box;
}
body {
  background: #fefefe;
  text-align: center;
  color: #444444;
  font-family:sans-serif;
}

nav {
  height: 64px;
  background: #e74c3c;
  padding: 0px 32px;
  border-bottom: 1px solid #C24032;
  text-align: left;
  box-shadow: 0px 0px 4px #C24032;
}
nav ul {
  margin: 0px;
  padding: 0px;
}
.button {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0 8px;
  padding: 0px 32px;
  display: block;
  height: 100%;
  min-width:9px;
  line-height: 64px;
  border: 1px solid #C24032;
  border-width: 0px 1px;
  box-shadow: 0px 0px 4px #C24032;
  transition: box-shadow .2s linear;
}
nav ul li, .radio > .button {
  display: inline-block;
  vertical-align:top;
}

.add
{
  transition: box-shadow .2s linear, margin .3s linear .5s;
}
.add.active
{
  margin:0 98px;
  transition: box-shadow .2s linear, margin .3s linear;
}
.button:link
{
  color: #eee;
  text-decoration: none;
}
.button:visited
{
  color: #eee;
}
.button:hover
{
  box-shadow:none;
}
.button:active,
.button.active {
  color: #eee;
  border-color: #C24032;
  box-shadow: 0px 0px 4px #C24032 inset;
}
nav ul li a:active {
  color: #eee;
}
nav ul li a.active {
  color: #eee;
}
.dialog {
  position: relative;
  text-align: center;
  background: #4478a0;
  margin: 13px 0 4px 4px;
  display: inline-block;
  width: 256px;
  box-shadow: 0px 0px 8px rgba(68, 140, 160, 0.5);
}
.dialog:after,
.dialog:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.dialog:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #5C9CCE;
  border-width: 15px;
  left: 50%;
  margin-left: -15px;
}
.dialog:before {
  border-color: rgba(170, 170, 170, 0);
  border-width: 16px;
  left: 50%;
  margin-left: -16px;
}
.dialog .title {
  color: #fff;
  font-weight: bold;
  text-align: center;
  border: 1px solid #5189B5;
  border-width: 0px 0px 1px 0px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 4px;
  margin-top: 8px;
  padding: 8px 16px;
  background: #5C9CCE;
  box-shadow: 0px 1px 4px rgba(68, 120, 160, 0.1);
  font-size: 16px;
  line-height:2em;
}
.dialog .title:first-child {
  margin-top: -4px;
}
form
{
  padding:16px;
  padding-top: 0;
}
select[name=type]
{
appearance:none;
	border-radius: 0;
}
textarea,input[type=text],input[type=datetime-local],input[type=time],select
{
  color: #fff;
  border: 0;
  outline: 0;
  resize: none;
  margin: 0;
  margin-top: 1em;
  padding: .5em;
  width:100%;
  border-bottom: 1px dotted rgba(250, 250, 250, 0.4);
  background:#5d92ba;
}
input[type=text]:focus,input[type=datetime-local]:focus,input[type=time]:focus {
  background-color: #4478a0;
}
input[type=submit]
{
  border:none;
  background: #FAFEFF;
  padding: .5em 1em;
  margin-top: 1em;
  color:#4478a0;
}
input[type=submit]:active
{
  background: #E1E5E5;
}
input:-moz-placeholder, textarea:-moz-placeholder {
	color: #FAFEFF;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #FAFEFF;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  	color:#FAFEFF;
}
$(document).ready( function() {
  
 $('.add').click(function(e){
   e.stopPropagation();
  if ($(this).hasClass('active')){
    $('.dialog').fadeOut(200);
    $(this).removeClass('active');
  } else {
    $('.dialog').delay(300).fadeIn(200);
    $(this).addClass('active');
  }
});
$('.radio > .button').click( function() {
  $('.radio').find('.button.active').removeClass('active');
  $(this).addClass('active');
});
  
function closeMenu(){
  $('.dialog').fadeOut(200);
  $('.add').removeClass('active');  
}
  
$(document.body).click( function(e) {
     closeMenu();
});

$(".dialog").click( function(e) {
    e.stopPropagation();
});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js