Question

所以我有这个问题。这是jsfiddle。

<body>
<div class="header">  
<div class="menuIcon">   
  <a id="nav-toggle" href="#menuExpand"><span></span></a>
     <div class="box"><h3>Home</h3></div>
</div>  

<div class="menu">    
  <ul>      
    <li><a href="#">Menu Option 1</a></li>      
    <li><a href="#">Menu Option 2</a></li>      
    <li><a href="#">Menu Option 3</a></li>      
    <li><a href="#">Menu Option 4</a></li>    
  </ul>  
 </div>
</div>

</body>

* {
-webkit-font-smoothing:antialiased;
padding: 0;
margin: 0;
 }

#nav-toggle span {
margin-left: 15px; 
float: left;

}

 #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
 cursor: pointer;
 border-radius: 1px;
 height: 3px;
 width: 25px;
 background: white;
 position: absolute;
 display: block;
 content: '';
 }
 #nav-toggle span:before {
 top: -6px;
 }
 #nav-toggle span:after {
 bottom: -6px; 
 }


#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
 top: 0;
 }
 #nav-toggle.active span:before {
 transform: rotate(45deg);
 }
 #nav-toggle.active span:after {
 transform: rotate(-45deg);
 }

 h3 {
 font-size: 1em;
 color: white;
 float: right;
 margin-right: 15px;
 margin-bottom: 25px;
 font-family: "alternate-gothic-no-3-d";
 font-weight: 800;

  }



 .header .menu ul {
  padding: 0;
 margin: 0;
 }

 .header .menu ul li {
  display: inline-block;
  list-style: none;
  padding: 0 0 0 5px;
  margin: 0;
  }
  .header .menuIcon {
  height: 50px;
  display: none;
  background: #000;
  width: 100%;

 }

 .header .menuIcon a {
  width: 100%;
  display: inline-block;
  color: #fff;
 }

 .header .menuIcon a img {
  vertical-align: middle;
 }



 @media only screen and (min-width: 400px) {
 .menu {
 display: none;
 }

 }

 @media only screen and (max-width: 767px) {
 .header .menu {
 max-height: 0;
 overflow: hidden;
 float: none;
 text-align: center;
 width: 100%;
 -webkit-transition: max-height 0.5s;
 -moz-transition: max-height 0.5s;
 transition: max-height 0.5s;
 }

 .header .menu.menuOpen {
 max-height: 1000px;
 -webkit-transition: max-height 0.5s;
 -moz-transition: max-height 0.5s;
 transition: max-height 0.5s;
  }
 .header .menu ul li {
  display: block;
  width: 100%;
  background: #000;
  border-top: 1px solid #4d4d4d;
 }
 .header .menu ul li:hover {
  background: #999;
  }
.header .menu ul li a {
color: #fff;
text-shadow: #848484 0px 1px 2px;
padding: 10px;
width: 100%;
}
.header .menuIcon {
 display: inline-block;
}
 }


 $(function() {    $("a[href=#menuExpand]").click(function(e) {                   
$(".menu").toggleClass("menuOpen");        e.preventDefault();    });});


document.querySelector( "#nav-toggle" ).addEventListener( "click",      
  function(){         

  this.classList.toggle( "active" );
 });


 $(".header").click(function() {
 $('.menu').show();

 });

主要问题是我的汉堡包图标和文字字体没有排成一行。如您所见，汉堡包垂直居中，文字位于右下方。我已经尝试了从文本边距到文本添加框div来移动它的所有内容。浮动，绝对定位不起作用。

我还想在右边有汉堡包图标，左边有我的页面文字，但是我的中心问题是我没有那么远。如果有人能提供帮助那就太棒了。

非常感谢。

注意：调整小提琴的大小＆＃39;结果＆＃39;查看更接近移动/平板电脑设备的显示分辨率以查看菜单。最大宽度767px。

Answer 1

我想我的问题已经解决了。菜单出现时，标题和菜单项之间只有一个小的差距（没有解决这个问题）我确定一些负填充/边距将会解决这个问题

＆＃13;

$(function() {
  $("a[href=#menuExpand]").click(function(e) {
    $(".menu").toggleClass("menuOpen");
    e.preventDefault();
  });
});


document.querySelector("#nav-toggle").addEventListener("click", function() {
  this.classList.toggle("active");
});


$(".header").click(function() {
  $('.menu').show();

});
$(".swap").click(function() {
  var _this = $(this);
  var current = _this.attr("src");
  var swap = _this.attr("data-swap");
  _this.attr('src', swap).attr("data-swap", current);
});

＆＃13;

* {
  -webkit-font-smoothing: antialiased;
  padding: 0;
  margin: 0;
}
.menuIcon a,
.menuIcon p {
  display: inline;
}
#nav-toggle span {
  margin-left: 15px;
  float: left;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: #000000;
  position: absolute;
  display: block;
  content: '';
}
/*#nav-toggle span:before {
  top: -6px;
}
#nav-toggle span:after {
  bottom: -6px; 
}*/

#nav-toggle img,
#nav-toggle img:before,
#nav-toggle img:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle.active img:before,
#nav-toggle.active img:after {
  top: 0;
}
#nav-toggle.active img:before {
  transform: rotate(45deg);
}
#nav-toggle.active img:after {
  transform: rotate(-45deg);
}
h3 {
  font-size: 1em;
  color: white;
  float: left;
  margin-left: 15px;
  padding-top: 15px;
  font-family: "alternate-gothic-no-3-d";
  font-weight: 800;
}
.header .menu ul {
  padding: 0;
  margin: 0;
}
.header .menu ul li {
  display: inline-block;
  list-style: none;
  padding: 0 0 0 5px;
  margin: 0;
}
.header .menuIcon {
  height: 50px;
  display: none;
  background: #000;
  width: 100%;
}
.header .menuIcon a {
  width: 100%;
  display: inline-block;
  color: #fff;
}
.header .menuIcon a img {
  width: 75px;
  height: 50px;
  float: right;
  margin-top: -34px;
  margin-bottom: 15px;
}
@media only screen and (min-width: 400px) {
  .menu {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .header .menu {
    max-height: 0;
    overflow: hidden;
    float: none;
    text-align: center;
    width: 100%;
    -webkit-transition: max-height 0.5s;
    -moz-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
  .header .menu.menuOpen {
    max-height: 1000px;
    -webkit-transition: max-height 0.5s;
    -moz-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
  .header .menu ul li {
    display: block;
    width: 100%;
    background: #000;
    border-top: 1px solid #4d4d4d;
  }
  .header .menu ul li:hover {
    background: #999;
  }
  .header .menu ul li a {
    color: #fff;
    text-shadow: #848484 0px 1px 2px;
    padding: 10px;
    width: 100%;
  }
  .header .menuIcon {
    display: inline-block;
  }
}

＆＃13;

<body>

  <div class="header">
    <div class="menuIcon">
      <p>
        <h3>ELIJi</h3>
      </p>
      <a id="nav-toggle" href="#menuExpand">
        <img class="swap" src="http://www.rachelgallen.com/images/hamburgerIcon.png" data-swap="http://www.rachelgallen.com/images/close.png"></img>
      </a>

    </div>

    <div class="menu">
      <ul>
        <li><a href="#">Menu Option 1</a>
        </li>
        <li><a href="#">Menu Option 2</a>
        </li>
        <li><a href="#">Menu Option 3</a>
        </li>
        <li><a href="#">Menu Option 4</a>
        </li>
      </ul>
    </div>
  </div>

</body>

＆＃13;

下拉菜单定位

1 个答案: