私は、ユーザが利用可能なリンクの数に基づいて動的にサイズを変更する必要がある垂直方向のナビゲーション「スライダ」を持っています。私はすべてを検索しましたが、私が見つけたすべてのソリューションはあまり働いていません。それは単に私のCSSが動作する方法かもしれません。高さ属性を変更しようとするたびに、すべてのことがうんざりになります。私はこれをCSSで完全にやろうとしています。私はそれがシンプルであるように思えることを知っている、私は自分自身を理解することはできません。内部の別のdivのサイズに基づいてdivのサイズを変更するにはどうすればよいですか?
それは基本的にあります:
<div class="slideMenu">
<ul class="nav">menu items...</ul>
</div>
ここでCSSです:
.slideMenu {
background: #449bb5;
width: 140px;
height: 100%;
padding-right: 40px;
position: absolute;
z-index: 3;
-webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
left: -180px;
color: #FFFFFF;
opacity: 100;
transition: .4s ease-in-out;
}
.slideMenu:not(:hover) {
transition-delay: .4s;
}
.slideMenu:hover {
transform: translate3d(160px, 0, 0);
}
.slideMenu .nav {
position: absolute;
top: 30%;
height: auto;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(-50%);
font-weight: 400;
}
正確に何をやろうとしていますか? – BARNOWL
「高さ」は変更しようとしていますが、実際の問題は何ですか? (あなたのJSFiddleは私にはうまく見えますが、何が間違っているのか分かりません) –
あなたが何を意味しているのか分かりませんが、おそらく '.slideMenu .nav'であなたのスタイルのほとんどを削除しますそれ?私は完全に離れているかもしれませんが、これはあなたが探しているものですか? https://jsfiddle.net/g70xwo92/ –