다음은 올바른 방향으로 시작하는 데 도움이 빠른 예입니다! 몇 가지 개선 사항이있을 수 있습니다 (예 : 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
이 활성 일 때 display
을 none
에서 block
으로 변경했습니다. 코드는 다음과 같습니다.
#btn-holder > .button:hover + .menu {
display: block;
}
질문이 있으시면 알려주세요. :)
그것은 내 옆에서 잘 작동하는 것으로 나타 납니까? –
이 코드는 내가 작업하고있는 .CSS 코드이지만 버튼을 가리키면 드롭 다운 기능이 없습니다. 이것이 제가 묻는 것입니다. 어떻게하면 btn-holder 내에서 이것을 구현할 수 있습니까? 귀하의 도움을 많이 바랍니다. – troxie
좋아, 내가 당신을 위해 예제를 만들고 대답을 게시 할 것이다. –