<div class="top-bar">
  <nav class="top-bar-section" id="main-menu">
    <ul class="menu vertical medium-horizontal desktop-menu" data-responsive-menu="drilldown medium-dropdown">
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Haber</a></li>
      <li><a href="#">Video</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">İnceleme</a></li>
      <li><a href="#">Bilim</a></li>
      <li><a href="#">Donanım</a></li>
      <li><a href="#">Giyilebilir</a></li>
      <li><a href="#">İnternet</a></li>
      <li><a href="#">Kampanya</a></li>
      <li><a href="#">Sinema</a></li>
      <li><a href="#">Sosyal</a></li>
      <li><a href="#">Medya</a></li>
      <li><a href="#">Uzay</a></li>
      <li><a href="#">Yazılım</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">Yazarlar</a></li>
      <li><a href="#">Gizlilik</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </nav>
  
  <!-- diğer menüsü -->
  <nav class="top-bar-section" id="other-menu">
    <ul class="menu vertical medium-horizontal desktop-menu" data-responsive-menu="drilldown medium-dropdown">
      <li class="diger has-dropdown">
        <a href="#">Diğer</a>
        <ul class="dropdown">
          <li class="hide"><a href="#">Anasayfa</a></li>
          <li class="hide"><a href="#">Haber</a></li>
          <li class="hide"><a href="#">Video</a></li>
          <li class="hide"><a href="#">Forum</a></li>
          <li class="hide"><a href="#">İnceleme</a></li>
          <li class="hide"><a href="#">Bilim</a></li>
          <li class="hide"><a href="#">Donanım</a></li>
          <li class="hide"><a href="#">Giyilebilir</a></li>
          <li class="hide"><a href="#">İnternet</a></li>
          <li class="hide"><a href="#">Kampanya</a></li>
          <li class="hide"><a href="#">Sinema</a></li>
          <li class="hide"><a href="#">Sosyal</a></li>
          <li class="hide"><a href="#">Medya</a></li>
          <li class="hide"><a href="#">Uzay</a></li>
          <li class="hide"><a href="#">Yazılım</a></li>
          <li class="hide"><a href="#">Hakkımızda</a></li>
          <li class="hide"><a href="#">Yazarlar</a></li>
          <li class="hide"><a href="#">Gizlilik</a></li>
          <li class="hide"><a href="#">İletişim</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<br /><br />

<div class="row text-center">
  <div class="panel">
    <h4>Ekrana sığmayan menüleri <b>diğer</b> menüsünde göstermek için ekran boyutunu değiştirin.</h4>
  </div>
</div>

.top-bar {
  
  // ana menü
  #main-menu {
    overflow: hidden;
    position: relative;
    ul.desktop-menu {
      float: left;
      width: 10000px;
      li {
        float: left;
        &.hide {
          display: block !important;
          visibility: hidden;
        }
      }
    }
  }
  
  // diğer menüsü
  #other-menu { 
    display: inline-block;
    position: absolute;
    left: inherit !important; right: 0; top: 0;
  }
}
View Compiled
// sayfa yüklediğinde fonksiyonu çalıştıralım
$(document).ready(function() { responsiveMenu(); });

// ekran boyutu değiştiğinde fonksiyonu çalıştıralım
$(window).resize(function() { responsiveMenu(); });


// sık kullandığımız elemanları değişkenlerde tutalım.
var $menu             = $('#main-menu')
  , $menu_ul          = $menu.find('ul.desktop-menu')
  , $menu_ul_li       = $menu_ul.find('> li')
  // diğer menü
  , $diger_menu       = $('#other-menu ul.desktop-menu').find('> li.diger')
  , $diger_menu_ul    = $diger_menu.find('> ul')
  , $diger_menu_ul_li = $diger_menu_ul.find('> li');

/*
 * bu fonksiyon, ekranda görünmeyen menüleri 
 * "diğer" menüsü altında gösterir.
 */
function responsiveMenu() {
  
  // fonksiyon içinde kullanacağımız değişkenleri belirleyelim.
  var menuGenislik    = $menu.width()
    , menuLiGenislik  = [];
  
  /*
   * bu döngüde menülerin toplam uzunluklarını
   * menuLiGenislik dizisinde "index: width" olarak saklayacağız. 
   * sonrasında menüleri gösterip/gizlerken bu diziyi kullanacağız.
   */
  $menu_ul_li.each(function() {
    
    // mevcut menünün sırasını alalım.
    var i = $(this).index();
    
    // mevcut menünün en sol tarafa olan uzunluğunu alalım.
    menu_soldan_uzunluk = $(this).position().left;
    
    // menüye kendi genişliğini de ekleyelim.
    menu_toplam_uzunluk = menu_soldan_uzunluk + $(this).width();
    
    // menüye "diğer" menüsünün genişliğini de ekleyelim
    menuLiGenislik[i] = menu_toplam_uzunluk + $diger_menu.width();
  });
  
  
  
  /*
   * menuLiGenislik dizisini döngüye alalım.
   * bu dizinin içinde menünün sıra numarası ve toplam genişliği var
   *
   *    Array
   *      0: 165.28125
   *      1: 230.703125
   *      ...
   *  
   */
  $.each(menuLiGenislik, function(key, value) {
    
    // mevcut menü, #main-menu'den uzunsa
    if (value > menuGenislik) {
      
      // menüde gizleyelim
      if ($menu_ul_li.eq(key).hasClass('hide') == false)
        $menu_ul_li.eq(key).addClass('hide');
      
      // diğer menüsünde gösterelim
      if ($diger_menu_ul_li.eq(key).hasClass('hide') == true)
        $diger_menu_ul_li.eq(key).removeClass('hide');
      
    // mevcut menü, #main-menu'den uzun değilse
    } else {
      
      // gizlenmiş menü varsa gösterelim.  
      if ($menu_ul_li.eq(key).hasClass('hide') == true)
        $menu_ul_li.eq(key).removeClass('hide');
      
      // diğer menüsünde de gösterelim.
      if ($diger_menu_ul_li.eq(key).hasClass('hide') == false)
        $diger_menu_ul_li.eq(key).addClass('hide');
    }
  });
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js