Responsive und Slick Navigation mit
Flyout Container

 

Fragen an uns ?

Sie haben Fragen?

Schreiben Sie uns

Gehe mit der Maus über den roten Button am rechten Rand. Tippe am Smartphone auf diesen Button und zum Schließen auf den Hintergrund.

 

 

Diesen Flyout Container habe ich hier gefunden und etwas angepasst: codepen.io

Die CSS, hier in der HTML vom Layout “Zwischen Head Tags”:

<!-- CSS Flyout Container -->
<style>
    #flyout {
      width: 205px;
      min-height: 150px;
      background: #A50000;
      background: -moz-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 75%);
      background: -webkit-gradient(radial, 90% 50%, 0px, 90% 50%, 75%, color-stop(0%, #f20000), color-stop(75%, #A50000));
      background: -webkit-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 40%);
      background: -o-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 75%);
      background: -ms-radial-gradient(90% 50%, ellipse cover, #f20000 0%, #A50000 75%);
      background: radial-gradient(ellipse at 90% 50%, #f20000 0%, #a50000 75%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=lighten($color,15%), endColorstr=$color,GradientType=1);
      border: 1px solid #A50000;
      position: fixed;
      /* alternativ ein nicht fixierter Button */
      /* position: absolute; */
      top: 180px;
      right: -240px;
      -webkit-transition: all 600ms ease;
      -moz-transition: all 600ms ease;
      -ms-transition: all 600ms ease;
      -o-transition: all 600ms ease;
      transition: all 600ms ease;
      -webkit-border-radius: 4px 0 0 4px;
      border-radius: 4px 0 0 4px;
      padding: 15px;
      z-index: 10000;
    }
    #flyout h3 {
      margin: 0;
      color: #fff;
    }
    #flyout h4 {
      color: #fff;
      margin: 0 0 20px 0;
    }
    #flyout .form-control {
      color: #A50000;
    }
    #flyout textarea {
      min-height: 100px;
    }
    #flyout .btn-defult {
      background-color: #fff;
      border: none;
      color: #A50000;
    }
    #flyout .btn-defult:hover {
      opacity: 0.4;
    }

    #flyout #button {
      position: absolute;
      top: 113px;
      left: -93px;
      border-bottom: 1px solid #E0E0E0;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      -webkit-transition: all 600ms ease;
      -moz-transition: all 600ms ease;
      -ms-transition: all 600ms ease;
      -o-transition: all 600ms ease;
      transition: all 600ms ease;
    }
    #flyout #button .text {
      -webkit-border-radius: 4px 4px 0 0;
      border-radius: 4px 4px 0 0;
      padding: 10px 20px 15px 20px;
      opacity: 1;
      -webkit-transition: all 600ms ease;
      -moz-transition: all 600ms ease;
      -ms-transition: all 600ms ease;
      -o-transition: all 600ms ease;
      transition: all 600ms ease;
      border-bottom: none;
    }
    #flyout #button .btn-primary {
      color: #fff;
      background-color: #A50000;
      border-color: #A50000;
    }

    #flyout:hover {
      right: 0;
      -webkit-transition: all 600ms ease;
      -moz-transition: all 600ms ease;
      -ms-transition: all 600ms ease;
      -o-transition: all 600ms ease;
      transition: all 600ms ease;
    }
</style>

 

 

Der DIV-Container, im HTML-Code Editor eines Textfeldes:

            <div id="flyout">
              <div id="button">
                <div class="text btn btn-primary">Fragen an uns ?</div>
              </div>
              <h3>Sie haben Fragen?</h3>
              <h4>Schreiben Sie uns</h4>
              <form>
                <div>
                  <input type="name" placeholder="Name">
                </div>
                <div>
                  <input type="email" placeholder="Email">
                </div>
                <div>
                  <textarea name="message" class="form-control" placeholder="Nachricht"></textarea>
                </div>
                <button type="submit" class="btn btn-defult">Senden</button>
              </form>
            </div>

 

 

nach oben

Viel Erfolg!

Willkommen bei NOF-Tutorials.com