survey page design

by mrjordy

HTML

<div class="LeftMenuContainer">
  <div class="LeftMenu">
      <a href="https://navy.deps.mil/peoeis/sites/nen/onesource/Lists/EchII/NewForm.aspx?IsDlg=1" target="_blank" class="MenuItemLink">
        <div class="MenuItem MenuItemOrange">Start Survey</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="mailto:[email protected]?Subject=Navy%20Echelon%20II%20Command%20Customer%20Satisfaction%20Survey" 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...

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;
}

#SurveyTimeline:after, #SurveyStructure:after, #EvaluationCriteria:after, #Feedback:after {
    content: '>';
    font-family: verdana;
    color: #6D9DBD;
    line-height: 29px;
    display: block;
    width: 15px;
    height: 30px;
    background: #B0C8D8;
    position: absolute;
    margin-left: 166px;
    margin-top: -37px;
    border-top: 1px solid #D5ECFB;
    border-right: 1px solid #A7C1D3;
    border-bottom: 1px solid #6D9DBD;
    border-top-right-radius: 12px 40px;
    border-bottom-right-radius: 12px 40px;
}

#SurveyTimeline:hover:after, #SurveyStructure:hover:after, #EvaluationCriteria:hover:after, #Feedback:hover:after {
    content: '+';
    background: #D5ECFB;
}

.MenuItemOrange {
  background: linear-gradient(to left, #FFBA8A 50%, #D5ECFB 50%);
  background-size: 200% 100%;
  background-position-x: -100%;
  border-bottom: 1px solid #BD7B6D;
  border-right: 1px solid #BD7B6D;
  border-top: 1px solid #FFF1EE;
  color: #803400;
}

.MenuItemOrange:hover {
  border-bottom: 1px solid #6D9DBD;
  border-right: 1px solid #6D9DBD;
  border-top: 1px solid #D5ECFB;
  color: #054569;
}

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

.MenuItemLink {
  text-decoration: none;
}

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

JavaScript

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