Map Building

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

Thumbnail
This awesome code was written by 0degreesk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0degreesk ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Map Building</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="page">
  <div class="map-wrapper">
    <div class="col-map show">
      <div class="button">Map</div>
      <div class="content">Map</div>
    </div>
    <div class="col-listing">
      <div class="button">List</div>
      <ul class="content">
        <li>1 - Fifth Third Bank</li>
        <li>2 - Huntington Bank</li>
        <li>3 - Endeavor</li>
        <li>3 - Hoover, Heydorn &amp; Herinstein LPA</li>
        <li>3 - Lori Long Counseling Services</li>
        <li>3 - On Point Financial Services</li>
        <li>4 -Law Office of Michael A Malyuk</li>
        <li>5 - Brunsdon Law Firm LLC</li>
        <li>5 - Messmore Financial and Medical Services</li>
        <li>5 - Nanotronics Imaging Inc</li>
        <li>6 - Ohio Brewing Company</li>
        <li>7 - Fraternal Order of Eagles</li>
        <li>8 - Time Zone Antique Shop</li>
        <li>9 - Burntwood Tavern</li>
        <li>10 - Cashmere Cricket</li>
        <li>11 - Secret Past Vintage Specialties</li>
        <li>12 - Silver Eagle Antiques</li>
        <li>13 - All Put Together</li>
        <li>13 - Ceila's Boutique</li>
        <li>13 - Hidden Pearl</li>
        <li>13 - Riverfront Photography</li>
        <li>13 - Signature Antiques and Collectibles</li>
        <li>14 - Barro Di Mario</li>
        <li>15 - Flury's Cafe</li>
        <li>16 - The Marketing Department</li>
        <li>17 - Urban Lace</li>
        <li>18 - Hint's of Happiness Wellness Studio and Boutique</li>
        <li>19 - Top Level Martial Arts</li>
        <li>20 - Harps &amp; Thistles Yarn Emporium</li>
        <li>21 - Riverfront Ballroom &amp; Latin Dance Center</li>
        <li>21 - Your Independence</li>
        <li>22 - Final Cut Salon</li>
        <li>23 - I Got Your Back Massage</li>
        <li>23 - Red Fish Promotions</li>
        <li>24 - Cuyahoga Falls Chamber of Commerce</li>
        <li>24 - Monsters Unlimited</li>
        <li>25 - Westfield Bank</li>
        <li>26 - Prixx Body Piercing Studiotique</li>
        <li>27 - Metropolis Popcorn &amp; Desserts</li>
        <li>28 - Falls Music School</li>
        <li>29 - Pav's Creamery</li>
        <li>30 - InfoGrow</li>
        <li>30 - Yum Yum Sweet Shop</li>
        <li>31 - Good Co. Salon &amp; Spa</li>
        <li>32 - Cuyahoga Valley Art Center</li>
        <li>33 - Kentix Developmental Health</li>
        <li>34 - Dr John Fratz DDS</li>
        <li>34 - North Akron Fit Body Bootcamp</li>
        <li>35 - Leipply &amp; Armstrong, Attorney at La</li>
        <li>35 - MBS Envision, Inc</li>
        <li>36 - Child Guidance &amp; Family Solutions</li>
        <li>37 - Crave Cantina</li>
        <li>38 - Studio 2091 Mothersbaugh</li>
        <li>39 - Adecco Staffing</li>
        <li>40 - The Refuge Church</li>
        <li>41 - American Midwest Mortgage Corporation </li>
        <li>42 - TG Consulting Inc</li>
        <li>42 - Vision Financial Management</li>
        <li>43 - Clifford's Mini Auto Museum</li>
        <li>44 - Clifford Shoemaker Funeral Home</li>
        <li>45 - Beau's on the River</li>
        <li>45 - Sheraton Suites 42 - Vincent Esquire, Ltd</li>
        <li>46 - Craft Beer Bar</li>
        <li>47 - Staffinders</li>
        <li>48 - Hunt's Bar and Grill</li>
        <li>49 - Hibachi Japan</li>
        <li>50 - Paradise Club</li>
        <li>51 - HiHo Brewing Company</li>
        <li>51 - The Social Dept.</li>
        <li>52 - TRIAD</li>
        <li>53 - American Legion</li>
      </ul>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0degreesk/map-building-qKEjYr */
