お疲れ様です!Redmine のプラグイン「view customize plugin」を使ったカスタマイズです。

ヘッダーメニューにリンクメニューを追加してみる(JavaScript)

  • パスのパターン : /
  • プロジェクトのパターン : 空
  • 挿入位置 : 全ページのヘッダ
  • 種別 : JavaScript
  • コメント : ヘッダーメニューにリンクメニューを追加してみる(JavaScript)
  • 有効 : ✔
  • プライベート : □
  • コード :
$(document).ready(function(){
    var style = '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">';
    $('head link:last').after(style);

  // メニューの準備
  const menus = 
<li>
<ul id="hoge-menu">
<li><a href="javascript:return false;">リンク</a><br/>
<ul>
<li><a href="https://drive.google.com" target="_blank"><i class="fab fa-google-drive fa-lg"></i>GoogleDrive</a></li>
<li><a href="https://github.com" target="_blank"><i class="fab fa-github fa-lg"></i>GitHub</a></li>
</ul>
</ul>
</li>
;

  // 追加する
  $('#top-menu>ul').append(menus);
  $('#hoge-menu').menu(
        {
            position: {
                my: "center bottom",
                at: "right-1 top+1"
            }
        }
  );
});

ヘッダーメニューにリンクメニューを追加してみる(CSS)

  • パスのパターン : /
  • プロジェクトのパターン :
  • 挿入位置 : 全ページのヘッダ
  • 種別 : CSS
  • コメント : ヘッダーメニューにリンクメニューを追加してみる(CSS)
  • 有効 : ✔
  • プライベート : □
  • コード :
.ui-widget {
  font-size: inherit;
}
.ui-state-hover,
.ui-state-active,
.ui-menu .ui-state-focus,
.ui-widget-content {
  background: none;
  background-color: transparent;
  border: 0;
}
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active {
  background: none;
  background-color: transparent;
  border: 0;
}
  • 結果 :

随時、追記してゆきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*