Slide navigation

dabblet.css

/**
 * Slide navigation
 */
html, body {
  margin: 0 auto;
}
.wrapper {
  margin: 0 auto;
  height: 320px;
  width: 240px;
}

/* hide input */
.box-open,
.box-close input {
  display: none;
}

/* Boxes */
.box-set {
  border-radius: 3px;
  height: 100%;
  right: 0;
  left: 0;
  overflow: hidden;
  position: relative;
  position: fixed;
  top: 0;
  width: 100%;
}
.box-content {
  background: #FFF;
  height: 100%;
  left: 100%;
  overflow: hidden;overflow-y: auto;overflow-x: hidden;overflow: -moz-scrollbars-vertical;
  position: absolute;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.box-label,
.box-close {
  display: block;
  padding: .5em;
  position: relative;
  -webkit-transition: .4s;
}

/* Opened */
.box-open:checked ~ .box-content {
  left: 0;
  z-index: 2;
  box-shadow: 9999px 0 0 9999px #FFF;
  top: 0;
}
.box-open:checked ~ .box-close {
}
.box-open:checked ~ .box-label {
}

/* Style */
.box-label,
.box-close {
  background: linear-gradient(top, #F7F7F7, #E7E7E7);
  border-bottom: 1px solid #CCC;
  cursor: pointer;
  font: 1em/1.2 Helvetica, Arial, Freesans, sans-serif;
}
.box-content {
  border: 1px solid #CCC;
  border-width: 0 1px;
  box-shadow: 16px 0 16px rgba(0,0,0,.65), 0 0 0 #FFF;
  transition: left .4s, z-index 0 .4s;
}
.box-open:checked ~ .box-content {
  box-shadow: 9999px 0 0 9999px #FFF;
  transition: left .4s, z-index 0;
}

dabblet.html

    <label class="box-label" for="box-1"><a href="#menu">En savoir +</a></label>
    Contenu first
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac est nec magna viverra congue in eget urna. Sed sagittis, dui in placerat volutpat, urna ipsum sodales erat, sed sodales sapien diam id arcu. Proin tristique tempor velit in dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ac ultricies massa. Mauris pretium nibh vitae metus dictum aliquet. Aliquam erat volutpat. Praesent sagittis accumsan dui ut sodales. Nulla facilisi.
    </p>
    <div class="box-set" id="menu">
      <div class="box">
        <label class="box-label" for="box-1">En savoir +</label>
        <input class="box-open" name="box-1" type="radio" id="box-1">
        <div class="box-content">
          <label class="box-close"><input name="box-1" type="radio" />◂</label>
          <p>
            Pour cet effet la technique du ":checked ~" est utilisée. Chaque box comporte deux input radio :
          </p>
          <ol>
            <li>L'opener, placé en début de box, il permet la sélection css</li>
            <li>Le closer, placé dans le contenu de la box. Il possède le même name que l'opener et ceux pour permettre le changement d'état de ce dernier.</li>
          </ol>
          <div class="box">
            <input class="box-open" name="box-2" type="radio" id="box-1-1">
            <label class="box-label" for="box-1-1">Box 1-1</label>
            <div class="box-content">
              <label class="box-close"><input name="box-2" type="radio" />◂</label>
              Content 1-1
            </div>
          </div>
          <div class="box">
            <input class="box-open" name="box-2" type="radio" id="box-1-2">
            <label class="box-label" for="box-1-2">Encore un peu plus</label>
            <div class="box-content">
            <label class="box-close"><input name="box-2" type="radio" />◂</label>
              Content 1-2
              <div class="box">
                <input class="box-open" name="box-3" type="radio" id="box-1-2-1">
                <label class="box-label" for="box-1-2-1">Box 1-2-1</label>
                <div class="box-content">
                  <label class="box-close"><input name="box-3" type="radio" />◂</label>
                  Content 1-2-1
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac est nec magna viverra congue in eget urna. Sed sagittis, dui in placerat volutpat, urna ipsum sodales erat, sed sodales sapien diam id arcu. Proin tristique tempor velit in dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ac ultricies massa. Mauris pretium nibh vitae metus dictum aliquet. Aliquam erat volutpat. Praesent sagittis accumsan dui ut sodales. Nulla facilisi.
    </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}