Inspera nav concept I

In this example below you will see how to do a Inspera nav concept I with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hilhorstt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hilhorstt ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Inspera nav concept I</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section>
  <div class="questionid">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis odio vel metus feugiat facilisis gravida eu neque. Ut bibendum interdum dui at eleifend. Proin vehicula lectus sem, eget ornare neque placerat ut. Cras id risus tincidunt, eleifend odio sed, feugiat neque. Pellentesque ut tellus nec nisl efficitur venenatis quis vel tortor. Nulla at magna non mi fermentum convallis eu sed ligula. Sed eget risus ipsum.</p>
    <p>Integer consequat nulla quis dapibus auctor?</p>
    <input type="text" />
  </div>
  <nav>
    <div class="question" tabindex="0" style="flex-grow: 3">
      <div class="questionNo">1</div>
      <div class="subquestion">a</div>
      <div class="subquestion">b</div>
      <div class="subquestion">c</div>
      <div class="options">
        F
      </div>
    </div>
    <div class="question" tabindex="0" style="flex-grow: 4">
      <div class="questionNo">2</div>
      <div class="subquestion">a</div>
      <div class="subquestion">b</div>
      <div class="subquestion">c</div>
      <div class="subquestion">d</div>
      <div class="options">
        F
      </div>
    </div>
    <div class="question" tabindex="0" style="flex-grow: 2">
      <div class="questionNo">3</div>
      <div class="subquestion">a</div>
      <div class="subquestion">b</div>
      <div class="options">
        F
      </div>
    </div>
    <div class="question" tabindex="0" style="flex-grow: 3">
      <div class="questionNo">4</div>
      <div class="subquestion">a</div>
      <div class="subquestion">b</div>
      <div class="subquestion">c</div>
      <div class="options">
        F
      </div>
    </div>
    <div class="question" tabindex="0" style="flex-grow: 4">
      <div class="questionNo">5</div>
      <div class="subquestion">a</div>
      <div class="subquestion">b</div>
      <div class="subquestion">c</div>
      <div class="subquestion">d</div>
      <div class="options">
        F
      </div>
    </div>
    <div class="question" tabindex="0" style="flex-grow: 2">
      <div class="questionNo">6</div>
      <div class="subquestion">a</div>
      <div class="subquestion">b</div>
      <div class="options">
        F
      </div>
    </div>
  </nav>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/hilhorstt/inspera-nav-concept-i-zqQMBz */
body {
  font-family: "Segoe UI";
  background: #ccc;
}

section {
  position: relative;
  width: 1024px;
  height: 450px;
  margin: 2em auto;
}

.questionid {
      box-shadow: 0 18px 26px -16px rgba(0, 0, 0, 0.2);
  padding: 2em 2em 3em;
  background: #fff;
}

nav {
  display: inline-flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  justify-content: center;
  align-content: stretch;
}

.question {
  display: flex;
  position: relative;
  flex-direction: row;
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  align-items: stretch;
  align-content: space-between;
  justify-content: center;
}

.question:last-child {
  border-right: 0;
}

.subquestion {
  padding: 1em;
  visibility: hidden;
  position: relative;
  color: #ccc;
}

.subquestion:hover {
  color: #000;
}

.subquestion:hover:after {
  content: ")";
  position: absolute;
  right: 7.5px;
}

.subquestion:hover:before {
  content: "(";
  position: absolute;
  left: 7.5px;
}

.questionNo {
  padding: 1em;
  position:absolute;
  left: calc(50% - 1em);
}

.question:hover .subquestion, .question:focus .subquestion {
  visibility: visible;
}

.question:hover .questionNo, .question:focus .questionNo {
  display: none;
}

.options {
  padding: 1em;
  position: absolute;
  right: 0;
  top: 0;
}

.question:hover .options, .question:focus .options {
  visibility: hidden;
}

Comments