响应式菜单无法在桌面上运行

时间：2017-09-19 09:00:10

标签： javascript html css

我试图创建一个响应式菜单，我已经让它在移动设备上运行但是当它打开到桌面浏览器时，菜单按钮不稳定而且没有设置为全宽。

＆＃13;
＆＃13; 
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);

/*Javascript*/
$(function() {
  var $page = jQuery.url.attr("file");
  $('ul.navigation li a').each(function() {
    var $href = $(this).attr('href');
    if (($href == $page) || ($href == '')) {
      $(this).addClass('on');
    } else {
      $(this).removeClass('on');
    }
  });
});
/*Javascript End*/
＆＃13; 
    body {
  font-family: Helvetica, Arial, sans-serif;
  float: left;
  margin: 0;
  padding: 0;
}

#logo {
  z-index: 100;
  position: relative;
  float: left;
  padding-left: 3px;
  padding-top: 7px;
}

#menutext {
  color: #e30317;
  font-size: 22px;
}

#menu {
  overflow-y: scroll;
  position: absolute;
  border-color: #eeeeee;
  z-index: -100;
  background: #ffffff;
  /*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
  ;
  line-height: 4.1em;
  font-weight: 200;
  width: 100%;
  margin: inherit;
  color: #c6c6c6;
  padding-bottom: 0;
  height: 300px;
}

#lines {
  position: relative;
  object-position: center;
  border-color: #e30317;
}

ul.navigation {
  background: #fff;
}

ul.navigation li a {
  text-decoration: none;
}

ul.navigation li a.on {
  background: #eeeeee;
  padding: 2px 6px;
  min-width: 100%;
}

.mobile-menu {
  display: block;
  background: #c6c6c6;
  /*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
  ;
  line-height: 100px;
  font-weight: 200;
  width: 100%;
  text-align: center;
  position: fixed;
  margin: 0 auto;
  color: #c6c6c6
}


/*Strip the ul of padding and list styling*/

.mobile-menu ul {
  list-style-type: none;
  padding-left: 0;
  text-align: center;
  width: 100%;
  position: relative;
  background: #c6c6c6;
  position: relative;
  height: 50px;
}


/*Create a horizontal list with spacing*/

.mobile-menu li {
  display: inline-block;
  /*float: left;
	margin-right: 1px;*/
}


/*Style for menu links*/

.mobile-menu li a {
  display: block;
  min-width: 130px;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #eee;
  text-transform: uppercase;
  background: #253746;
  text-decoration: none;
  margin-left: -15px;
  padding: 20px 0;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  font-size: 1.0em;
  font-weight: bold;
  border-color: #e30317;
  border-left: 1px solid;
  border-top: 1px solid;
  border-right: 3px solid;
  border-bottom: 0px solid;
  height: 70px;
}


/*Hover state for top level links*/

.mobile-menu li:hover a {
  color: #333;
  background-color: #eee;
}


/*Style for dropdown links*/

.mobile-menu li:hover ul a {
  background: #c6c6c6;
  color: #FFF;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

.mobile-menu li:hover .mobile-menu ul a:hover {
  color: #eee;
}


/*Hide dropdown links until they are needed*/

.mobile-menu li ul {
  display: none;
  color: #eee
}


/*Make dropdown links vertical*/

.mobile-menu li ul li {
  display: none;
  float: none;
}


/*Prevent text wrapping*/

.mobile-menu li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 10px;
}


/*Style 'show menu' label button and hide it by default*/

.mobile-menu .show-menu {
  text-decoration: none;
  color: #333;
  background: #fff;
  text-align: center;
  padding: 10px 15px;
  display: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}

.mobile-menu .show-menu span {
  padding-left: 35px;
}


/*Hide checkbox*/

.mobile-menu input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

.mobile-menu input[type=checkbox]:checked~#menu {
  display: block;
  color: #333333;
}


/*Responsive Styles*/

@media screen and (max-width: 916px) {
  .mobile-menu .lines {
    border-bottom: 15px double #f8f8f8;
    border-top: 5px solid #f8f8f8;
    content: "";
    height: 5px;
    width: 20px;
    padding-right: 15px;
    float: right;
  }
  /*Make dropdown links appear inline*/
  .mobile-menu ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .mobile-menu li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  .mobile-menu ul li,
  .mobile-menu li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .mobile-menu .show-menu {
    display: inherit;
    color: #fff;
  }
}


/* Test CSS END*/


}

}
@media screen and (min-width: 481px) {
  /* comes into effect for screens larger than or equal to 481 pixels */
  #pager {
    width: 481px;
  }
  @media screen and (min-width: 916px) {
    /* comes into effect for screens larger than or equal to 481 pixels */
    
    #page {
      min-width: 100%;
    }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Face Masks</title>
  <nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">

    <label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
    <input type="checkbox" id="show-menu">

    <ul class="menu" id="menu">
      <li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png"><a href="http://go.jsp.co.uk/pages/go-head.html">Head Safety</a></li>
      <li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png"><a href="http://go.jsp.co.uk/pages/go-hearing.html">Hearing Safety</a></li>
      <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png"><a href="http://go.jsp.co.uk/pages/go-facemask.html">Face Masks</a></li>
      <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png"><a href="http://go.jsp.co.uk/pages/go-disposable.html">Disp. Masks</a></li>
      <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png"><a href="http://go.jsp.co.uk/pages/go-eyewear.html">Eye Safety</a></li>
      <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png"><a href="#">Contact</a></li>
    </ul>
  </nav>

</head>

<body>


  <div style="padding-top: 113px">
    <img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

你的文档中缺少jQuery（当我运行你的代码片段时，我得到Uncaught ReferenceError: $ is not defined。）

要添加jQuery，请将此行添加到<head>部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

答案 1 :(得分：0)

感谢大家对它进行了排序，但只是在桌面浏览器中没有设置为全宽。

相关问题
最新问题