ブックマークマネージャのコンテキストメニューを作成する

今日は私のブックマークマネージャのtopbarエントリを置き換えましたCrumb Collector コンテキストメニューでは、彼らは適切にモバイルデバイス上でもはやフィットしなかったため.アプリケーションは、メルンスタックを使用して書かれているので、このポストではどのように私は反応でこのコンテキストメニューを作成共有したいと思います.

私も最終的にカバー画像GIFを適切にループすることができました、しかし、それはこのポストの話題でありません.😉

要件

私は、ちょうど1を持っていましたLog In 右上隅のボタンが、それはあまりにもモバイルデバイスのために広くなったいくつかのより多くのアイコンを追加したい.私は、ユーザーがそれを乗り越えるとき、そして、それが私のブログ、さえずりとdev . toへのリンクと同様にサイトの上で重要な関連を含まなければならないとき、文脈メニューを開けたかったです.

基本設定

Topbarはdiv -それは常に画面の上部にあるように固定位置で要素.使用中FontAwesome キャレットアイコン.The More エントリはコンテクストメニューのコンテナです.メニュー自体はビューポートの外側に置かれますposition: absolute and right: -10rem そして、我々が接近するとき、見えるようにされますMore .
私はtransition-delay to .topbar-menu マウスがホバー効果を誘発した要素を離れるとすぐには消えません.
日本学術振興会

<div className='topbar'>
  <div className='topbar-items'>
    {handleDarkmode}
    <span className="more" >
      More <i className="fas fa-caret-down"></i>
        <ul className="topbar-menu">
          <li>...</li>
          <li>...</li>
        </ul>
    </span>
  </div>
</div>

CSS

/* This is the topbar, pinned to the top.*/
.topbar {
  position: fixed;
  display: flex;
  flex-direction: row;
  height: 48px;
  width: 100%;
  background-color: #252525;
  line-height: 36px;
  z-index: 2;
  top: 0;
}

/* This is the class for the topbar items.*/
.topbar-items {
  display: flex;
  margin-left: auto;
  margin-right: 2rem;
  align-items: center;
  cursor: pointer;
  color: white;
}

/* This is the context menu, placed outside of the viewport 
 */
.topbar-menu {
  position: absolute;
  right: -10rem;
  margin-top: 0.8rem;
  background-color: #1c75da;
  display: flex;
  flex-direction: column;
  transition: 0.1s;
  transition-delay: 0.3s;
  text-align: center;
  width: auto;
  border-radius: 0.3rem;
  font-weight: 700;
}

コンテキストメニューの表示

私は自動的にメニューを表示するにはMore , だから私は:hover クラスと組み合わせてメニューエントリに.topbar-menu . ホバーでは、メニューはビューポートに移動しますtransform: translateX .

.more:hover .topbar-menu {
  transform: translateX(-11rem);
  transition: 0.1s;
}

メニューのスタイル

最初の4つの項目は、次のようにスタイルを整えた正規リストアイテムです.
日本学術振興会

        <ul className="topbar-menu">
          <li className="dropdown">
            <Link className='profile-link' to="/support">
              Contact
            </Link>
          <li>          
        </ul>

CSS

.dropdown {
  width: 140px;
  height: 2rem;
  line-height: 2rem;
  cursor: pointer;
  border-bottom: 1px solid white;
}

.profile-link {
  text-decoration: none;
  color: white;
  width: max-content;
  width: 100%;
  height: 100%;
  display: block;
  font-size: 0.9rem
}

.profile-link:hover {
  background-color: #4490E1;
  border-radius: 0.3rem;
}

メニューを不必要に長くするのを避けるために、私は社会的なアイコンを一行ですべて配置したかったです.リストの項目に2番目のクラスを追加してdisplay インラインのflexへのプロパティと追加flex: 0.34 幅の各1/3を与えるために.
日本学術振興会

<li className="dropdown social">
  <a className="profile-link social"
     rel="noopener nofollow noreferrer"
     href="https://dev.to/isarisariver">
       <i className="fab fa-dev" 
          title="DEV Profile">  
       </i>
  </a>
</li>

CSS

li.dropdown.social {
  display: flex;
  justify-content: space-evenly;
}

.profile-link.social {
  display: inline-flex;
  width: auto;
  font-size: 1.2rem;
  align-items: center;
  flex: 0.34;
  justify-content: center;
  border-radius: 0.3rem;
}

結論

そしてそれです.私はあなたの次のプロジェクトを支援することを期待!質問がある場合は、ちょうど私にメッセージをドロップします.😄