En optimal responsive menü yapma yöntemi

Kamal Balayev

Alışma Sürecinde
#1
Bu paylaşımımızda sizlere responsive sitelleriniz için en az HTML, CSS ve JavaScript kullanarak en iyi menü yapımını göstereceğim.

Bu kodları inceleyerek yöntemimi anlamaya çalışın. Takıldığınız noktaları ise yorum kısmında yazarak sora bilirsiniz.

Eğer buradakı mantığı kavraya bilirseniz bu gibi şeyleri kendiniz de çok rahatlıkla yapa bilirsiniz.

Beğenmeyi ve yorum yazmağı unutmayın :)

HTML:
<header class="main-header clear">

  <span class="nav-toggle show-xs">❖</span>

  <a href="/" class="logo" title="sitename.com">☬ Logo</a>

  <nav class="nav-menu" aria-label="Navigation menu">

    <ul class="menu-list" role="menubar">

      <li>
        <a href="#" title="Menu item 1" role="menuitem">
          <span>Menu item 1</span>
          <span class="caret" data-menu-target="1">▿</span>
        </a>

        <ul class="menu-sub-list" data-menu="1">

          <li><a href="#" class="back" rel="nofollow" aria-hidden="true">❮ Back</a></li>

          <li><a href="#" title="Menu item 1.1" role="menuitem"><span>Menu item 1.1</span> </a></li>

          <li><a href="#" title="Menu item 1.2" role="menuitem"><span>Menu item 1.2</span> </a></li>

          <li><a href="#" title="Menu item 1.3" role="menuitem"><span>Menu item 1.3</span> </a></li>

          <li><a href="#" title="Menu item 1.4" role="menuitem"><span>Menu item 1.4</span> </a></li>

          <li><a href="#" title="Menu item 1.5" role="menuitem"><span>Menu item 1.5</span> </a></li>

        </ul>
      </li>

      <li>

        <a href="#" title="Menu item 2" role="menuitem">
          <span>Menu item 2</span>
          <span class="caret" data-menu-target="2">▿</span>
        </a>

        <ul class="menu-sub-list" data-menu="2">
          <li><a href="#" class="back" rel="nofollow" aria-hidden="true">❮ Back</a></li>
          <li><a href="#" title="Menu item 1.1" role="menuitem"><span>Menu item 2.1</span> </a></li>
          <li><a href="#" title="Menu item 1.2" role="menuitem"><span>Menu item 2.2</span> </a></li>
          <li><a href="#" title="Menu item 1.3" role="menuitem"><span>Menu item 2.3</span> </a></li>
          <li><a href="#" title="Menu item 1.4" role="menuitem"><span>Menu item 2.4</span> </a></li>
          <li><a href="#" title="Menu item 1.5" role="menuitem"><span>Menu item 2.5</span> </a></li>
        </ul>

      </li>

      <li><a href="#" title="Menu item 3" role="menuitem"><span>Menu item 3</span> </a></li>

      <li><a href="#" title="Menu item 4" role="menuitem"><span>Menu item 4</span> </a></li>

      <li><a href="#" title="Menu item 5" role="menuitem"><span>Menu item 5</span> </a></li>

    </ul>

  </nav>

</header>

<div class="overlay"></div>
CSS:
* {
  outline: none;
  text-decoration: none;
  box-sizing: content-box;
}

body{
  padding: 0;
  margin: 0;
  height:100vh;
}

.clear:after{
  content: '';
  display: table;
  clear: both;
}

.show-xs{
  display: none;
}

.overlay{
  display: none;
  position: fixed;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 990;
}

.main-header{
  position: fixed;
  left: 0;
  width:100%;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .1);
  z-index: 999;
}

.main-header a {
  display: block;
  color: #000;
  font-family: Arial;
}

.logo {
  float: left;
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
  line-height: 27px;
  text-align: center;
}

.nav-menu{
  float: left;
}

.nav-menu ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (min-width: 768px){

    .menu-list > li{
        float: left;
        position: relative;
    }

    .menu-list > li > a {
        padding: 18px 15px;
        line-height: 21px;
    }

  .menu-list > li > ul{
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 10px 0;
    min-width: 250px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  }

  .menu-list > li:hover > ul{
    display: block;
  }

  .menu-list > li > ul > li a {
    padding: 10px 15px;
  }

  .menu-list > li:hover > a,
  .menu-list > li > ul > li:hover a{
    background-color: #f9f9f9;
  }

}

@media(max-width: 767px){

  .show-xs{
    display: block;
  }


  .nav-toggle{
    float: left;
    width: 50px;
    height: 57px;
    line-height: 57px;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
  }

  .logo{
    width: calc(100% - 100px);
  }

  .nav-menu{
    position: fixed;
    background-color: #fff;
    left: -260px;
    width: 250px;
    height: 100vh;
    overflow: hidden;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s;
  }

  .nav-shown .nav-menu{
    left:0;
  }

  .nav-menu ul{
    top: 0;
    height:100%;
    width: 250px;
    transition: left 0.3s;
    overflow: auto;
  }

  .menu-list{
    padding: 10px 0 !important;
  }

  .menu-list li a{
    display: block;
    padding: 10px 20px;
    position: relative;
  }

  .menu-list li a .caret{
    position: absolute;
    right: 0;
    top: 0;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-top: 1px solid #f9f9f9;
    font-size: 20px;
    transform: rotate(-90deg)
  }

  .menu-sub-list {
    position: absolute;
    left: 250px;
    background-color: #fff;
    z-index: 1;
  }

  .menu-sub-list.shown{
    left: 0;
  }

  .menu-sub-list .back{
    border-bottom: 1px solid #ddd;
  }

}
JavaScript:
$(document).ready(function(){

  var body = $('body');
  var navToggle = $('.nav-toggle');
  var navMenu = $('.nav-menu');
  var listToggle = $('.caret', navMenu);
  var overlay = $('.overlay');

  navToggle.on('click', function () {
    body.toggleClass('nav-shown');
    overlayShow();
  });

  $('*').click(function (e) {
    if (!$(e.target).is('.nav-toggle')
        && !$(e.target).is('.nav-toggle *')
        && !$(e.target).is('.nav-menu')
        && !$(e.target).is('.nav-menu *')) {
      body.removeClass('nav-shown');
    }
  });

  $('[data-menu-target]').each(function () {

    var $this = $(this);
    var $attr = $this.attr('data-menu-target');
    var $back = $('.back');

    $this.click(function () {
      $('[data-menu="' + $attr + '"]').toggleClass('shown');
      return false;
    });

    $back.click(function () {
      $('[data-menu="' + $attr + '"]').removeClass('shown');
    });

  });

  overlay.on('click', function(){
    overlayHide();
  })

  function overlayShow(){
    overlay.show();
  }

  function overlayHide(){
    overlay.hide();
  }

})
1513622925610.png

1513622027549.png Screenshot_1.png Screenshot_2.png

https://codepen.io/kamal-balayev/pen/NXxBQq 1513622925610.png
 
Last edited:

Kamal Balayev

Alışma Sürecinde
#2
Arkadaşlar, bu örnekte HTML, CSS ve jQuery ile en iyi responsive menü yaptım. CSS olarak çok bir şey yapmadım. Bu yapmış olduğum örneyi incelemeniz, html ve js kodlarını anlamanız gerekiyor. Bu scripti bir az daha geliştirmek mümkün. Ama ben esas html ve js yapısının mantığını kavramanızı istiyorm. Eğer kavraya bilirseniz kendiniz de bunu geliştire bilirsiniz.