Answered by:
ONLY CSS Link on the bottom of the page to show slide up div

Question
-
User1991482975 posted
Hi, i would love to create only CSS Link fixed and centered on the botton of my webpage and if i click on it , this link will slide up with a div containg a form.
When the div slide up the link must also slide with the div..
How to achive this?
Monday, October 23, 2017 1:06 PM
Answers
-
User1400794712 posted
Hi grafic.web,
It's OK to just use CSS, but it needs accurate layout. I made a demo, you can take it as a reference.
@{ Layout = null; } <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Sans-serif; word-spacing: -2px; } h1 { font-size: 40px; font-weight: bold; color: #191919; -webkit-font-smoothing: antialiased; } .message { background: #181818; color: #FFF; ; top: 0; left: 0; width: 100%; height: 250px; padding: 20px; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); overflow: hidden; box-sizing: border-box; } .message h1 { color: #FFF; } #toggle { ; appearance: none; cursor: pointer; left: -100%; top: -100%; } #toggle + label { ; cursor: pointer; padding: 10px; background: #26ae90; width: 100px; border-radius: 3px; padding: 8px 10px; color: #FFF; line-height: 20px; font-size: 12px; text-align: center; -webkit-font-smoothing: antialiased; cursor: pointer; margin: 20px 50px; transition: all 500ms ease; } #toggle + label:after { content: "Close" } #toggle:checked ~ .container { transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); padding: 5em 3em; margin-top: 0px; } #toggle:checked ~ .message { top: -250px; } .container { margin-top: 250px; } #toggle:checked + label { background: #dd6149; } #toggle:checked + label:after { content: "Open"; top:0; } </style> <input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"></label> <div class="container"> </div> <div class="message"> @using (Html.BeginForm()) { <h1>You can hide this place.</h1> } </div>
How it works:
Best Regards,
Daisy
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, October 24, 2017 10:32 AM -
User1400794712 posted
Hi grafic.web,
You are right, but there also needs to modify some other style. I post the change here, please refer to it.
#toggle:checked + label { background: #dd6149; /*Here*/ bottom: 0px; } #toggle + label { /*Here*/ bottom:250px; } #toggle:checked ~ .message { /*here*/ bottom: -250px; /*Remove the top property.*/ } .message { /*Here*/ bottom: 0; /*Remove the top property.*/ }
Then it works like:
Best Regards,
Daisy
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, October 25, 2017 2:14 AM
All replies
-
User1400794712 posted
Hi grafic.web,
Do you mean that when you click the link, the link and div above will slide up? I think you can use slideToggle event of JQuery to implement it. I make a demo, please take it as a reference.
<div id="divForm"> @using (Html.BeginForm()) { <p>I'm a div containing a form</p> } </div> <a href="#">Show Div</a> @section scripts{ <script> $("a").click(function () { $("#divForm").slideToggle("slow"); }) </script> }
How it works:
Best Regards,
Daisy
Tuesday, October 24, 2017 6:58 AM -
User1991482975 posted
Hi X.Daisy ,
thanks for your answer!!!
it is possible to achive this with only CSS?
Tuesday, October 24, 2017 9:00 AM -
User1400794712 posted
Hi grafic.web,
It's OK to just use CSS, but it needs accurate layout. I made a demo, you can take it as a reference.
@{ Layout = null; } <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Sans-serif; word-spacing: -2px; } h1 { font-size: 40px; font-weight: bold; color: #191919; -webkit-font-smoothing: antialiased; } .message { background: #181818; color: #FFF; ; top: 0; left: 0; width: 100%; height: 250px; padding: 20px; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); overflow: hidden; box-sizing: border-box; } .message h1 { color: #FFF; } #toggle { ; appearance: none; cursor: pointer; left: -100%; top: -100%; } #toggle + label { ; cursor: pointer; padding: 10px; background: #26ae90; width: 100px; border-radius: 3px; padding: 8px 10px; color: #FFF; line-height: 20px; font-size: 12px; text-align: center; -webkit-font-smoothing: antialiased; cursor: pointer; margin: 20px 50px; transition: all 500ms ease; } #toggle + label:after { content: "Close" } #toggle:checked ~ .container { transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); padding: 5em 3em; margin-top: 0px; } #toggle:checked ~ .message { top: -250px; } .container { margin-top: 250px; } #toggle:checked + label { background: #dd6149; } #toggle:checked + label:after { content: "Open"; top:0; } </style> <input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"></label> <div class="container"> </div> <div class="message"> @using (Html.BeginForm()) { <h1>You can hide this place.</h1> } </div>
How it works:
Best Regards,
Daisy
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, October 24, 2017 10:32 AM -
User1991482975 posted
Hi X.Daisy,
thanks a lot!!!
I imagine that if i would love to show the div from the bottom of the page i need to put in
.message
bottom : 0px;
right?
Thanks again
Tuesday, October 24, 2017 12:29 PM -
User1400794712 posted
Hi grafic.web,
You are right, but there also needs to modify some other style. I post the change here, please refer to it.
#toggle:checked + label { background: #dd6149; /*Here*/ bottom: 0px; } #toggle + label { /*Here*/ bottom:250px; } #toggle:checked ~ .message { /*here*/ bottom: -250px; /*Remove the top property.*/ } .message { /*Here*/ bottom: 0; /*Remove the top property.*/ }
Then it works like:
Best Regards,
Daisy
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, October 25, 2017 2:14 AM