root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transition to max-height</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    // This JavaScript code adds a class name of "js" to the html element,
    // to give us a "hook" in CSS for when JS is available.
    var html = document.getElementsByTagName('html')[0];
    html.className += ' js';
  </script>

  <style>
    body {
      font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
      background-color: #edf5f8;
      margin: 0;
      padding: 1em;
    }

    button {
      display: inline-block;
      vertical-align: 20%;
      cursor: pointer;
      border: 0;
      padding: .25em 1em;
      color: #fff;
      border-radius: .25em;
      outline: none;
      font-size: 12px;
      background-color: #173b6d;
      background-image: -webkit-linear-gradient(top, #1a4a8e, #173b6d);
      background-image: -moz-linear-gradient(top, #1a4a8e, #173b6d);
      background-image: -o-linear-gradient(top, #1a4a8e, #173b6d);
      background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
      box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
      -webkit-transition: all 150ms ease-in;
         -moz-transition: all 150ms ease-in;
           -o-transition: all 150ms ease-in;
              transition: all 150ms ease-in;
    }
    button:active {
      box-shadow: 0 0 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
      -webkit-transform: translateY(.25em);
         -moz-transform: translateY(.25em);
          -ms-transform: translateY(.25em);
           -o-transform: translateY(.25em);
              transform: translateY(.25em);
    }

    .expando {
      min-width: 9em;
      max-width: 25em;
      padding: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
    }

    .expando-title {
      margin: 0;
      margin-bottom: .5em;
      vertical-align: middle;
    }
    .expando-trigger {
      margin-left: 0.5em;
    }
    .expando ol {
      margin: 0;
    }

    .expando li {
      border-bottom: 1px solid #ccc;
      line-height: 1.5; /* 24 px */
    }
    
    /**
    * 1. We'll discuss the will-change property briefly in chapter 12!
    */
    .js .expando-list {
      overflow: hidden;
      will-change: transform, opacity; /* 1 */
      -webkit-transition: all .25s ease-in-out;
         -moz-transition: all .25s ease-in-out;
           -o-transition: all .25s ease-in-out;
              transition: all .25s ease-in-out;
      max-height: 0;
      opacity: 0;
    }
    .js .is-expanded .expando-list {
      max-height: 24em;
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="expando">
    <h2 class="expando-title">Top menu choices</h2>
    <ol>
      <li>Capricciosa</li>
      <li>Margherita</li>
      <li>Vesuvio</li>
    </ol>
    <ol class="expando-list" start="4" aria-label="Top menu choices, continued.">
      <li>Calzone</li>
      <li>Quattro Stagioni</li>
      <li>Pescatore</li>
      <li>Bolognese</li>
      <li>Shawarma</li>
      <li>Mexicana</li>
      <li>Fungi</li>
    </ol>
  </div>

  <script>
    // This script handles the toggling of classes and attributes on the list.

    // Grab the first `.expando` element:
    var expando = document.querySelector('.expando'),
        // grab the title element:
        expandoTitle = expando.querySelector('.expando-title'),
        // grab the list itself:
        expandoList = expando.querySelector('.expando-list'),
        expandedClass = 'is-expanded';

    // Set the aria-hidden attribute on the expando-list
    expandoList.setAttribute('aria-hidden', true);
    // Create the "show all" button
    var trigger = document.createElement('button'),
    triggerText = document.createTextNode('Toggle full list');
    trigger.appendChild(triggerText);

    // Set the chosen class name for the trigger
    trigger.className = 'expando-trigger';

    // Grab the title inside the expando and add the button to it:
    var expandoTitle = expando.querySelector('.expando-title');
    expandoTitle.appendChild(trigger);

    // A small function to toggle the class name "expanded" on the expando,
    // when clicked:
    var toggleExpanded = function (e) {
      if (/(^|\s)is-expanded(\s|$)/.test(expando.className)) {
        expando.className = expando.className.replace(' is-expanded', '');
        expandoList.setAttribute('aria-hidden', 'true');
      } else {
        expando.className += ' is-expanded';
        expandoList.setAttribute('aria-hidden', 'false');
      }
    }
    // Add event listener (IE9+ and other modern browsers)
    if (trigger.addEventListener) {
      trigger.addEventListener('click', toggleExpanded, false);
    } else {
      // For IE8:
      if (trigger.attachEvent) {
        trigger.attachEvent('onclick', toggleExpanded);
      }
    }
  </script>
</body>
</html>