我的菜单不再显示汉堡图标

时间：2017-10-24 13:41:38

标签： javascript html css

更改某些款式后，手机的汉堡图标不再显示，我该怎样才能把它带回来？还有什么是在菜单上方和下方添加更多白色空间但保持位置相同的最佳方式？

HTML：

<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
    <div class="container">
        <div class="logo"><a href="#">my<strong>Nav</strong></a></div>
        <label class="navBars" for="xBxHack">
            <i class="fa fa-bars"></i>
        </label>
        <ul id="menu" class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

CSS：

.mainNav {
  background: #fff;
  color: #fff;
  max-height: 70px;
  position: relative;
  top:35%;
}
.mainNav a {
  text-decoration: none;
}
.mainNav .logo {
  display: inline-block;
  color: #fff;
  font-size: 1.7em;
  height: 40px;
  line-height: 1.55em;
  letter-spacing: -2px;
  text-transform: uppercase;
  padding: 0 10px;
  z-index: 0;
  /*POSITION*/
  position: relative;
}
.mainNav .logo:hover:before {
  background: #292938;
}
.mainNav .logo:before {
  content: "";
  background: #3C91E6;
  z-index: -1;
  /*POSITION*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mainNav .logo a {
  color: #efefef;
}
.mainNav .menu {
  font-family: 'Montserrat', sans-serif;
  text-transform:uppercase;
  letter-spacing:5px;
  background: #fff;
  font-size:10px;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #fff;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  /*POSITION*/
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
}
.mainNav .menu a {
  color: #292938;
  border-bottom: 1px solid #d9d9d9;
  font-weight: bold;
  display: block;
  padding: 15px;
}

.mainNav .navBars {
  display: inline-block;
  font-size: 1.7em;
  line-height: 1.5em;
  float: right;
  /*USER SELECTION*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

#xBxHack {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -99999px;
}
#xBxHack:checked ~ nav .menu {
  display: block;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .mainNav {
    overflow: hidden;
  }
  .mainNav .navBars {
    display: none;
  }
  .mainNav .container {
    padding-top: 0;
    padding-bottom: 0;
  }
  .mainNav .logo {
    margin: 10px 0;
  }
  .mainNav .menu {
    display: block;
    box-shadow: none;
    border: none;
    float: right;
    /*POSITION*/
    position: static;
  }
  .mainNav .menu li {
    display: inline-block;
  }
  .mainNav .menu a {
    border: none;
    padding: 20px 10px;
  }
}

JS：

$(document).ready(function() {
    "use strict";
    var myNav = {
        init: function() {
            this.cacheDOM();
            this.browserWidth();
            this.bindEvents();
        },
        cacheDOM: function() {
            this.navBars = $(".navBars");
            this.xBxHack = $("#xBxHack");
            this.navMenu = $("#menu");
        },
        browserWidth: function() {
            $(window).resize(this.bindEvents.bind(this));
        },
        bindEvents: function() {
            var width = window.innerWidth;

            if (width < 600) {
                this.navBars.click(this.animate.bind(this));
                this.navMenu.hide();
                this.xBxHack[0].checked = false;
            } else {
                this.resetNav();
            }
        },
        animate: function(e) {
            var checkbox = this.xBxHack[0];
            !checkbox.checked ?
                this.navMenu.slideDown() :
                this.navMenu.slideUp();

        },
        resetNav: function() {
            this.navMenu.show();
        }
    };
    myNav.init();
});

在这个jsfiddle中你可以看到屏幕很小时没有显示图标：https://jsfiddle.net/quehf3x9/

3 个答案:

答案 0 :(得分：0)

首先确保您正在加载Font Awesome库。这不是在JS Fiddle示例中加载的。所以我添加了CDN的链接。

其次，为导航栏的CSS添加宽度，高度和背景颜色：

.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}

有关工作示例，请参阅我更新的JS Fiddle。

答案 1 :(得分：0)

上面的小提琴你有两个问题。首先是你没有包含字体真棒库。代码不知道如何处理fa fa-bars类。要在jsfiddle中包含一个外部库：

  1. 查找托管文件的CDN
  2. 将路径复制到文件
  3. 将其粘贴到外部资源部分的左侧边栏中。
  4. 选择 + 图标，将资源添加到小提琴中。

    5. 加载文件后，您可以从开发人员工具（通过选择 F12 打开工具）中看到该类已应用但图标颜色为白色。您需要添加一些CSS来为图标着色，例如：

    label i {
    color: #333;
}

    我做了这两项修改并更新了你的小提琴here。

答案 2 :(得分：0)

有两件事 -

您缺少第一个包含Font Awesome库

的文件

其次，图标的颜色为白色。因此，即使您包含库，也无法看到它，更改颜色将起到作用<i class="fa fa-bars" style="color:black;"></i>

＆＃13;
＆＃13; 
 .mainNav {
  background: #fff;
  color: #fff;
  max-height: 70px;
  position: relative;
  top:35%;
}
.mainNav a {
  text-decoration: none;
}
.mainNav .logo {
  display: inline-block;
  color: #fff;
  font-size: 1.7em;
  height: 40px;
  line-height: 1.55em;
  letter-spacing: -2px;
  text-transform: uppercase;
  padding: 0 10px;
  z-index: 0;
  /*POSITION*/
  position: relative;
}
.mainNav .logo:hover:before {
  background: #292938;
}
.mainNav .logo:before {
  content: "";
  background: #3C91E6;
  z-index: -1;
  /*POSITION*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mainNav .logo a {
  color: #efefef;
}
.mainNav .menu {
  font-family: 'Montserrat', sans-serif;
  text-transform:uppercase;
  letter-spacing:5px;
  background: #fff;
  font-size:10px;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #fff;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  /*POSITION*/
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
}
.mainNav .menu a {
  color: #292938;
  border-bottom: 1px solid #d9d9d9;
  font-weight: bold;
  display: block;
  padding: 15px;
}

.mainNav .navBars {
  display: inline-block;
  font-size: 1.7em;
  line-height: 1.5em;
  float: right;
  /*USER SELECTION*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

#xBxHack {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -99999px;
}
#xBxHack:checked ~ nav .menu {
  display: block;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .mainNav {
    overflow: hidden;
  }
  .mainNav .navBars {
    display: none;
  }
  .mainNav .container {
    padding-top: 0;
    padding-bottom: 0;
  }
  .mainNav .logo {
    margin: 10px 0;
  }
  .mainNav .menu {
    display: block;
    box-shadow: none;
    border: none;
    float: right;
    /*POSITION*/
    position: static;
  }
  .mainNav .menu li {
    display: inline-block;
  }
  .mainNav .menu a {
    border: none;
    padding: 20px 10px;
  }
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
	<div class="container">
		<div class="logo"><a href="#">my<strong>Nav</strong></a></div>
		<label class="navBars" for="xBxHack">
			<i class="fa fa-bars" style="color:black;"></i>
      
		</label>
		<ul id="menu" class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Work</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题