Question

所以我刚遇到http://www.dennisadelmann.de/

的网站

我想重新创建类似于他菜单的东西。因此，当我将鼠标悬停在它上面时，会出现黑色边框，当我点击它时，屏幕会变为黑色，屏幕上会显示菜单项。我试图找出他是如何工作的，但这很困难。我无法在javascript文件中找到任何内容。我在html中注意到他的菜单代码在点击时是动态的。

我只是一个使用javascript的初学者，所以当然要让事情变得更难。至少我认为它是用javascript完成的。

我不知道在互联网上搜索的位置，所以如果这种菜单有特定名称，我可以搜索教程吗？

如果没有..重新创建这样的菜单很难吗？

非常感谢！

下面是HTML中默认状态下菜单项的示例：

<div class="menu_overlay" style="display: none;">
            <div class="close"><a>Close</a></div>
            <div class="links_hover">
                <p class="work_in" style="opacity: 0;">7 projects online</p>
                <p class="about_in" style="opacity: 0;">About Dennis Adelmann</p>
                <p class="journal_in" style="opacity: 0;">The digital sketchbook</p>
                <p class="contact_in" style="opacity: 0;">Get in touch</p>
            </div>
            <div class="links_wrapper">
                <ul class="links_overlay">
                    <li><a class="work" href="portfolio.php">Work</a></li>
                    <li><a class="about" href="about.php">About</a></li>
                    <li><a class="journal" href="journal.php">Sketchbook</a></li>
                    <li><a class="contact" href="contact.php">Contact</a></li>
                </ul>
            </div>
        </div>

        <header>
            <div id="left"></div>
            <div id="right"></div>
            <div id="top"></div>
            <div id="bottom"></div>
                <nav>
                    <ul class="links">
                        <li><a>Menu</a></li>
                    </ul>
                </nav>
        </header>

当点击菜单项时，正在改变的一件事是：

<div class="menu_overlay" style="display: block;">

Answer 1

我做了一个简单的例子，说明如何做到这一点。（只有一个结构）没有代码质量，但我认为你可以改进它，这里是 javascript 所有的魔力：

var $menu = $( '.menu' );
var $body = $( 'body' );
var $nav = $( '.navigation' );
var $close = $( '.close' );

$menu.on('mouseover', function(){

  $body.addClass( 'hovered' );
});

$menu.on('mouseleave', function(){

  $body.removeClass( 'hovered' );
});

$menu.on( 'click', function(){

  $body.addClass( 'open' );
})

$close.on( 'click', function(){

  $body.removeClass( 'open' );
});

<强> HTML：

<div class="menu">Menu</div>
<div class="navigation">
  <div class="close">Close</div>  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem a distinctio porro nulla vitae, id modi alias earum eos rerum quasi natus qui sunt, libero! Impedit, at. Accusantium, perferendis quod.
  </p>
</div>

CSS：

.menu {
  padding: 50px;
  cursor: pointer;
  display: inline-block;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 10px transparent;
  transition: box-shadow 0.3s;
}

.close {
  cursor: pointer;
}

body.hovered {
  box-shadow: inset 0 0 0 10px #000;
}
body .navigation {
  padding: 50px;
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  opacity: 0;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.3s;
  color: #fff;
}
body.open .navigation {
  opacity: 1;
  z-index: 101;
}

您可以在此处找到所有工作示例： http://codepen.io/GomatoX/pen/WbGLmd

Answer 2

see fiddle

$('.link').click(function () {
    $('.overlay').fadeIn();
});
$('.close').click(function () {
    $('.overlay').fadeOut();
});

<强> CSS

.overlay {
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    color:#fff;
    text-align:center;
    display:none;
}
.link {
    float:right;
    font-size:16px;
    color:#000;
    margin-top:50px;
}
.close {
    float:left;
    color:#fff;
}

单击菜单＆＃39;时，菜单项位于屏幕中心，背景和边框效果会变淡

2 个答案: