Javascript css将下拉菜单变成下拉式页脚

我发现了一个下拉菜单模型，我想反转它，使它成为一个“下拉”菜单，从下到上打开

我所拥有的是：

HTML

JS

---

这对我来说是非常复杂的，我不知道该在CSS中修改什么来反转它。任何关于如何实现这一目标的建议都将不胜感激

更改div“get start”的位置从相对到绝对，底部为0。 如果在div“get started”中给出“top:0px”，则下拉菜单将从上到下打开

代码如下：

body{background:#000；}
.开始吧{
宽度：100%；
身高：100%；
背景：rgb（255,0101）；
颜色：#fff；
位置：绝对位置；
底部：0；
垫底：0px；
显示：无；
}
#开始使用btn{
字体：100 14px/20px“开放式Sans”、Verdana、Sans serif；
字母间距：0.08em；
文本转换：大写；
颜色：#fff；
背景：rgb（255,0101）；
位置：绝对位置；
右：0；
底部：19px；
填充：11px 20px 11px 25px；
边框左上半径：50px；
边框左下半径：50px；
边框：#FFF 2px实心；
}
#开始btn：悬停，
#快速入门btn：活动{
文字装饰：无；
-网络工具包盒阴影：-3px0px 25px 4px rgba（255,0,101,0.4）；
-moz盒阴影：-3px0px25px4pxRGBA（255,0101,0.4）；
盒影：-3px0px25px4pxRGBA（255,0101,0.4）；
过渡：盒影0.5s缓进缓出；
-moz过渡：盒影0.5s缓进缓出；
-webkit过渡：盒影0.5s易入易出；
-o型过渡：盒形阴影0.5s缓进缓出；
-ms过渡：盒影0.5s缓进缓出；
}
#开始btn:focus{
文字装饰：无；
}
#马上开始{
位置：绝对位置；
右：15px；
顶部：15px；
不透明度：0.5；
}
#开始接近：悬停，
#开始关闭：活动，
#开始接近：专注{
不透明度：1；
}
.开始使用容器{
颜色：#fff；
填充顶部：30px；
文本对齐：居中；
}
.开始前进{
字体大小：22px；
边缘底部：10px；
颜色：#fff；
}
.线路{
高度：2倍；
宽度：120px；
背景：rgb（255127177）；
保证金：自动15px自动；
}
.white link sm{
字体大小：14px；
颜色：#fff；
}
.白色链接sm:悬停，
.白色链接sm：激活，
.white link sm：焦点{
颜色：#fff；
字号：600；
}
.藏起来{
显示：块；
}
保险商实验室{
列表样式类型：无；
左侧填充：0；
}
李{
边缘底部：5px；
}
a:悬停，
a:主动，
a:焦点{
文字装饰：无；
}
@介质（最大宽度：991px）{
.首先开始{
边缘顶部：15px；
}
.开始前进{
边缘顶部：30px；
}
}

按钮1








按钮2








按钮3








按钮4








$（文档）.ready（函数（）{
$（“#启动btn，#启动关闭”）。单击（函数（）{
$（'.get start'）.slideToggle（）；
});
});

以下代码将与下拉菜单同时向上移动导航按钮

必须像这样更改js代码：

$(document).ready(function() {

    $('#get-started-btn, #get-started-close').click(function () {
          $('.get-started').toggle();
          var ht= $('.get-started').height();
          if($('.get-started').is(":visible")){         
            $("#get-started-btn").animate({bottom:ht+19+'px'});
          }
          else{
              $("#get-started-btn").animate({bottom:19+'px'});
          }
    });



});

body{background:#000；}
.开始吧{
宽度：100%；
高度：自动；
背景：rgb（255,0101）；
颜色：#fff；
位置：绝对位置；
底部：0；
垫底：0px；
显示：无；
}
#开始使用btn{
字体：100 14px/20px“开放式Sans”、Verdana、Sans serif；
字母间距：0.08em；
文本转换：大写；
颜色：#fff；
背景：rgb（255,0101）；
位置：绝对位置；
右：0；
底部：19px；
填充：11px 20px 11px 25px；
边框左上半径：50px；
边框左下半径：50px；
边框：#FFF 2px实心；
}
#开始btn：悬停，
#快速入门btn：活动{
文字装饰：无；
-网络工具包盒阴影：-3px0px 25px 4px rgba（255,0,101,0.4）；
-moz盒阴影：-3px0px25px4pxRGBA（255,0101,0.4）；
盒影：-3px0px25px4pxRGBA（255,0101,0.4）；
过渡：盒影0.5s缓进缓出；
-moz过渡：盒影0.5s缓进缓出；
-webkit过渡：盒影0.5s易入易出；
-o型过渡：盒形阴影0.5s缓进缓出；
-ms过渡：盒影0.5s缓进缓出；
}
#开始btn:focus{
文字装饰：无；
}
#马上开始{
位置：绝对位置；
右：15px；
顶部：15px；
不透明度：0.5；
}
#开始接近：悬停，
#开始关闭：活动，
#开始接近：专注{
不透明度：1；
}
.开始使用容器{
颜色：#fff；
填充顶部：30px；
文本对齐：居中；
}
.开始前进{
字体大小：22px；
边缘底部：10px；
颜色：#fff；
}
.线路{
高度：2倍；
宽度：120px；
背景：rgb（255127177）；
保证金：自动15px自动；
}
.white link sm{
字体大小：14px；
颜色：#fff；
}
.白色链接sm:悬停，
.白色链接sm：激活，
.white link sm：焦点{
颜色：#fff；
字号：600；
}
.藏起来{
显示：块；
}
保险商实验室{
列表样式类型：无；
左侧填充：0；
}
李{
边缘底部：5px；
}
a:悬停，
a:主动，
a:焦点{
文字装饰：无；
}
@介质（最大宽度：991px）{
.首先开始{
边缘顶部：15px；
}
.开始前进{
边缘顶部：30px；
}
}

按钮
.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;
  }
}

$(document).ready(function() {

    $('#get-started-btn, #get-started-close').click(function () {
          $('.get-started').slideToggle();
    });

});

$(document).ready(function() {

    $('#get-started-btn, #get-started-close').click(function () {
          $('.get-started').toggle();
          var ht= $('.get-started').height();
          if($('.get-started').is(":visible")){         
            $("#get-started-btn").animate({bottom:ht+19+'px'});
          }
          else{
              $("#get-started-btn").animate({bottom:19+'px'});
          }
    });



});