2016-09-06 5 views
1

이 버튼을 내 사이트 콘텐츠 위에 떠있는 버튼 홀더에 머물게하는 데 문제가 있습니다. 드롭 다운 메뉴를 어떻게 추가하면 동일한 단추 홀더에 보관할 수 있습니까?드롭 다운 버튼 홀더 문제

.btn-holder { 
 
background: rgba(255, 255, 255, 0.5); 
 
position: static; 
 
z-index: 10; 
 
bottom: 0; 
 
right: 0; 
 
left: 0; 
 
top: 0; 
 
} 
 
.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; } 
 

 
.button:hover { 
 
    background-color: #732878; /* Green */ 
 
    color: white; 
 
}
<div class="btn-holder"> 
 
    <div class="button"><a href="/"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a></div> 
 
</div> 
 

 

 

 

 
<!-- begin snippet: js hide: false console: true babel: false -->

+0

그것은 내 옆에서 잘 작동하는 것으로 나타 납니까? –

+0

이 코드는 내가 작업하고있는 .CSS 코드이지만 버튼을 가리키면 드롭 다운 기능이 없습니다. 이것이 제가 묻는 것입니다. 어떻게하면 btn-holder 내에서 이것을 구현할 수 있습니까? 귀하의 도움을 많이 바랍니다. – troxie

+0

좋아, 내가 당신을 위해 예제를 만들고 대답을 게시 할 것이다. –

답변

0

다음은 올바른 방향으로 시작하는 데 도움이 빠른 예입니다! 몇 가지 개선 사항이있을 수 있습니다 (예 : display:none을 지연하여 실제로 메뉴에서 링크를 클릭 할 수 있음). 그러나이를 파악할 수 있어야합니다. 단지 의견에 대해 알려주지 않으면 개선 할 것입니다. 여기

#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; 
 
    width: 100px; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #333; 
 
    border: none; 
 
    color: white; 
 
    padding: 8px; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    right: 0%; 
 
    bottom: 25px; 
 
    box-shadow:0 2px 7px rgba(0,0,0,.4); 
 
} 
 

 
.menu a { 
 
    text-decoration: none; 
 
    color: #eee; 
 
    transition: color .3s; 
 
} 
 

 
.menu a:hover { 
 
    color: #2196f3; 
 
} 
 

 
.menu > ul { 
 
    list-style: none; 
 
    margin: 2px; 
 
    padding: 0 0 0 15px; 
 
} 
 

 
.menu > ul > li:first-child { 
 
    margin-left: -15px; 
 
} 
 

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

 
.menu p:after { 
 
    content:""; 
 
    display: block; 
 
    height: 1px; 
 
    vertical-align: bottom; 
 
    width: 100%; 
 
    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"> 
 
    <a href="/"><img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a> 
 
    </div> 
 
    <div class="menu"> 
 
    <p><a href="#">Home</a></p> 
 
    <ul> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Post 1</a></li> 
 
     <li><a href="#">Post 2</a></li> 
 
    </ul> 
 
    <p><a href="#">Products</a></p> 
 
    <p><a href="#">About</a></p> 
 
    </div> 
 
</div>
당신이 당신의 자신의 변화를 시도하는 데 사용할 수있는 그것의 codepen이다 : 나는 div class="button" 직후에 발생하는 div class="menu"를 선택하기 위해 CSS + 선택기를 사용

http://codepen.io/XanderLuciano/pen/YGPoqE.button:hover이 활성 일 때 displaynone에서 block으로 변경했습니다. 코드는 다음과 같습니다.

#btn-holder > .button:hover + .menu { 
    display: block; 
} 

질문이 있으시면 알려주세요. :)

+0

실제로 팝업 메뉴에 실제로 액세스 할 수 없습니다. – Scott

+0

여기에서 전환과 지연을 혼란에 빠뜨리며 '표시 : 블록'을 가리 키도록 설정해야합니다. –

+0

@XanderLuciano \t 이 전환 지연을 올바르게 추가합니까? 나는 이것이 일부 브라우저에서만 작동 할 것이라고 가정하고있다. 탐색 바에서 항목을 선택하려고 할 때 링크를 클릭 할 수 없습니다. '# btn-holder>. 버튼 : 호버 + .menu {디스플레이 : 블록; 전환 지연 : 5 초; }' – troxie

0

#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; 
 
    width: 100px; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #333; 
 
    border: none; 
 
    color: white; 
 
    padding: 8px; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    right: 0%; 
 
    bottom: 25px; 
 
    box-shadow:0 2px 7px rgba(0,0,0,.4); 
 
} 
 

 
.menu a { 
 
    text-decoration: none; 
 
    color: #eee; 
 
    transition: color .3s; 
 
} 
 

 
.menu a:hover { 
 
    color: #2196f3; 
 
} 
 

 
.menu > ul { 
 
    list-style: none; 
 
    margin: 2px; 
 
    padding: 0 0 0 15px; 
 
} 
 

 
.menu > ul > li:first-child { 
 
    margin-left: -15px; 
 
} 
 

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

 
.menu p:after { 
 
    content:""; 
 
    display: block; 
 
    height: 1px; 
 
    vertical-align: bottom; 
 
    width: 100%; 
 
    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"> 
 
    <a href="/"><img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a> 
 
    </div> 
 
    <div class="menu"> 
 
    <p><a href="#">Home</a></p> 
 
    <ul> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Post 1</a></li> 
 
     <li><a href="#">Post 2</a></li> 
 
    </ul> 
 
    <p><a href="#">Products</a></p> 
 
    <p><a href="#">About</a></p> 
 
    </div> 
 
</div>