Navigation mit Vorschaubilder
Hab mal gesehen das einer eine Navigation hatte, wo man beim Überfahren mit der Maus ein Bild von der Seite gesehen hat, die man dann besuchen würde.
Wie geht das?
Der hier verwendete Code
<html lang="de" data-lt-installed="true"><head>
<meta charset="utf-8">
<title>Homepage von Basti1012</title>
<script src="/js_webseite/jquery.js"></script>
<style>
@media only screen and (max-width: 568px) {
main {
font-size:16px;
}
}
@media only screen and (max-width: 420px) {
.side-navigation li, .side-navigation li a {
font-size: 24px !important;
}
}
@media only screen and (max-width: 499px) {
#oben{
display:none !important;
}
}
* {
padding: 0;
margin: 0;
}
body {
color:#000000;
display:flex;
flex-direction:column;
overflow-x: hidden;
}
main {
background:#ffffff;
color: #000000;
min-height:200px;
padding:5px;
}
ul {
width:100%;
list-style-type:none;
font-size:14px;
}
ul li a {
text-decoration:none;
color:#ffffff;
padding:2px 3px 2px 3px;
background:black;
display:block;
}
ul li a:visited {
color: lightgrey;
}
ul li a:link {
color:blue;
text-align: left;
padding: 5px 15px !important;
}
ul li a:hover {
color:black;
background-color:yellow;
}
form{
text-align:center;
}
#navright{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height:35px;
z-index:999;
background: #4d4d4d;
background-image: linear-gradient(to bottom, #4d4d4d 0%, #1a1a1a 100%);
}
#navright ul{
list-style: none;
display:flex;
height:100%;
}
#navright ul li{
display:block;
flex:1;
}
#navright ul li a {
color:white;
font-family: 'Lucida Console';
font-size: 14px;
text-decoration: none;
display:block;
text-align:center;
line-height:28px;
margin:0 auto;
overflow:hidden;
background: #4d4d4d;
background-image: linear-gradient(to bottom, #4d4d4d 0%, #1a1a1a 100%);
}
@media (min-width: 500px){
#navright{
width:100%;
}
}
@media (max-width: 499px){
#navright{
height:auto;
position: relative;
margin: 0;
padding: 5px 0 5px 0;
}
#navright ul{
flex-direction:column;
}
#navright ul li a {
width:50%;
border-bottom:1px solid grey;
}
}
#blender{
position:absolute;
z-index:999999;
top:0;
left:0;
width:300px;
display:none;
height:auto;
border:2px solid white;
overflow:hidden;
border-radius:10px;
transition:all 300ms;
pointer-events:none;
}
#blender img{
width:100%;
}
#blender:before{
content:attr(data-blendertext);
height:160px;
width:295px;
margin:0 auto;
position:absolute;
font-size:30px;
font-weight:900;
text-align:center;
word-break: break-word;
color:red;
overflow:hidden;
display:block;
}
.search {
height: 34px;
width:100%;
display:flex;
overflow:hidden;
}
#suchfeld{
background-color: #fff;
border: 0;
font-size: 18px;
font-family: 'Muli', sans-serif;
height: 34px;
width:100%;
position:relative;
z-index:0;
left:-100%;
transition: width 0.3s ease;
}
#suchbutton{
background-color: #fff;
border: 0;
cursor: pointer;
font-size: 24px;
position:relative;
z-index:1;
left:0;
height: 34px;
width: 34px;
transition: transform 0.3s ease;
}
#suchfeld:focus {
outline: none;
}
#formsuche{
text-align:left;
display:flex;
width:100%;
}
@media only screen and (max-width: 360px) {
.logo{
display:none;
}
}
#oben{
background:#123456;
display:flex;
flex-direction:column;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
min-height:200px;
background:#123456;
}
.logounten:after,#chatunten:after{
content: '';
border-bottom: 2px solid red;
width: 0%;
margin-left: -100%;
display: block;
animation: lauf 5s linear infinite;
}
.logo{
width: 38vw;
text-align: center;
background: blue;
padding: 10px 0px;
border-radius: 20px;
border: 3px solid black;
margin-top:20px;
}
.logo>.logooben,#chatoben{
color: white;
Background: blue;
font-size:3vw;
text-shadow: 2px 2px 2px black;
font-weight: bold;
}
.logo>.logounten,#chatunten{
display: inline-block;
background: white;
border-radius: 5px;
border: 1px solid black;
color: blue;
padding: 2px;
overflow: hidden;
font-weight: 900;
font-size:2vw;
text-shadow: 1px 1px 1px black;
cursor:pointer;
}
.logounten:hover,#chatunten:hover{
color:red;
}
#chatsister,#forumsister{
display:none;
position:absolute;
z-index:2;
top:0;
left:0;
width:200px;
height:auto;
border:2px solid grey;
padding:20px;
border-radius:20px;
color:white;
text-align:center;
font-weight:700;
background:#123456;
}
#llooggooss{
display:flex;
align-items:center;
margin-top:20px;
justify-content:space-around;
}
li#navclose {
position: absolute;
margin-top: -30px;
margin-left: 300px;
text-align: center;
line-height: 30px;
width: 30px;
background: black;
height: 30px;
font-size: 25px;
font-weight: 900;
float: right;
}
.side-navigation{
width:300px;
position:fixed;
height:100%;
z-index:999999;
border-top:30px solid transparent;
top:0px;
left:-305px;
background:black;
color:white;
transition:all 300ms;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
.side-navigation:hover{
left:0;
transition:all 300ms;
z-index: 99999;
}
.nav{
padding-left: 0;
margin-bottom: 0;
height: 100%;
overflow-y: scroll;
list-style: none;
}
.side-navigation li,
.side-navigation li a
{
list-style:none;
color:white;
}
.nav::-webkit-scrollbar {
width:13px;
}
.nav::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: blue;
}
.nav::-webkit-scrollbar-thumb {
background: white;
height:100px;
outline: 1px solid slategrey;
}
#corona_box{
display:flex;
flex-direction:column;
align-items: center;
margin: 0 auto;
justify-content: center;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
@charset "UTF-8";
.animated{animation-duration:1s;animation-fill-mode:both}
.pace {
pointer-events: none;
user-select: none;
}
.pace.pace-inactive .pace-progress {
display: none;
}
.pace .pace-progress {
position: fixed;
z-index: 2000;
top: 0;
right: 0;
height: 5rem;
width: 5rem;
color:red;
transform: translate3d(0, 0, 0) !important;
}
.pace .pace-progress:after {
display: block;
position: absolute;
top: 0;
right: .5rem;
content: attr(data-progress-text);
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
font-size: 5rem;
line-height: 1;
text-align: right;
color: rgba(0, 0, 255, 0.99);
}
/*------- cookieconsent.min.css ----- -----------*/
.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-revoke:hover{transform:translateY(0)}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-btn,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-bottom{bottom:1em}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1 1 auto;flex:1 1 auto}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}
</style><style></style><style type="text/css" data-fbcssmodules="css:fb.css.base css:fb.css.dialog css:fb.css.iframewidget css:fb.css.customer_chat_plugin_iframe"></style></head><body class=" pace-done"><div class="cc-revoke cc-bottom cc-animate cc-color-override-1553441872" style="">Cookie Policy</div><div role="dialog" aria-live="polite" aria-label="cookieconsent" aria-describedby="cookieconsent:desc" class="cc-window cc-banner cc-type-opt-in cc-theme-classic cc-bottom cc-color-override-1553441872 cc-invisible" style="display: none;"><!--googleoff: all--><span id="cookieconsent:desc" class="cc-message">SORRY der Text muß jetzt sein.<br>Diese Website verwendet Cookies um Ihnen ein besseres Nutzererlebnis zu bieten! <a aria-label="learn more about cookies" role="button" tabindex="0" class="cc-link" href="https://basti1012.de/root/index.php?ordner=root&name=datenschutz.php" rel="noopener noreferrer nofollow" target="_blank">https://basti1012.de/root/index.php?ordner=root&name=datenschutz.php</a></span><div class="cc-compliance cc-highlight"><a aria-label="deny cookies" role="button" tabindex="0" class="cc-btn cc-deny">Decline</a><a aria-label="allow cookies" role="button" tabindex="0" class="cc-btn cc-allow">Ok</a></div><!--googleon: all--></div><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<nav id="navright">
<ul>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="/image/-index.png" href="https://basti1012.de/index.php">Home</a>
</li>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="image/github-index.png" href="https://basti1012.de/github/index.php">Meine Githubs</a>
</li>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="image/online-index.png" href="https://basti1012.de/online/index.php">Wo Online</a>
</li>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="image/my_codepen-index.png" href="https://basti1012.de/my_codepen/index.php">My Codepens</a>
</li>
<li class="droppable">
<div class="search">
<form id="formsuche" action="suche/suche.php">
<button id="suchbutton" type="button">
<i class="fa fa-search"></i>
</button>
<input class="" id="suchfeld" type="text" name="q" placeholder="Suchwort...">
</form>
</div>
</li>
</ul>
</nav><div id="oben">
<div id="llooggooss">
<a href="https://soforthilfe-forum.de/">
<div class="logo logo1">
<span class="logooben">Zum Soforthilfe-Forum</span>
<br>
<span class="logounten">Hilfe bei HTML,CSS,JS und PHP</span>
</div>
</a>
<div id="forumsister"><span>
Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.
Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.
Auf fast allen Fragen haben wir eine Antwort.</span></div>
<a href="https://soforthilfe-chat.de/">
<div class="logo logo2">
<span id="chatoben">Zum Soforthilfe Chat</span><br>
<span id="chatunten">Hilfe bei Web programmieren</span>
</div>
</a>
<div id="chatsister"><span>
Der Soforthilfe-chat verspricht das ,was sein Name sagt.
Hier sind Leute Online die sofort ihre hilfe anbieten.
Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen.
Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung</span>
</div>
</div>
</div>
<div id="wrapper">
<div class="animated" data-blendertext="" id="blender" style="display: none; top: 831px; left: 346px;"><img src="images/neue-vorschau/thumb/api/api-index.png"></div>
<main>
<div id="corona_box">
</div></main>
</div>
<script>
$('.block__link').hover(function(){
var link=$(this).data('img');
$(this).on( "mousemove", function( event ) {
let left=event.pageX;
let top=event.pageY;
//console.log('top='+top+' left= '+left);
$('#blender').css('display','block');
$('#blender').addClass('bounce');
$('#blender').css('top',top);
$('#blender').css('left',left+100);
$('#blender').html('<img src="'+link+'">')
});
}).on('mouseleave',function(){
$('#blender').removeClass('bounce');
$('#blender').css('display','none');
});
$('nav').on('mouseleave',function(){
console.log('themen verlassern')
$('#blender').removeClass('bounce');
$('#blender').css('display','none');
})
</script>
</body></html>