单击“菜单”时，菜单项在屏幕上居中，具有褪色背景和边框效果

Menu items centered on screen when clicking on 'menu', with fading background and border effect

本文关键字：背景 褪色 边框 菜单 菜单项 单击 屏幕      更新时间：2023-09-26

所以我刚刚遇到了 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;">

我做了一个简单的例子，如何做到这一点。（只有一个结构）没有代码质量，但我认为你可以即兴发挥，这是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

参见小提琴 

$('.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;
}
相关文章：