survey page design

by Brandon

HTML

<div class="LeftMenuContainer">
  <div class="LeftMenu">
    <a href="#" class="MenuItemLink">
      <div class="MenuItem">Home</div>
    </a>
    <div class="MenuItem" id="SurveyTimeline">Survey Timeline</div>
    <div class="MenuItem" id="SurveyStructure">Survey Structure</div>
    <div class="MenuItem" id="EvaluationCriteria">Evaluation Criteria</div>
    <div class="MenuItem" id="Feedback">Feedback</div>
    <a href="#" class="MenuItemLink">
      <div class="MenuItem">Start Survey</div>
    </a>
    <a href="#" class="MenuItemLink">
      <div class="MenuItem">Contact Us</div>
    </a>
  </div>
</div>

<div class="LeftMenu_Popout" id="SurveyTimelinePopout">
  <div class="ClosePopout">x</div>
  <span class="PopoutTitle">Survey Timeline</span> This survey will be the final evaluation for the period 1 October, 2015 through 31 March, 2016. <u>Surveys must be submitted by no later than 31 May 2016</u> for inclusion in the calculation of the overall Navy Echelon II Commanders customer satisfaction score.
</div>

<div class="LeftMenu_Popout" id="SurveyStructurePopout">
  <div class="ClosePopout">x</div>
  <span class="PopoutTitle">Survey Structure</span> When completing this survey, care must be taken to respond based on Navy Marine Corps Intranet (NMCI) services actually provided under the Next Generation Enterprise Network Contract (NGEN).  The scope of this survey does not encompass other contracts you may have with HPE.
  <br>The Command Customer Satisfaction Survey asks you to evaluate HPE on the following four topics: 
  <br> &bull;	Warfighter Support Services
  <br> &bull;	Cutover Services
  <br> &bull;	Technology Solutions
  <br> &bull;	Service Delivery
  <br>Each of these four topics corresponds to key mission and/or business objective-related services or capabilities identified by Navy leadership.  
</div>

<div class="LeftMenu_Popout" id="EvaluationCriteriaPopout">
  <div class="ClosePopout">x</div>
  <span class="PopoutTitle">Evaluation Criteria</span>...

CSS

.MenuItem {
  display: block;
  width: 166px;
  height: 40px;
  background: linear-gradient(to left, #B0C8D8 50%, #D5ECFB 50%);
  background-size: 200% 100%;
  background-position-x: -100%;
  transition: .15s;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #6D9DBD;
  border-right: 1px solid #6D9DBD;
  border-top: 1px solid #D5ECFB;
  color: #054569;
  font-family: verdana;
  text-shadow: 0 1px 1px white;
  cursor: pointer;
}

.MenuItem:hover {
  background-position-x: 0%;
  padding-left: 20px;
}

.LeftMenuContainer {
  margin-top: calc(50vh - 105px);
  position: absolute;
}

.MenuItemLink {
  text-decoration: none;
}

.LeftMenu_Popout {
  display: block;
  position: absolute;
  background: #B0C8D8;
  width: 50%;
  margin-left: 25%;
  margin-top: 200px;
  max-height: 70vh;
  overflow-y: auto;
  color: #054569;
  text-shadow: 0 0px 1px white;
  font-family: verdana;
  padding: 20px;
}

span.PopoutTitle {
  display: block;
  font-weight: bold;
  text-align: center;
  padding-bottom: 4px;
}

.ClosePopout {
  position: absolute;
  margin-top: -20px;
  font-family: verdana;
  display: block;
  width: 15px;
  right: 0;
  border-left: 1px solid #054569;
  border-bottom: 1px solid #054569;
  padding-left: 4px;
  cursor: pointer;
}

.ClosePopout:hover {
  background: #054569;
  color: white;
}

#SurveyStructurePopout, #SurveyTimelinePopout, #EvaluationCriteriaPopout, #FeedbackPopout {
  display: none;
}

JavaScript

/* This solution is bad practice as it stops propagation of the event which
 may be needed further up in the heirarchy. Another solution is to monitor
 $(document).click(function(e){...}); instead of .click() of each item.
 https://css-tricks.com/dangers-stopping-event-propagation/
*/
var popoutName = "";

$('#SurveyTimeline').click(function(e) {
	e.stopPropagation();
  popoutName = "#SurveyTimelinePopout";
  $('#SurveyTimelinePopout').css({'display': 'block'});
  $('#SurveyStructurePopout, #EvaluationCriteriaPopout, #FeedbackPopout').css({'display': 'none'});
  
});
$('#SurveyStructure').click(function(e) {
	e.stopPropagation();
  popoutName = "#SurveyStructurePopout";
  $('#SurveyStructurePopout').css({'display': 'block'});
  $('#SurveyTimelinePopout, #EvaluationCriteriaPopout, #FeedbackPopout').css({'display': 'none'});
  
});
$('#EvaluationCriteria').click(function(e) {
	e.stopPropagation();
	popoutName = "#EvaluationCriteriaPopout";
  $('#EvaluationCriteriaPopout').css({'display': 'block'});
  $('#SurveyStructurePopout, #SurveyTimelinePopout, #FeedbackPopout').css({'display': 'none'});
  
});
$('#Feedback').click(function(e) {
	e.stopPropagation();
	popoutName = "#FeedbackPopout";
  $('#FeedbackPopout').css({'display': 'block'});
  $('#SurveyStructurePopout, #SurveyTimelinePopout, #EvaluationCriteriaPopout').css({'display': 'none'});
  
});
$('.ClosePopout').click(function(e) {
	e.stopPropagation();
  $('#SurveyStructurePopout, #SurveyTimelinePopout, #EvaluationCriteriaPopout, #FeedbackPopout').css({'display': 'none'});
  
});

$(document).click(function(e) {
    // check that your clicked
    // element has no id=info
    // and is not child of info
    console.log(popoutName.replace('#', ""));
    console.log(e.target.id);
    console.log($(popoutName).find(e.target).length);
    if (e.target.id != popoutName.replace('#', "") && !$(popoutName).find(e.target).length) {
        $(popoutName).hide();
    }
});