スマホで最下部にあるメニューバーをタップすると下から上へメニュー画面が出てくる実装をしたい

Question

【実現したいこと】
添付画面イメージ真ん中の「メニュー」を押すと下から上へメニュー画面が出てくる実装をしたいです。こちらのバーはスマホ画面最下部に固定する想定です。

【試したこと】
こちらの記事を参考にCSSのみで実装できないか試してみましたが、うまくアレンジができず、一旦記事内のHTMLとCSSは削除しました。
https://saruwakakun.com/html-css/reference/nav-drawer

　　<div class="bottom-menu">
      <div>
        <a href="#"><i class="fas fa-phone-square-alt fa-2x"></i>電話する</a>
      </div>
      <div id="nav-drawer">
          <a href="#"><i class="fas fa-bars fa-2x"></i>メニュー</a>
        <div id="nav-content">
          <ul>
            <li><a href="#">タイトル１</a></li>
            <li><a href="#">タイトル２</a></li>
            <li><a href="#">タイトル３</a></li>
            <li><a href="#">タイトル４</a></li>
            <li><a href="#">タイトル５</a></li>
          </ul>
        </div>
      </div>
      <div>
        <a href="#" class="bottom-side"><i class="fas fa-envelope-square fa-2x"></i>メールする</a>
      </div>
    </div>

  .bottom-menu {
    display: flex;
    height: 80px;
    background-color: #5f5035;
  }

  .bottom-menu div {
    width: 33.3%;
    text-align: center;
    line-height: 80px;
  }

  .bottom-menu a {
    color: white;
    padding: 20px;
  }

  .bottom-menu .fas {
    padding-right: 5px;
    position: relative;
    top: 5px;
  }

初心者の質問で大変恐縮ですが、ご教示いただけますと幸いです。
宜しくお願い致します。

Answer 1

詳しい要件がわりませんが、とりあえずこのような感じでしょうか？
CSSのみで実装するメニューなどは、このような方法が一般的です。
デモページ

Comments

[yujill]

ご丁寧にありがとうございます！イメージにかなり近いです。
重ね重ね恐縮ですが、メニューをクリックした時も固定バーの表示を残して、固定バーの上に乗っかるように下から上へメニュー画面が出てくるようにするためにはどのように追記したらよろしいでしょうか？

度々すみませんがご教示いただけますと幸いです。

[masa_mf3]

メニュー画面が開いた時に、ボタンの下にくるような感じでしょうか？

[yujill]

お返事遅くなり申し訳ございません。
メニュー画面が開いた時に、ボタンの上にメニューくるような感じです。