ナビゲーションメニューの実装についての質問です

前提・実現したいこと

画面右下から頭出ししているメニューをクリックすると、
全体が表示されるメニューを作成中です。
頭出ししているメニューをクリック時に.openをつけ外しすることでそれを実現しているのですが、
現在の実装ではリンクが増えるたびにheightが高くなり手修正が必要になってしまう。
具体的にはbottmの値を弄る必要がでています。
これをリンクの数がいくら増加しても修正が必要のない状態にしたのですが、何かスマートな解決策はないでしょうか。

該当のソースコード

html

css

body {
height: 100vh;
background-color: black;
}
nav {
width: 200px;
min-height: 200px;
background-color: bisque;
position: fixed;
bottom: -150px;
right: 0;
transition: all 1s;
}
.open {
bottom: 0;
}

jsについては割愛

行動規範の内容に同意します

回答2件

下記でどうでしょう。

css
1nav {
2  width: 200px;
3  min-height: 200px;
4  background-color: bisque;
5  position: fixed;
6  bottom: 0;
7  transform: translatey(calc(100% - 50px));
8  right: 0;
9  transition: all 1s;
10}
11.open {
12  transform: translatey(0); 
13}

投稿2021/10/15 14:08

hatena19

総合スコア33795

u-nagi

2021/10/15 17:09

回答ありがとうございます！

行動規範の内容に同意します

ベストアンサー

transform を使うのはだめでしょうか。

css
1nav {
2width: 200px;
3min-height: 200px;
4background-color: bisque;
5position: fixed;
6bottom: 0px;
7right: 0;
8transition: all 1s;
9transform: translateY( calc(100% - 24px) ); /* 値は要調整 */
10}
11.open {
12transform: translateY(0)
13}