locked
ONLY CSS Link on the bottom of the page to show slide up div RRS feed

  • 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