diedVIPs

html knowhow

Slider-Menüe mit Bildern










Slider-Menüe mit Bildern

Mit diesem Modul fügen Sie einen Dropdown-Menü ein, das sie scrollen können.
So sieht´s aus
 
 
Quellcode
<html>
<head>

<style>
.main {width: 100%;height: 10vh;background-image: url(bg.jpg);background-size: cover;transition: all .2s ease;}
.button {width: 165px;height: 40px;position: relative;display: block;margin: 60px auto 60px auto;text-align: center;line-height: 33px;border: 2px solid #0000FF;padding: 9px 11px 1px 11px;
font-size: 25px;text-transform: uppercase;color: red;font-weight: bold;cursor: pointer;border-radius: 7px;}
.button:hover {background: #0000FF;box-shadow: 0 0 10px #fff;color: #fff;}
.button:active {color: #0000FF;background-color: #F7D832;}
.overlay {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;display: none;background-color: rgba(0, 0, 0, .8);}
.popup {position: absolute;width: 400px;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 40px;border-radius: 5px;box-sizing: border-box;background: blue;color: pink;}
.popup__h2 {text-align: center;}
.close-popup {position: absolute;top: 10px;right: 10px;width: 23px;height: 23px;cursor: pointer;}
.close-popup:before {content: '';background-color: #fff;position: absolute;height: 1px;width: 20px;top: 11px;left: -4px;transform: rotate(-45deg);}
.close-popup:after {content: '';background-color: #fff;position: absolute;height: 1px;width: 20px;top: 11px;transform: rotate(45deg);left: -4px;}
</style>
</head>

<body>
<center><main>
<div class="button">popup</div>
<main>

<div class="overlay">
<div class="popup">
<h2 class="popup__h2">Popup mit Fenster</h2>
Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können.
Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können.
<div class="close-popup"></div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>$('.button').click( function() {
$('.overlay').fadeIn();
});
$('.close-popup').click( function() {
$('.overlay').fadeOut();
});
$(document).mouseup( function (e) {
var popup = $('.popup');
if (e.target != popup[0] && popup.has(e.target).length === 0){
$('.overlay').fadeOut();
}
});
</script>
</main></center>
</body>
</html>
 









Kontakt    Datenschutz   Impressum