2017-12-06 13 views
-1

私は、ユーザが利用可能なリンクの数に基づいて動的にサイズを変更する必要がある垂直方向のナビゲーション「スライダ」を持っています。私はすべてを検索しましたが、私が見つけたすべてのソリューションはあまり働いていません。それは単に私の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; 
} 

JSFiddle here

+0

正確に何をやろうとしていますか? – BARNOWL

+0

「高さ」は変更しようとしていますが、実際の問題は何ですか? (あなたのJSFiddleは私にはうまく見えますが、何が間違っているのか分かりません) –

+0

あなたが何を意味しているのか分かりませんが、おそらく '.slideMenu .nav'であなたのスタイルのほとんどを削除しますそれ?私は完全に離れているかもしれませんが、これはあなたが探しているものですか? https://jsfiddle.net/g70xwo92/ –

答えて

0

あなたは高さを指定する必要はありません。 100%でこの例では、高さはその親コン​​テナの100%であると言います...ボディ。あなたが望むものではありません。はなれる。ここで改善できる他の問題がありますが、これは以下のコードのコメントに記されています。

body { 
 
    margin: 0; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif" !important; 
 
    font-size: 12px; 
 
} 
 

 
.slideMenu { 
 
    background: #449bb5; 
 
    width: 140px; 
 
    /* height: 100%; remove this */ 
 
    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; 
 
    top: 0; 
 
    color: #FFFFFF; 
 
    opacity: 100; 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.slideMenu:not(:hover) { 
 
    transition-delay: .4s; 
 
} 
 

 
.slideMenu:hover/*, .slideMenu:focus*/ { 
 
    transform: translate3d(160px, 0, 0); 
 
} 
 

 

 
.slideMenu .nav { 
 
    /*position: absolute; changed to relative */ 
 
    position: relative; 
 
    top: 30%; 
 
    /* height: auto; remove. unnecessary */ 
 
    /* 
 
    -webkit-transform: translateY(50%); 
 
    -ms-transform: translateY(50%); 
 
    transform: translateY(-50%); 
 
    remove this. it's trying to center your menu */ 
 
    font-weight: 400; 
 
} 
 

 
.slideMenu .nav li { 
 
    padding-bottom: 10px; 
 
    padding-top: 10px; 
 
    list-style-type: none; 
 
} 
 

 
.slideMenu .nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.slideMenu .nav li a:hover { 
 
    color: #aaa; 
 
} 
 

 
.slideMenuTab { 
 
\t background: #449bb5; 
 
\t position: relative; 
 
\t width: 40px; 
 
\t z-index: 3; 
 
\t -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2); 
 
\t box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2); 
 
\t left: 165px; 
 
\t color: #FFFFFF; 
 
\t text-align: right; 
 
\t padding-right: 8px; 
 
\t padding-top: 6px; 
 
\t padding-bottom: 3px; 
 
\t border-radius: 8px; 
 
\t cursor: pointer; 
 
}
<div class="slideMenu"> 
 
    <div class="slideMenuTab"><img src="images/hamburger.png"/></div> 
 
    <ul class="nav"> 
 
     <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li> 
 
     <hr> 
 
     <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a>  </li> 
 
     <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li> 
 
     <hr> 
 
     <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a>  </li> 
 
     <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li> 
 
     <hr> 
 
     <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li> 
 
     <hr> 
 
     <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a></li> 
 

 
    </ul> 
 
</div>

+0

ありがとう、Mr. Wade!それはそれをした!ちょっと微妙な微調整をしましたが、それは美しく動作します! – iamthefortytwo