Dropdown

リンクやセレクトのドロップダウン表示機能

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • アイコン表示
  • 編集
  • 削除
  • edit編集
  • delete削除

使い方

トリガーとなる要素に[data-drop]属性を追加し、ユニークな値を入れてください。表示対象のサーチに使用します。
+-.mod_drop-+の[data-drop]属性に、トリガー要素の[data-drop]属性と同等の値を入れてください。

+-.mod_drop-+の子要素にドロップダウンで表示する項目を追加します。
リンクの場合でも*-a-*は作らずに、子要素（サンプルでは*-li-*）に直接[href=""]や[target="_blank"]を追加してください。

リンクではなくクリックアクションでJSを動かしたい方はidやclassを指定してお使いください。

ベースはクリック要素の直下に表示しますが、画面幅からはみ出す時は上部や左にずらして表示します。

mod_drop

+-.mod_drop-+はDOMに関係なく設置可能です。
リスト内に使用する場合などの同一の表示の場合は+-.mod_drop-+は1つだけ用意し、表示時に指定の値を渡すなどすれば、HTMLを簡略化出来ます。
参考Name List。

アイコン

ドロップダウンの項目にアイコンを表示する場合は子要素に含めてください。子要素はflex化しているのでそのまま横並びします。

HTMLの記述をシンプルにするために*-li-*に*-a-*の属性を使用しています。
気持ち悪い方はJSの+-.mod_drop-li-+のクリックアクションや、CSSのpaddingを変更してお使いください。
  • HTML
  • CSS
  • Script


  
    
    
  • 
    
  • 
  
.mod_dropOuter {
  width: max-content;
  height: fit-content;
  min-width: 100px;
  display: none;
  position: fixed;
  z-index: 500;
}
.mod_drop {
  width: 100%;
  padding: 8px 0;
  border-radius: 6px;
  background: var(--bg-paper);
  box-shadow: var(--shadow-main);
  transform: scale(.8);
  transform-origin: 50% 0%;
  transition: .13s;
}
.mod_drop-li {
  padding: 8px 12px;
  display: flex;
  gap: 4px;
  cursor: pointer;
  transition: .2s;
}
.mod_drop-li:hover {background: var(--hover);}

$('.mod_drop').each(function(){
  $('li',this).addClass('mod_drop-li').attr('data-ripple','rgb(0 0 0 / .1)');
  $(this).wrap('<div class="mod_dropOuter">');
});
$bd.on('click','[data-drop]',function(){
  if($('.dropDisp')[0]){
    dropClose();
    return false;
  }

  noscroll();
  $rt.addClass('dropDisp');

  let t = $(this);
  let td = t.data('drop');
  let $tar = $('.mod_drop[data-drop='+td+']');
  let $par = $tar.parent();

  //下部・右部 空きスペース確認
  let dropHeight = $par.innerHeight();
  let winHeight = $win.height();
  let offsetTop = t.offset().top;
  let scroll = $win.scrollTop();
  let ot = '';
  if(winHeight < offsetTop-scroll+dropHeight+t.innerHeight()){
    ot = offsetTop - dropHeight - 8;
  } else {
    ot = offsetTop + t.innerHeight();
  }
  
  let dropWidth = $par.width();
  let winWidth = $win.width();
  let offsetLeft = t.offset().left;
  let leftPosi = offsetLeft+dropWidth;
  let ol = '';
  if(winWidth < leftPosi){
    ol = offsetLeft - (leftPosi - winWidth + 16);
  } else {
    ol = offsetLeft;
  }

  $par.css({
    'top':ot,
    'left':ol,
  }).fadeIn(130);
  $tar.css('transform','scale(1)');
});
$bd.on('click','.mod_drop-li',function(){
  let href = $(this).attr('href');
  if(href != undefined){
    if($(this).attr('target') == '_blank'){
      window.open(href, '_blank')
    } else {
      window.location.href = href;
    }
  }
  dropClose();
});
function dropClose(){
  if($('.dropDisp')[0]){
    $('.mod_dropOuter').fadeOut(130);
    $('.mod_drop').removeAttr('style');
    noscroll();
    $rt.removeClass('dropDisp');
  }
}
$bd.on('click','.dropDisp',function(){dropClose();});