Select a View

In this example below you will see how to do a Select a View with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>Select a View</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="unity-margin-x-auto unity-padding-y-4" style="max-width: 720px;">
  <div class="unity-shadow unity-fill-white">
    <div class="unity-padding-3">
      <h2 class="unity-text-xl unity-light">
         Select a View
      </h2>
    </div>
    
    <div class="unity-border-bottom unity-display-flex">
      <ul class="unity-menu unity-caps unity-bold unity-text-gray">
        <li class="unity-menu-horizontal-active unity-text-teal"><a href="" class="unity-button unity-text-small unity-padding-x-5">All</a></li>
        <li><a href="" class="unity-button unity-text-small">Favorites</a></li>
      </ul>
      <span class="unity-margin-right-auto"></span>
      <form class="unity-width-25">
  <label class="unity-search">
    <span class="unity-sr-only">Search People</span>
    <svg aria-hidden="true" class="unity-icon unity-icon-search unity-icon-large">
      <use xlink:href="#unity_icon_search"/>
    </svg>
    <input type="search" class="unity-search-control unity-fill-brighten-80 unity-width-100" placeholder="Search">
  </label>
</form>
      
    </div>
    
    <div class="unity-display-flex expand-on-hover" style="max-height: 320px;">
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Clients</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Really long Client Name that extends</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate unity-fill-shade-05 unity-dropdown-toggle-right" type="button">ACME Inc.</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li>
              <button class="unity-button unity-width-100" type="button">Tier</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Divisions</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate unity-fill-shade-05 unity-dropdown-toggle-right" type="button">Northeast Division</button>
            </li>
            
          </ul>
        </div>
      </div>
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Organizations</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Really long Tier Name that extends</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate unity-fill-shade-05 unity-dropdown-toggle-right" type="button">ACME Organization</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Views</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Location Name</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Service Line Name</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Orthopedics</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Primary Care</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Really long Location Name that extends</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  
  </div>
  <p class="unity-margin-top-2 unity-text-small unity-text-gray">Copyright © 2006-2018</p>
</div>


<div class="unity-margin-x-auto unity-padding-y-4" style="max-width: 720px;">
  <div class="unity-shadow unity-fill-white">
    <div class="unity-padding-3">
      <h2 class="unity-text-xl unity-light">
         Select a View
      </h2>
    </div>
    
    <div class="unity-border-bottom unity-display-flex">
      <ul class="unity-menu unity-caps unity-bold unity-text-gray">
        <li><a href="" class="unity-button unity-text-small unity-padding-x-5">All</a></li>
        <li class="unity-menu-horizontal-active unity-text-teal"><a href="" class="unity-button unity-text-small">Favorites</a></li>
      </ul>
      <span class="unity-margin-right-auto"></span>
      <form class="unity-width-25">
  <label class="unity-search">
    <span class="unity-sr-only">Search People</span>
    <svg aria-hidden="true" class="unity-icon unity-icon-search unity-icon-large">
      <use xlink:href="#unity_icon_search"/>
    </svg>
    <input type="search" class="unity-search-control unity-fill-brighten-80 unity-width-100" placeholder="Search">
  </label>
</form>
      
    </div>
    
    <div class="unity-overflow-auto" style="max-height: 320px;">
      <a href="" class="unity-button unity-border-bottom unity-display-block unity-padding-top-4 unity-padding-bottom-4 unity-padding-x-5">
        
        <div class="unity-display-flex unity-flex-align-center">
          <div class="unity-flex-grow-1">
            <h3 class="unity-text-large unity-regular unity-text-blue">Orthopedics</h3>
            ACME Organization
          </div>
          <div class="unity-flex-grow-1">
            ACME Inc. - Northeast
          </div>
          <div class="unity-flex-shrink-0">
            <button type="button" class="unity-button unity-hover-fill-transparent unity-padding-0 unity-text-large star">
              &#x2606;
            </button>
          </div>
        </div>
      </a>
      
      <a href="" class="unity-button unity-border-bottom unity-display-block unity-padding-top-4 unity-padding-bottom-4 unity-padding-x-5">
        
        <div class="unity-display-flex unity-flex-align-center">
          <div class="unity-flex-grow-1">
            <h3 class="unity-text-large unity-regular unity-text-blue">Primary Care</h3>
            ACME Organization
          </div>
          <div class="unity-flex-grow-1">
            ACME Inc. - Northeast
          </div>
          <div class="unity-flex-shrink-0">
            <button type="button" class="unity-button unity-hover-fill-transparent unity-padding-0 unity-text-large star">
              &#x2605;
            </button>
          </div>
        </div>
      </a>
      
    </div>
  
  </div>
  <p class="unity-margin-top-2 unity-text-small unity-text-gray">Copyright © 2006-2018</p>
</div>



<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <symbol id="unity_icon_butterfly" viewbox="0 0 23 28">
    <path d="M12.445 9.275v12.382l10.483 6.265V15.54l-2.633-1.555 2.633-1.602V0L12.445 6.264M0 12.383l2.633 1.602L0 15.54V27.92l10.483-6.264V6.265L0 0"/>
  </symbol>
  <symbol id="unity_icon_search" viewbox="0 0 34 34">
    <path d="M25.387 23.533l-3.1-3.21c.854-1.287 1.357-2.85 1.357-4.527 0-2.206-.868-4.217-2.265-5.66-1.395-1.447-3.338-2.347-5.468-2.346-2.13 0-4.073.9-5.467 2.345-1.397 1.444-2.266 3.455-2.265 5.66 0 2.207.868 4.218 2.265 5.66 1.394 1.448 3.337 2.347 5.467 2.346 1.548.002 2.996-.475 4.208-1.29l3.127 3.238c.59.612 1.55.612 2.14 0 .59-.61.59-1.603 0-2.215zm-12.79-4.158c-.834-.908-1.347-2.145-1.347-3.527 0-1.383.513-2.62 1.348-3.527.838-.905 1.98-1.46 3.256-1.46 1.276 0 2.418.555 3.256 1.46.835.908 1.348 2.145 1.348 3.528 0 1.382-.513 2.62-1.348 3.527-.838.905-1.98 1.46-3.256 1.46-1.276 0-2.418-.555-3.256-1.46z"/>
  </symbol>
  <symbol id="unity_icon_notification" viewbox="0 0 34 34">
    <path d="M17.1 26.184c1.283-.027 2.545-.89 2.53-1.75h-5.25c.043.92 1.36 1.778 2.72 1.75zM25.728 22.812c-1.14-.88-1.82-2.033-2.1-3.425-.224-1.13-.293-2.276-.3-3.425-.003-.903-.065-1.803-.295-2.682-.452-1.727-1.408-3.074-3.11-3.813-.538-.233-1.12-.365-1.697-.548-.083-.652-.49-1.065-1.118-1.106-.712-.045-1.118.308-1.34 1.165-.096.02-.194.04-.292.058-2.085.417-3.53 1.574-4.276 3.538-.406 1.07-.517 2.18-.522 3.31-.004 1.114-.06 2.226-.263 3.327-.253 1.376-.847 2.575-1.98 3.47-.344.273-.68.508-1.055.877h19.25c-.324-.295-.607-.52-.902-.748z"/>
  </symbol>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mstone6769/select-a-view-ZrpryZ */
@import "https://unity-styles.netlify.com/styles/unity.min.css";
@import "https://fonts.googleapis.com/css?family=Roboto:300,400,700";
.expand-on-hover > *:hover {
  flex-shrink: 0 !important;
}

.star {
  font-size: 1.5rem !important;
}

Comments