Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>Untitled Document</title>
<style>
body{background:#ccc;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.content-wrapper{width:100%;max-width:960px;margin:0 auto;padding:0;background:#f2f2f2;}
.head-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: -30px;
    margin: 0;
    z-index: 9999
}
.announcement {
    width: 100%;
    font-weight: 300;
    line-height: 30px;
    background: #ffeb71;
    text-align: center;
    color: #333;
}
.announcement a {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}
.header{background:#033;padding:0;height:55px;line-height:55px;width:100%;}
header .content-wrapper{background:0 0;padding:0 20px;}
header h1{float:left;margin:0 40px 0 0;width:210px;color:#fff;height:55px;line-height:55px;}
.content{width:calc(100% - 300px);margin:0;padding:20px 20px 0;background:#fff;float:left}
.content h2{margin:0 0 20px;padding:0;font-size:28px;text-align:center;text-transform:capitalize;}
.content .in{position:relative;padding:30px 20px 0 0;float:left}
.content p{margin:0 0 20px;padding:0;font-size:16px;}
footer .content-wrapper{background:#666;color:#CCC;text-align:center;padding:10px 20px;font-size:90%;}
.clear{display:block;clear:both;}
.sidebar{width:300px;padding:20px;float:left}
.sidebar h2{font-size:20px;padding:0;margin:0 0 20px}
.sidebar ul{margin:0;padding:0 0 0 20px}
.sidebar li{margin:0 0 10px;padding:0}
.sidebar li a{display:block;text-decoration:none}
input.check-sidebar{position:fixed;top:-100px;opacity:0}
.toggle-label-sidebar{position: -webkit-sticky;position:sticky;top:70px;z-index:16;margin-right:-30px;margin-top:-40px;font-size:12px;color:#fff;cursor:pointer;display:flex;align-items:center;float:right}
.toggle-label-sidebar:focus,.toggle-label-sidebar:active{outline:0}
.toggle-label-icon,.toggle-label-title{display:flex;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);background:#2B0C93;border-radius:4px;height:28px;padding:5px}
.toggle-label-title{border-radius:4px 0 0 4px;margin-right:-5px;padding-right:10px}
.toggle-label-sidebar svg{vertical-align:middle}
input.check-sidebar:checked~.sidebar{display:none}
input.check-sidebar:checked~.content{width:100%}
input.check-sidebar:checked~.content .in .toggle-label-sidebar svg{transform:rotate(180deg)}
.menu-kompiajaib{float:left;width:calc(100% - 250px);display: flex;}
.menu-kompiajaib .menu {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 18px;
}
.menu-kompiajaib .menu .btn-menu {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: 0 0;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    font-weight: 700;
    line-height: 55px;
    cursor: pointer;
}
.menu-kompiajaib .menu .btn-menu:focus,
.menu-kompiajaib .menu .btn-menu:active,
.open-menu:focus,
.open-menu:active {
    outline: none;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu {
    display: flex;
    margin-left: 5px;
    box-sizing: initial;
    justify-content: center;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu svg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu svg path {
    fill: #fff;
}
.menu-kompiajaib .menu .sub-menu {
    box-shadow: 0 10px 25px 0 rgba(0,0,0,.2);
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 8px 0;
    pointer-events: none;
    opacity: 0;
    list-style: none;
    background: #fff;
    border-radius: 0 0 4px 4px;
    transition: opacity .2s cubic-bezier(.25,.1,.25,1);
}
.menu-kompiajaib .menu .sub-menu li {
    position: relative;
    width: 180px;
}
.menu-kompiajaib .menu .sub-menu li a {
    padding: 8px 15px;
    font-weight: 700;
    font-size: 16px;
    color: #555;
    display: block;
    text-decoration: none;
    line-height: 1;
}
.menu-kompiajaib .menu .btn-menu:hover~.sub-menu, .menu-kompiajaib .menu .btn-menu:focus~.sub-menu, .menu-kompiajaib .menu .sub-menu:hover, .menu-kompiajaib .menu .sub-menu:focus-within {
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s cubic-bezier(.25,.1,.25,1);
    visibility: visible;
}
.menu-kompiajaib .menu .btn-menu:hover, .menu-kompiajaib .menu .sub-menu li a:hover {
    color: #39F
}
input.check-menu {
    position: fixed;
    top: -100px;
    opacity: 0
}
.open-menu,.mobile {
    display: none;
    visibility: hidden;
}
@media screen and (max-width:960px){
    .menu-kompiajaib {
        display: none;
    }
    .open-menu {
        display: block;
        visibility: visible;
        float: right;
        line-height: 55px;
        margin: 0;
        padding: 0 10px;
        cursor: pointer;
    }
    .open-menu.mobile {
        position: absolute;
        top: 0;
        right: 10px;
        z-index: 2
    }
    .open-menu.mobile svg path {
        fill: #333;
    }
    .open-menu svg {
        vertical-align: middle;
    }
    .open-menu svg path {
        fill: #fff;
    }
    input.check-menu:checked~.menu-kompiajaib {
        display: block;
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        overflow-y: visible;
        padding-top: 10px;
        scrollbar-width: none;
        -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft;
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        z-index: 999;
    }
    input.check-menu:checked~.menu-kompiajaib::-webkit-scrollbar {
        display: none
    }
    input.check-menu:checked~.menu-kompiajaib .menu {
        position: relative;
        align-items: unset;
        margin: 0 18px;
        display: block;
        text-align: left;
        z-index: 1
    }
    input.check-menu:checked~.menu-kompiajaib .btn-menu {
        align-items: unset;
        display: block;
        color: #333;
        line-height: 35px;
        width: 100%;
        text-align: left;
    }
    input.check-menu:checked~.menu-kompiajaib .menu .btn-menu .arrow-menu {
        display: inline;
    }
    input.check-menu:checked~.menu-kompiajaib .menu .btn-menu .arrow-menu svg path {
        fill: #333;
    }
    .menu-kompiajaib .menu .btn-menu:hover~.sub-menu, .menu-kompiajaib .menu .btn-menu:focus~.sub-menu, .menu-kompiajaib .menu .sub-menu:hover, .menu-kompiajaib .menu .sub-menu:focus-within {
        position: relative;
        padding-top: 0;
        box-shadow: none;
    }
      @-webkit-keyframes slideInLeft {
          0% {
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
          visibility: visible;
      }
          100% {
          -webkit-transform: translateX(0);
          transform: translateX(0);
      }
      }
      @keyframes slideInLeft {
          0% {
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
          visibility: visible;
      }
          100% {
          -webkit-transform: translateX(0);
          transform: translateX(0);
      }
      } 
    
    .content, .sidebar {
        width: 100%;
    }
    .toggle-label-sidebar {
        display: none;
    }
    .content .in {
        padding: 0;
    }
}

</style>
</head>

<body>
<div class='head-wrap'>
<div class='announcement'>
&#10140; <a href='https://www.arlinadesign.com/2019/05/javascript-ripple-effect.html' title='Javascript ile Ripple (Dalgalanma) Efekti Oluşturma'>Javascript ile Ripple (Dalgalanma) Efekti Oluşturma</a>
</div>
<header class="header" role="banner">
<div class='content-wrapper'>
<h1>Başlık</h1>
<input class='check-menu' hidden='' id='check-menu' name='checkmenu' type='checkbox'/>
<label class='open-menu' for='check-menu' role='open-menu' tabindex='0'><svg width="24" height="24" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></label>
<nav class="menu-kompiajaib">
<label class='open-menu mobile' for='check-menu' role='open-menu' tabindex='0'><svg width="24" height="24" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></label>
  <div class="menu">
  <button class="btn-menu">Menü 1<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
    <ul class="sub-menu">
      <li><a href="#">Alt Menü 1</a></li>
      <li><a href="#">Alt Menü 2</a></li>
      <li><a href="#">Alt Menü 3</a></li>
      <li><a href="#">Alt Menü 4</a></li>
    </ul>
  </div>
  <div class="menu">
  <button class="btn-menu">Menü 2<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
    <ul class="sub-menu">
      <li><a href="#">Alt Menü 1</a></li>
      <li><a href="#">Alt Menü 2</a></li>
      <li><a href="#">Alt Menü 3</a></li>
      <li><a href="#">Alt Menü 4</a></li>
    </ul>
  </div>
  <div class="menu">
  <button class="btn-menu">Menü 3<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
    <ul class="sub-menu">
      <li><a href="#">Alt Menü 1</a></li>
      <li><a href="#">Alt Menü 2</a></li>
      <li><a href="#">Alt Menü 3</a></li>
      <li><a href="#">Alt Menü 4</a></li>
    </ul>
  </div>
  <div class="menu">
  <button class="btn-menu">Menü 4<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
    <ul class="sub-menu">
      <li><a href="#">Alt Menü 1</a></li>
      <li><a href="#">Alt Menü 2</a></li>
      <li><a href="#">Alt Menü 3</a></li>
      <li><a href="#">Alt Menü 4</a></li>
    </ul>
  </div>
  <div class="menu"><a class="btn-menu" href="#">Menü 5</a></div>
  <div class="menu"><a class="btn-menu" href="#">Menü 6</a></div>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
<div class="clear"></div>
<div class='content-wrapper'>
<input class='check-sidebar' hidden='' id='check-sidebar' name='checksidebar' type='checkbox'/>
<div class='content'>
<h2>E-ticaret Nedir?</h2>
<div class="in">
<label class='toggle-label-sidebar' for='check-sidebar' role='toggle-sidebar' tabindex='0'>
<span class='toggle-label-title' id='toggle-label-title'>Kenar Çubuğu Gizle</span>
<span class='toggle-label-icon'><svg height='18' viewBox='0 0 24 24' width='18'><path d='M12.08,4.08L20,12L12.08,19.92L10.67,18.5L16.17,13H2V11H16.17L10.67,5.5L12.08,4.08M20,12V22H22V2H20V12Z' fill='#fff'/></svg></span></label>
<div class="post">
<p>E-ticaret kelime anlamı olarak, sanal ticaret yani sanal ortamda insanların alışveriş yapma eylemleridir. E-ticaret'in çok uzun tarihi bir geçmişi olmamasına rağmen kısa zamanda çok büyük bir gelişim süreci geçirmiş, ve kullanıcıların profesyonelce kullanımına açılmıştır. E-ticaret günümüzde gelebileceği son noktaya gelmiş bulunmakla beraber, gerek kullanıcılara gerekse firma veya site sahiplerine bir çok özellik ve fırsat tanımaktadır. E-ticaretin sanal ortamda yapılması için çeşitli sistemler geliştirilmiştir. Bu sistemlere genel anlamda e-ticaret sistemleri denilmektedir. E-ticaret sistemlerinin işlevleri hemen hemen günlük hayatta yapabileceğiniz tüm alışveriş işlemlerini kapsayacak düzeydedir. Peki bu e-ticaret sistemlerinde hangi özellikler mevcut? Biraz bu konuya değinelim.</p>
<h2>E-Ticaret Sistemlerinin Genel Özellikleri</h2>
<p>E-ticaret sistemlerinin sanal ortam üzerinden alışverişe aracı olan, ödeme konusunda alıcıya çeşitli imkanlar sunan yazılımlar olduğunu bilmeyenimiz yoktur herhalde. Zira hemen hemen hepimiz mutlaka sanal ortam üzerinden küçük veya büyük farketmez bir ürün siparişi vermişizdir. Buna dayanarak çok uzatmadan e-ticaret sistemlerinin genel özellikleri, kullanıcıya, alıcıya ve satıcıya sunduğu imkanlardan ve genel özelliklerinden bahsetmek istiyorum.</p>
<ul>
<li>E-ticaret sistemleri kolay alışveriş yapabilme imkanı</li>
<li>Ürün seçimi ve araması konusunda kolay kullanıma göre dizayn edilmiş olması özelliği</li>
<li>Aradığınız ürün dışında benzer ürünleri bulmanızda kolaylık sağlaması</li>
<li>Alışverişi kredi kartı, havale ile yapabilme imkanı sunması</li>
<li>Kredi kartı çeşitliliği ile ödeme kolaylığı sağlaması</li>
<li>Üyelik işlemleri ile ürün inceleme, sepete atma seçenekleri</li>
<li>Ürünlerin detaylı bilgilerini alabilme ve çeşitli resimlerini inceleme özelliği</li>
<li>Facebook, twitter ve diğer sosyal imleme sitelerine entegre edilebilmesi</li>
<li>Ziyaretçi veya müşterilerin demografik incelenebilmesi imkanı</li>
</ul>
<p>E-ticaret sistemleri bugün birçok büyük firma tarafından hemen hemen her alanda kullanılmaktadır. En bilinen internet devleri "gittigidiyor", "hepsiburada", "markafoni", "kitapyurdu", "electroworld" ve sayamadığım daha bir çok site e-ticaret sistemleri kullanmaktadırlar. Geriye dönüp bakıldığında ilk yapılma amaçları sadece ürün tanıtım veya sanal ortamda ürün resimlerinin bir galeri olarak sergilenmesi olan e-ticaret sistemleri büyük bir evrime uğramış ve son haliyle yukarıda belirtilen özellikler dahil, daha birçok özellik ile tanışmıştır. Şaşırtıcı derecede bir değişim geçiren bu e-ticaret yazılımlarını zaman sürecinde ne gibi değişiklikler bekliyor hep birlikte bekleyip göreceğiz.</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="sidebar">
<h2>Kenar Çubuğu</h2>
<ul>
<li><a href='#' title='Hakkında'>Hakkında</a></li>
<li><a href='#' title='İletişim'>İletişim</a></li>
<li><a href='#' title='Gizlilik'>Gizlilik</a></li>
<li><a href='#' title='Arşiv'>Arşiv</a></li>
<li><a href='#' title='Reklam'>Reklam</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<footer>
<div class='content-wrapper'>
&#169;2019 Arlina Design
</div>
</footer>
<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  if (winScroll != 0) {
  document.getElementById("toggle-label-title").style.display = "none"
  } else {
      document.getElementById("toggle-label-title").style.display = "flex"
  }
}
//]]>
</script>
</body>
</html>

Kodeks Editör

Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma

"Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma

"Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma" 0 Yorum yapıldı.

Yorum Gönder