如何在编辑器中隐藏您的自定义 website.com 网站菜单

我正在尝试做一些类似于 https://mylapka.com/pem 的事情，以便文本消失并且所有元素都回到 www.website.com 编辑器上。我正在尝试创建一个带有背景图像的div，该图像覆盖所有元素并在单击时消失。无论我尝试什么，它都不会覆盖菜单。有没有办法做到这一点。我对编码很陌生，不是很擅长，所以非常感谢任何帮助，尝试学习！

我将以下所有代码放在自定义 html 框中。

<html>
<head>
<script type="text/javascript">
$('#btn').click(function(e){    
$('#fancy, #btn').fadeOut('slow', function(){
    $('#bank, #btn-bk').fadeIn('slow');
});
});
$('#btn-bk').click(function(e){    
    $('#bank, #btn-bk').fadeOut('slow', function(){
        $('#fancy, #btn').fadeIn('slow');
    });
});
</script>
</head>
<body>
<div>
<a id="btn">
<p style="background-image:url(http://i1158.photobucket.com/albums/p616/amattson21/
Untitled-1.png);width:1200px;height:800px;position:relative;z-index-1000;" 
align="center">
</p>
<p style="color:white;font-size:200px;margin-top:-250px;text-shadow: 2px 2px 0px #000000;"
align="center">
TEXT
</p>
</a>
</div>
</body>
</html>

请查看我制作的代码。我创建了另一个html，因为我相信这是实现所需输出的正确方法。

小提琴

.HTML

<div id="main">
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
    <p>Your main website here.</p>
</div>
<div id="overlay">
    <p class="text">TEXT</p>
</div>

.CSS

html, body, #main, #overlay {
    width:100%;
    height:100%;
}
p, body {
    margin:0;
    padding:0;
}
#main {
    background:url('http://subtlepatterns.com/patterns/old_map.png');
}
.text {
    color:white;
    font-size:200px;
    text-shadow: 2px 2px 0px #000000;
    text-align:center;
    z-index:10;
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px -230px ;
}
#overlay {
    left:0;
    top:0;
    position:absolute;
    background:url('http://subtlepatterns.com/patterns/old_map.png');
}

jQuery

$('#overlay').click(function (e) {
    $(this).fadeOut();
});

小提琴

相关内容

最新更新

热门标签：