html - "Burger"样式菜单栏长度

Question

我在创建“汉堡菜单”时遇到了问题，我不知道如何解决它。

尝试获得类似于此站点的效果(调整浏览器大小):http://www.sebastianbailey.co.uk/

当条形被点击时，它变成了一个 X，但是条形太短造成了一个看起来很奇怪的 X。

我已经放到codepen上查看了: http://codepen.io/sparcut/pen/xVyZNQ

这就是我目前正在做的尝试并达到效果。

.mobile-open .nav-mobile {
    .mid {
        display: none;
    }
    .top {
        margin-top: 15px;
        margin-bottom: 0 !important;
        transform: rotate(45deg);
    }
    .bot {
        margin-top: 0 !important;
        transform: rotate(-45deg);
    }
}

---

编辑

感谢@ali-sheikhpour把我推向正确的方向。虽然它看起来有点不稳定。 Codepen 已更新

Answer 1

由于您的菜单的宽度和高度比例与链接示例不同，您必须从顶部和左侧巧妙地移动栏以实现对称效果(除了旋转)。我已根据自己的选择更新边距，但您可以更改它们以设置您希望形成十字的正确位置。

请运行该代码段:(我已将 html 代码包装在一个 500 像素的 div 中，以防止干扰代码段和菜单的关闭按钮)

$(window).on("load", function() {
	$("#preload").fadeOut("fast");
});

$(document).ready(function() {
	$(".nav-mobile").click(function() {
		$(".nav-container").toggleClass("mobile-open");
	});
});

html,
body {
  font-family: "Montserrat", Arial, sans-serif;
  margin: 0;
  height: 100vh;
  width: 100%;
  color: #ECF0F1;
  overflow-x: hidden;
}

a {
  color: inherit;
}

@media (max-width: 9999px) {
  .mobile-open .links {
    top: 55px !important;
  }
  .mobile-open .nav-mobile .mid {
    display: none;
  }
  .mobile-open .nav-mobile .top {
    margin-top: 13px;
    margin-bottom:0 !important
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .mobile-open .nav-mobile .bot {
    margin-top: -13px !important;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  .nav-mobile {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    clear: both;
    right: 25px;
    top: 20px;
    cursor: pointer;
  }
  .nav-mobile .nav-line {
    width: 50px;
    height: 5px;
    clear: both;
    background: #ECF0F1;
    border-radius: 5px;
  }
  .nav-mobile .top {
    margin-bottom: 9px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  .nav-mobile .mid {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  .nav-mobile .bot {
    margin-top: 9px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }

  .nav-container {
    width: 100%;
  }

  .nav {
    background: #2C3E50;
    height: 75px;
  }
  .nav .title-wrap {
    display: inline-block;
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #ECF0F1 50%);
    background-image: linear-gradient(to bottom, #2C3E50 50%, #ECF0F1 50%);
    background-size: 100% 200%;
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    float: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 15px;
    position: relative;
    left: 0;
    cursor: pointer;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  .nav .title-wrap a {
    font-size: 45px;
    padding: 0;
    color: #ECF0F1;
    display: inline-block;
    height: 100%;
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    text-decoration: none;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  .nav .title-wrap:hover {
    background-position: 0 -100%;
  }
  .nav .title-wrap:hover a {
    color: #2C3E50;
  }
  .nav .links {
    display: block;
    top: -250px;
    right: 0;
    position: absolute;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    z-index: -1;
  }
  .nav .links li {
    display: block;
    list-style: none;
    float: none;
    position: relative;
    left: 0 !important;
  }
  .nav .links li:hover a {
    background-position: 0 -100%;
  }
  .nav .links li .current-page {
    background-image: -webkit-linear-gradient(top, #C0392B 50%, #E74C3C 50%) !important;
    background-image: linear-gradient(to bottom, #C0392B 50%, #E74C3C 50%) !important;
  }
  .nav .links li .home-nav {
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #C0392B 50%);
    background-image: linear-gradient(to bottom, #2C3E50 50%, #C0392B 50%);
  }
  .nav .links li .projects-nav {
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #2980B9 50%);
    background-image: linear-gradient(to bottom, #2C3E50 50%, #2980B9 50%);
  }
  .nav .links li .about-nav {
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #F39C12 50%);
    background-image: linear-gradient(to bottom, #2C3E50 50%, #F39C12 50%);
  }
  .nav .links li .asp-nav {
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #8E44AD 50%);
    background-image: linear-gradient(to bottom, #2C3E50 50%, #8E44AD 50%);
  }
  .nav .links li .contact-nav {
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #27AE60 50%);
    background-image: linear-gradient(to bottom, #2C3E50 50%, #27AE60 50%);
  }
  .nav .links li a {
    text-decoration: none;
    color: #ECF0F1;
    display: inline-block;
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    background-size: 100% 200%;
    padding: 10px 20px 10px 20px;
    font-size: 25px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    width: 100%;
  }
  .nav .links li a span {
    display: inline-block;
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:500px;position:relative;">
<div class="nav-container">
	<div class="nav">
		<div class="title-wrap">
			<a href="/">My Website</a>
		</div>
		<div class="nav-mobile">
			<div class="nav-line top"></div>
			<div class="nav-line mid"></div>
			<div class="nav-line bot"></div>
		</div>
		<ul class="links">
			<li style="left: -2.5%;" class="nav-li"><a href="/" class="current-page home-nav"><span>home</span></a></li>
			<li style="left: -2.6%;" class="nav-li"><a href="/projects" class="projects-nav"><span>projects</span></a></li>
			<li style="left: -2.7%;" class="nav-li"><a href="/about" class="about-nav"><span>about</span></a></li>
			<li style="left: -2.8%" class="nav-li"><a href="/aspirations" class="asp-nav"><span>aspirations</span></a></li>
			<li style="left: -2.9%;" class="nav-li"><a href="/contact" class="contact-nav"><span>contact</span></a></li>
		</ul>
	</div>
</div>
                                                                                          </div>