Soldan sağa katlanarak açılan liste

Menü örneğimiz sayfasnın sol tarafında  sabit  duruyor  ve mouse  ile  ok işaretine tıklandığında  adeta ikiye katlanmış  bir  kağıt  parçasının  düzelmesi  gibi  bir  efekte  sahip. Mouse  ile ok işaretine tekrar tıkladığımızda  menü örneği tekrar ikiye katlanıp sayfanın sol tarafında kayboluyor ve sadece  ok işaretleri kalıyor.

Özelleştirmeye elverişli  ve  aynı bu efekti kullanarak  birbirinden güzzel menü örnekleri  oluşturup  sitenize  farklı bir  görsellik katabilirsiniz. Kendisi çok iyi  bir tasarımcı olan  Tamino Martinius tarafından hazırlanmış  olan bu örnekte Css3 ve birazda  jQuery kullanılmış.  Tasarımcının kendi  sitesini  incelemenizde de  ayrıca  sizin için fayd aolur  diye düşünüyorum. Başta  sitesini  tamamiyle  flash  zannettim harika  efektler  bulunuyor endi sitesinde. Ama  bildiğiniz  javascript ve  css  kullanarak oluşturulmuş bir site.

Kullanım

Head etiketleri arasına eklemeniz gereken bölüm.

Js  ve Css dosya adresleri :

<link rel="stylesheet" href="stil.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 Body  etiketleri arasına eklemeni gereken bölümler.

Html : 

<div class="menu">
  <input type="checkbox" id="menu-collapsed" name="menu-collapsed" checked="checked" />
  <div class="menu-content menu-content-1">
    <h2>CSS only 3D fold menu</h2>
    <ul>
      <li>lorem ipsum</li>
      <li>dolor sit amet</li>
      <li>consetetur sadipscing</li>
      <li>elitr</li>
      <li>sed diam nonumy</li>
      <li>eirmod tempor</li>
      <li>invidunt ut</li>
      <li>labore et dolore</li>
    </ul>
  </div>
  <div class="menu-switch">
    <label class="collapse" for="menu-collapsed">«</label>
    <label class="rise" for="menu-collapsed">»</label>
  </div>
</div>



<script>
$('.menu-content').clone().wrap('div').attr('class', 'menu-content menu-content-2').insertBefore('.menu-switch')
                  .clone().wrap('div').attr('class', 'menu-content menu-content-3').insertBefore('.menu-switch');

</script>