body { padding: 0; margin: 0; background-color: #333; font-family: Helvetica, sans-serif; }
#page,
#page * { box-sizing: border-box; }
#page { width: 100%; max-width: 1200px; margin: 0 auto; }
.map-wrapper { overflow: hidden; width: 100%; background-color: #fff; }
.map-wrapper [class*='col-'] { position: relative; width: 50%; float: left;}
.map-wrapper [class*='col-'] .button { display: none; position: absolute; z-index: 1; top: 20px; right: 20px; width: 80px; height: 80px; border-radius: 100%; background: rgb(82,127,155) url('https://dev-cfalls-dtcf.pantheonsite.io//sites/all/themes/triadzen/css/img/spacer.gif') center top 16px no-repeat; background-size: 30px auto; color: rgb(238,216,151); font-size: 12px; text-align: center; letter-spacing: 1px; line-height: 120px; cursor: pointer; text-transform: uppercase; }
.map-wrapper [class*='col-'] .button:hover { background-color: rgb(78,122,151); }

.map-wrapper .col-map .button { background-image: url('https://dev-cfalls-dtcf.pantheonsite.io//sites/all/themes/triadzen/css/img/icon-map.svg'); background-size: 35px auto; }
.map-wrapper .col-listing .button { background-image: url('https://dev-cfalls-dtcf.pantheonsite.io//sites/all/themes/triadzen/css/img/icon-list.svg'); background-size: 28px auto; }

.map-wrapper .col-map .content { display: block; width: 100%; height: 0; padding-bottom: 255%; background: #fff url('https://dev-cfalls-dtcf.pantheonsite.io//sites/all/themes/triadzen/css/img/map.v.2.jpg') center top no-repeat; background-size: 100% auto;  text-indent: -9999em; }
.map-wrapper .col-listing .content { list-style-type: none; padding: 20px; margin: 0; }
.map-wrapper .col-listing .content li { margin: 0 0 10px; font-size: 18px; line-height: 24px; }

@media screen and (max-width: 1000px) {
  
  .map-wrapper [class*='col-'] { width: 120px; height: 100px;
    transition: width 500ms ease-in-out, height 100ms linear 500ms;
  }
  .map-wrapper [class*='col-'].show { width: calc(100% - 120px); height: auto;
    transition: width 500ms ease-in-out, height 0 linear;    
  }
  
  .map-wrapper [class*='col-'] .button { display: block; pointer-events: auto; opacity: 1;
    transition: opacity 100ms linear 600ms;
  }
  .map-wrapper [class*='col-'].show .button { cursor: default; pointer-events: none; opacity: 0; 
    transition: opacity 50ms linear;
  }
  
  .map-wrapper [class*='col-'] .content { opacity: 0;
    transition: opacity 200ms ease-in-out;
  }
  .map-wrapper [class*='col-'].show .content { opacity: 1;
    
  }
  
}

@media screen and (max-width: 700px) {
  
  .map-wrapper [class*='col-'] { width: 50px; }
  .map-wrapper [class*='col-'].show { width: calc(100% - 50px); }
  .map-wrapper [class*='col-'] .button { top: 10px; width: 40px; height: 40px; text-align: left; text-indent: -9999em; }
  .map-wrapper .col-map .button { left: 0; right: auto; background-position: center center; background-size: 26px auto; }
  .map-wrapper .col-listing .button { right: 0; left: auto; background-position: center center; background-size: 20px auto; }
  
}

/*Downloaded from https://www.codeseek.co/0degreesk/map-building-qKEjYr */
$(function() {
  
  $('.map-wrapper [class*="col-"] .button').click(function() {
    console.log('clicked');
    $('.map-wrapper [class*="col-"]').removeClass('show');
    $(this).parent().addClass('show');
  });
  
});

Comments