cssドロップダウンメニューをドロップダウンフッターにする

私はドロップダウンメニューモデルを見つけたので、ドロップダウンメニューを下から上に開きます。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; 
    } 
}

$(document).ready(function() { 

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

});

これは私には非常に複雑であり、私は知りませんCSSを修正するにはどうすればいいですか？ tを逆にする。それを達成するためのヒントは非常に高く評価されます。

出典

2017-03-05 mattvent

変更 '：19px;' '下へ：19px;' – LGSon

こんにちは、答えてくれてありがとうボタンを移動するだけで、ページの下部にあるメニューが開きます。メニューはまだ上から下に向かっています。 – mattvent

"get-started" divの位置を絶対相対、下限を0で変更します。 divで "top-0px"を指定すると、ドロップダウンメニューが上から開きます底に。

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>

出典

2017-03-05 13:37:02 Piyali

ありがとう、これは動作します！ただし、ドロップダウンメニューはページの一番上まで表示されます。私はそれをページの一番下のdivに「含む」ようにしたいと思います。それはどのように機能しますか？ – mattvent

divの "get-started"の高さを "height：auto"に変更 – Piyali

ありがとう。もう一つは、「get-started」をabsoluteからrelativeに変更し、bottomを0で変更すると、nav buttomはドロップダウンメニューでもう「プッシュ」されません。ドロップダウンメニューと同時に、それがどこにあるのか、それを上に移動したいのです。 – mattvent

次のコードは、ドロップアップメニューと同時にナビゲーションボタンを上に移動します。ここでは

はコードです。

は、このような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(); 
 
\t \t var ht= $('.get-started').height(); 
 
\t \t if($('.get-started').is(":visible")){ \t \t \t 
 
\t \t \t $("#get-started-btn").animate({bottom:ht+19+'px'}); 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t $("#get-started-btn").animate({bottom:19+'px'}); 
 
\t \t } 
 
    }); 
 
\t 
 
\t 
 
\t 
 
}); 
 

 

 
</script>

出典

2017-03-05 16:20:37 Piyali

こんにちはP.ダス、ありがとう、私たちはそこに着いている。現在は、ドロップダウンメニューは表示されずに表示されます。 – mattvent

私はそれを解決しました。ありがとう。 – mattvent

cssドロップダウンメニューをドロップダウンフッターにする

答えて

関連する問題