Search code examples
javascriptjqueryhtmlcssfooter

css Turn a drop-down menu into a drop-up footer

I found a dropdown menu model that I want to reverse, to make it a "dropup" menu, opening from bottom to top.

What I have is this :

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();
    });

});

This is to me very complex and I don't know what to modify in the CSS to have it reversed. Any tips on how to achieve it would be highly appreciated.

Solution

  • Change the position of div "get-started" is from relative to absolute and bottom with 0. If you give "top:0px" in div "get-started", the drop-down menu will open from top to bottom.

    Here is the code:

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