Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

P0Y3B

Dodanie efektu zmiany kategorii

Promowane odpowiedzi

Mam taki kod strony 

 

HTML

 

<!DOCTYPE html>
<html>
  <head>
    <title>Trzykrotny medalista wszyskiego</title>
    <script src="//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js"></script>
    <script src="//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js"></script>
    <script src="//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js"></script>
    <script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="function.js"></script>    
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="wrapper">
      <div id="leftWrapper">
        <div id="listView" class="list">
          <li class=""><a href="index.php">Strona Główna</a></li>
          <li class="list-item-active"><a href="#">About</a></li>
          <li class=""><a href="#">Projects</a></li>
          <li class=""><a href="#">Shop</a></li>
          <li class=""><a href="#">Social</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </div>
      </div>
      <div id="rightWrapper" class="">
        <div id="header" class=""><a id="fullPage" href="#">|||</a></div>
        <div id="contentWrapper">
          <article id="showCase">
            <div class="article-header">Some of my other designs</div>
            <section>
              <iframe id="iframe_embed_1188432" src="https://s.codepen.io/RavingAPD/fullcpgrid/zqvKx" data-slug-hash="zqvKx" data-title="Clean CSS3 menu " allowtransparency="true" frameborder="0" scrolling="no" data-src="https://s.codepen.io/RavingAPD/fullcpgrid/zqvKx" sandbox="allow-scripts allow-pointer-lock allow-same-origin">
              </iframe><br>
              <a href="https://codepen.io/RavingAPD/pen/zqvKx" class="cover-link" target="blank">Clean CSS3 menu</a>
            </section>

            <section>
              <iframe id="iframe_embed_1515311" src="https://s.codepen.io/RavingAPD/fullcpgrid/cxopF" data-slug-hash="cxopF" data-title="Simple stylish sidemenu" allowtransparency="true" frameborder="0" scrolling="no" data-src="https://s.codepen.io/RavingAPD/fullcpgrid/cxopF" sandbox="allow-scripts allow-pointer-lock allow-same-origin">
              </iframe><br>
              <a href="https://codepen.io/RavingAPD/pen/cxopF" class="cover-link" target="blank">Lightweight website concept</a>
            </section>

            <section>
              <iframe id="iframe_embed_1492343" src="https://s.codepen.io/RavingAPD/fullcpgrid/qAKcl" data-slug-hash="qAKcl" data-title="Multi layer menu" allowtransparency="true" frameborder="0" scrolling="no" data-src="https://s.codepen.io/RavingAPD/fullcpgrid/qAKcl" sandbox="allow-scripts allow-pointer-lock allow-same-origin">
              </iframe><br>
              <a href="https://codepen.io/RavingAPD/pen/qAKcl" class="cover-link" target="blank">Multi layer menu</a>
            </section>

            <section>
              <iframe id="iframe_embed_1317479" src="https://s.codepen.io/RavingAPD/fullcpgrid/Homst" data-slug-hash="Homst" data-title="Short expandable user description" allowtransparency="true" frameborder="0" scrolling="no" data-src="https://s.codepen.io/RavingAPD/fullcpgrid/Homst" sandbox="allow-scripts allow-pointer-lock allow-same-origin">
              </iframe><br>
              <a href="https://codepen.io/RavingAPD/pen/Homst" class="cover-link" target="blank">Short expandable user description</a>
            </section>
          </article>
        </div>
      </div>
    </div>
  </body></html>

 

I chciał bym uzyskać jakiś ciekawy efekt zmiany poszczególnych kategorii z lewej strony, np zapętlenie jak w IPS

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Mniej wiecej



* { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; width: 100%; } #wrapper { display: block; position: fixed; width: 100%; height: 100%; } #leftWrapper { display: inline-block; position: absolute; left: 0; margin: 0; padding: 0; width: 15em; height: 100%; background-color: #1e1e1e; } #listView { display: block; position: relative; } #listView li { display: block; list-style: none; } #listView li a { display: block; padding: 20px; color: #fff; font-family: sans-serif; font-size: 1.1em; text-decoration: none; border-top: 1px solid rgba(0,0,0,0.5); border-bottom:1px solid rgba(255,255,255,0.04); -webkit-transition: all .20s ease; -moz-transition: all .20s ease; -o-transition: all .20s ease; transition: all .20s ease; } #rightWrapper { display: inline-block; position: absolute; left: 15em; margin: 0; padding: 0px 40px; width: calc(100% - 15em); height: 100%; overflow-y: scroll; background-color: #efefef; -webkit-transition: all .20s ease; -moz-transition: all .20s ease; -o-transition: all .20s ease; transition: all .20s ease; } #header { display: block; position: fixed; left: 15em; width: 100%; z-index: 999; background-color: #efefef; border-bottom:2px solid rgba(0,0,0,0.2); -webkit-transition: all .20s ease; -moz-transition: all .20s ease; -o-transition: all .20s ease; transition: all .20s ease; } #fullPage { display: inline-block; margin-left: 20px; padding: 10px; color: #1e1e1e; font-family: sans-serif; font-size: 2em; font-weight: bold; text-decoration: none; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #contentWrapper { display: block; position: relative; margin-top: 100px; width: 100%; height: 100%; } article { margin-bottom: 20px; color: #1e1e1e; font-family: sans-serif; font-size: 1em; text-decoration: none; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-bottom: 2px solid rgba(0,0,0,0.1); } section { padding: 10px; } .article-header { padding: 10px; color: #fff; font-family: sans-serif; font-size: 1.5em; text-align: left; background-color: #2DCC70; } #showCase, #showCase section, #showCase section a { display: inline-block; padding: 10px; vertical-align: top; color: #1e1e1e; font-family: sans-serif; font-size: 1em; text-align: center; text-decoration: none; -webkit-transition: all .20s ease; -moz-transition: all .20s ease; -o-transition: all .20s ease; transition: all .20s ease; } #showCase { padding: 0; } #showCase section a { box-shadow: inset 0px -2px #2DCC70; } #showCase section a:hover { color: #fff; box-shadow: inset 0px -50px #2DCC70; } #social { text-align: center; } #social a { display: inline-block; width: 60px; height: 60px; box-shadow: inset 0px 0px; } #social a:hover { box-shadow: inset 0px 0px; } #social a img { max-width: 100%; } //toggle classes .full-page { left: 0 !important; width: 100% !important; } .list-item-active:after { content: ""; position: absolute; margin-top: -65px; margin-left: 13.45em; width: 0; height: 0; border-top: 33px solid transparent; border-bottom: 33px solid transparent; border-right: 25px solid #2DCC70; -webkit-transition: all .20s ease; -moz-transition: all .20s ease; -o-transition: all .20s ease; transition: all .20s ease; }

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


×