css将下拉菜单转换为下拉页脚

时间：2017-03-05 11:33:51

标签： javascript jquery html css footer

我找到了一个我要反转的下拉菜单模型，使其成为一个“dropup”菜单，从下到上打开。

我拥有的是：

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中要修改什么以使其反转。任何有关如何实现它的提示都将受到高度赞赏。

2 个答案:

答案 0 :(得分：1)

更改div的位置＆＃34; get-started＆＃34;是从相对于绝对和底部与0。 如果你给＆＃34; top：0px＆＃34;在div＆＃34; get-started＆＃34;中，下拉菜单将从上到下打开。

以下是代码：

＆＃13;
＆＃13; 
body{background:#000;}
.get-started {
  width: 100%;
  height: 100%;
  background: rgb(255, 0, 101);
  color: #fff;
  position:absolute;
  bottom:0;
  padding-bottom: 0px;
  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;
  bottom: 19px;
  padding: 11px 20px 11px 25px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border:#FFF 2px solid;
}

#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;
  }
}
＆＃13; 
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function() {

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

});
</script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

必须像这样更改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;}
.get-started {
  width: 100%;
  height: auto;
  background: rgb(255, 0, 101);
  color: #fff;
  position:absolute;
  bottom:0;
  padding-bottom: 0px;
  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;
  bottom: 19px;
  padding: 11px 20px 11px 25px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border:#FFF 2px solid;
}

#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;
  }
}
<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(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'});
		  }
    });
	
	
	
});


</script>

相关问题
最新问题