2016-09-07 15 views
1

現在、ナビゲーションバーのポップアップメニューをボタンの上に配置するのが難しいです。たとえば、ブラウザウィンドウのサイズを変更すると、ボタンとメニューの間の距離が増減します。メニューがさらに上に移動しているかのように。ナビゲーションバーのメニュー位置とホバー

もう1つの問題は、メニューの上にある<div class="menu">の上にカーソルを置くと問題になりますが、この機能をボタン内に保持するようにしています。

ここで私が取り組んでいることは次のとおりです。私はあなたが助けてくれることを願っています。

#btn-holder { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: static; 
 
    z-index: 10; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#btn-holder > .button { 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    padding: 8px 13px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    right: -1%; 
 
    bottom: -1%; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
    border-radius: 3px; 
 
} 
 

 
#btn-holder > .button:hover { 
 
    background-color: #732878; 
 
    color: white; 
 
} 
 

 
#btn-holder > .menu { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    right: -1%; 
 
    bottom: -16%; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 

 
    
 
} 
 

 
.menu a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 8px 13px; 
 
    text-decoration: none; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
    opacity: 8; 
 
    position:sticky; 
 
} 
 

 
.menu a:hover { 
 
    background-color: #732878; 
 
} 
 

 
.menu > ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
} 
 

 
.menu p { 
 
    opacity: 1; 
 
    margin: 0; 
 
} 
 

 
.menu p:after { 
 
    content:""; 
 
    display: block; 
 
    height: 1px; 
 
    vertical-align: bottom; 
 
    border-top: 1px solid #eee; 
 
    opacity: .4; 
 
} 
 

 
#btn-holder > .button:hover + .menu { 
 
    opacity: 1; 
 
    transistion-delay: 1s; 
 
} 
 

 
#btn-holder .menu:hover { 
 
    opacity: 1; 
 
    
 
}
<div id="btn-holder"> 
 
    <div class="button"> 
 
    <img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
    <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> 
 
     
 
     <li><a href="/games"onclick="window.open(this.href, 'mywin', 
 
      'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> 
 
     
 
     </ul> 
 
    </div> 
 
</div>

+0

それが原因でこの線のだ:下:-16%;パーセンテージを-60pxのような固定値に変更します。 – Mojtaba

答えて

0

問題は、あなたのメニューが絶対的に配置されており、パーセント値を持っています。ウィンドウのサイズが変わると、パーセント値が変化します。この場合にposition absoluteを使用する場合は、bottomの絶対値を設定します。

#btn-holder { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: static; 
 
    z-index: 10; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#btn-holder > .button { 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    padding: 8px 13px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    right: 0; 
 
    bottom: 0; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
    border-radius: 3px; 
 
} 
 

 
#btn-holder > .button:hover { 
 
    background-color: #732878; 
 
    color: white; 
 
} 
 

 
#btn-holder > .menu { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: -61px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 

 
    
 
} 
 

 
.menu a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 8px 13px; 
 
    text-decoration: none; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
    opacity: 8; 
 
    position:sticky; 
 
} 
 

 
.menu a:hover { 
 
    background-color: #732878; 
 
} 
 

 
.menu > ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
} 
 

 
.menu p { 
 
    opacity: 1; 
 
    margin: 0; 
 
} 
 

 
.menu p:after { 
 
    content:""; 
 
    display: block; 
 
    height: 1px; 
 
    vertical-align: bottom; 
 
    border-top: 1px solid #eee; 
 
    opacity: .4; 
 
} 
 

 
#btn-holder > .button:hover + .menu { 
 
    opacity: 1; 
 
    transistion-delay: 1s; 
 
} 
 

 
#btn-holder .menu:hover { 
 
    opacity: 1; 
 
    
 
}
<div id="btn-holder"> 
 
    <div class="button"> 
 
    <img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
    <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> 
 
     
 
     <li><a href="/games"onclick="window.open(this.href, 'mywin', 
 
      'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> 
 
     
 
     </ul> 
 
    </div> 
 
</div>

関連する問題