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

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

Promowane odpowiedzi

P0Y3B    159

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
P0Y3B    159

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.


×