0
我找到了一個我想要反轉的下拉菜單模型，使其成爲「下拉」菜單，從下至上打開。css將下拉菜單轉換爲下拉頁腳
什麼我是這樣的：
HTML
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
<a href="#" class="no-padding-right get-stated-show" id="get-started-btn">CLICK HERE</a>
</nav>
CSS
.get-started {
width: 100%;
height: 100%;
background: rgb(255, 0, 101);
color: #fff;
position: relative;
padding-bottom: 40px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
top: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
@media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
JS
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function() {
$('.get-started').slideToggle();
});
});
這對我來說很複雜，我不知道在CSS中修改什麼來讓我有t逆轉。任何提示如何實現它將不勝感激。
變化'頂：19px;'到'底部：19px;' – LGSon
你好，謝謝你的答案但它只是移動按鈕來打開頁面底部的菜單。菜單仍然從上到下打開。 – mattvent