Question

我一直在努力尝试用汉堡菜单来实现3件事，但无济于事。这是一个响应式汉堡包，在点击时变为X并移动到页面右侧进行过渡（所有这些都很好，尽管缩短的代码不会在小提琴中）。

1）我想将导航栏中的汉堡菜单垂直居中，并在侧面显示菜单文本，但也将此文本垂直居中（因此它显示在汉堡的中间位置）。我可以垂直居中汉堡菜单，但是一旦我添加文字，文字总是与汉堡线的底部一致。

2）此外，我还想在整个汉堡本身周围设置边框，使用填充，然后在文本旁边。无论我尝试什么，只需在实际的汉堡线或整个汉堡包围边缘，没有衬垫。

3）还有一种方法可以在悬停和点击时更改汉堡包和文本的颜色吗？我所取得的最好成绩是改变了文本的颜色而不是汉堡包。我搜索过但搜索过但找不到有效的东西。

jQuery(document).ready(function () {
    jQuery('#toggle-nav').click(function (e) {
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
        jQuery('.hamburgerWrapper').toggleClass('active');

        e.preventDefault();
    });
});

.hamburgerWrapper {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  left: 0;
  position: absolute;
  width: 100%;
  background-color: #3462bc;
  border-bottom: 2px solid #b3c4e6;
  transition: all 600ms ease;
  /*padding-top: 5px;
        padding-bottom: 1px;*/
  /*border: 5px solid yellow;*/
}
.hamburgerWrapper.active {
  left: 60%;
  transition: all 300ms ease;
}
.hamburger {
  list-style-type: none;
}
.hamburger li a {
  text-align: center;
  display: block;
  color: #fff;
  padding: 24px 16px 12px 16px;
  cursor: pointer;
  /*border-bottom: 5px transparent;*/
}
#toggle-nav:after {
  padding-left: 50px;
  content: 'Menu';
}
#toggle-nav span,
#toggle-nav span:before,
#toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
#toggle-nav span:before {
  top: -10px;
}
#toggle-nav span:after {
  bottom: -10px;
}
#toggle-nav span,
#toggle-nav span:before,
#toggle-nav span:after {
  transition: all 500ms ease-in-out;
}
#toggle-nav.active span {
  background-color: transparent;
}
#toggle-nav.active span:before,
#toggle-nav.active span:after {
  top: 0;
}
#toggle-nav.active span:before {
  transform: rotate(45deg);
}
#toggle-nav.active span:after {
  transform: rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburgerWrapper">
  <ul class="hamburger">
    <li><a id="toggle-nav" href="#"><span></span></a>
    </li>
  </ul>
</div>

Answer 1

对于 1 ，您可以将vertical-align: middle;与display: inline-block;结合使用，作为菜单文本和汉堡包图标。您正在使用绝对定位元素定位汉堡包菜单的另外2个栏，因此您需要将汉堡包图标定位为absolute或relative。如果您使用垂直对齐，则需要使用position: relative。但是，您也可以使用box-shadow创建汉堡菜单（参见 2 ）

.element {
  width: 100px;
  height: 50px;
  background: green;
  display: inline-block;
  vertical-align: middle;
}
.menu {
  display: inline-block;
  vertical-align: middle;
}

<div class="element"></div>
<div class="menu">Menu</div>

此处它适用于您的示例：

.hamburgerWrapper {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  left: 0;
  position: absolute;
  width: 100%;
  background-color: #3462bc;
  border-bottom: 2px solid #b3c4e6;
  transition: all 600ms ease;
  /*padding-top: 5px;
        padding-bottom: 1px;*/
  /*border: 5px solid yellow;*/
}
.hamburgerWrapper.active {
  left: 60%;
  transition: all 300ms ease;
}
.hamburger {
  list-style-type: none;
}
.hamburger li a {
  text-align: center;
  display: block;
  color: #fff;
  padding: 24px 16px 12px 16px;
  cursor: pointer;
  /*border-bottom: 5px transparent;*/
}
#toggle-nav:after {
  padding-left: 50px;
  display: inline-block;
  vertical-align: middle;
  content: 'Menu';
}
#toggle-nav span,
#toggle-nav span:before,
#toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
#toggle-nav span:before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: -10px;
}
#toggle-nav span:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
}
#toggle-nav span,
#toggle-nav span:before,
#toggle-nav span:after {
  transition: all 500ms ease-in-out;
}
#toggle-nav.active span {
  background-color: transparent;
}
#toggle-nav.active span:before,
#toggle-nav.active span:after {
  top: 0;
}
#toggle-nav.active span:before {
  transform: rotate(45deg);
}
#toggle-nav.active span:after {
  transform: rotate(-45deg);
}

<div class="hamburgerWrapper">
  <ul class="hamburger">
    <li><a id="toggle-nav" href="#"><span></span></a>
    </li>
  </ul>
</div>

对于 2 ，您可以使用填充将图标包装在父元素中。请确保包含padding-top和padding-bottom（必要，因为您的图标的实际尺寸小于显示的尺寸）

我在这里用box-shadow代替:before和:after：

.wrapper {
  padding: 8px 2px;
  border: 1px solid black;
  display: inline-block;
}
.element {
  background: black;
  width: 20px;
  height: 3px;
  box-shadow: 0 -5px 0 0 black, 0 5px 0 0 black;
}

<div class="wrapper">
  <div class="element"></div>
</div>

对于 3 ，你最好使用JavaScript，因为你显然想做的不仅仅是为元素着色（即你需要一些显示菜单的逻辑等）。

但是，使用CSS创建悬停效果很容易。如果您希望获得点击效果，则需要使用:focus，这只会在元素聚焦时才有效，或者您使用:target，就像在this example中描述的那样。

在这里你可以看到悬停效果：

.wrapper {
  transition: 0.5s ease all;
}
.wrapper:hover {
  background-color: #ccc;
}
.wrapper:hover .hamburger-wrapper {
  border-color: red;
}
.wrapper:hover .hamburger {
  background: green;
  box-shadow: 0 -5px 0 0 green, 0 5px 0 0 green;
}
.wrapper:hover .menu {
  background: yellow;
  color: orange;
}
.menu {
  transition: 0.3s ease all;
  display: inline-block;
  vertical-align: middle;
}
.hamburger-wrapper {
  transition: 0.3s ease all;
  padding: 8px 2px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}
.hamburger {
  transition: 0.3s ease all;
  background: black;
  width: 20px;
  height: 3px;
  box-shadow: 0 -5px 0 0 black, 0 5px 0 0 black;
}

<div class="wrapper">
  <div class="hamburger-wrapper">
    <div class="hamburger"></div>
  </div>
  <div class="menu">Menu</div>
</div>

如何集中汉堡CSS，居中文本和添加边框

1 个答案: