Question

我遇到了麻烦，我已经查看了其他人的问题和答案，我找到了一些有用的信息但是我很难将它应用到我的菜单中。我正在寻找我当前的菜单，它是纯CSS和HTML，没有其他脚本或代码可以完全响应和移动友好。即，我想确保当浏览器窗口大小减小时，菜单也会变小，然后变为可以点击以展开的移动按钮。

我希望有人可以向我展示我需要使用正确的类名等添加到我的确切代码。我已经通过尝试适应其他人的答案尝试并失败了。我知道有很多地方会建造＃34;一个免费并给我代码，但我希望我的菜单的桌面版本100％相同我只需要它适当缩放到较小的屏幕。

我也不想使用jquery javascript或其他任何非HTML5或CSS3的代码，代码会插入到我的index.php和css中，进入我的外部css文件，

从我的索引页面：

     <!-- NAV-BAR-START --> 

  <div id="navbar"><div id='cssmenu'>
     <ul>
       <li><a href='/?p=home'><span>Home</span></a></li>
   <li class='has-sub'><a href='/?p=gallery'><span>Gallery</span></a>
  <ul>
     <li><a href='/?p=photos'><span>Photos</span></a></li>
     <li><a href='/?p=videos'><span>Videos</span></a></li>
     <li><a href='/?p=audio'><span>Audio</span></a></li>
   </ul>
 </li>
 <li class='has-sub'><a href='/?p=ian-milne'><span>Ian Milne</span></a>
  <ul>
      <li><a href='/?p=about'><span>About Ian</span></a></li>
      <li><a href='/?p=testimonials'><span>Testimonials</span></a></li>
     <li class='last'><a href='/?p=location'><span>Location</span></a></li>
   </ul>
 </li>
  <li><a href='/?p=events'><span>Events</span></a></li>
   <li><a href='/?p=bookings'><span>Bookings</span></a></li>
<li class='last'><a href='/?p=contact'><span>Contact</span></a></li>
< /ul> 
 </div></div>

  <!-- NAV-BAR-END -->

关联的CSS：

/* CSS DROPDOWN MENU */

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
  text-align:center;

}
#cssmenu ul {
  background: #000dfa;
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  border-radius: 8px 8px 0px 0px;
  -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
}
#cssmenu li {
  float: none;
  padding: 0px 0px 0px 15px;
  display: inline-block;
}
#cssmenu li a {
  color: #ffffff;
  display: block;
  font-weight: normal;
  line-height: 50px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu li a:hover {
  background: #000894;
  color: #ff8400;
  text-decoration: none;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
#cssmenu ul li:hover a {
  background: #000894;
  color: #ff8400;
  text-decoration: none;
}
#cssmenu li ul {
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 200px;
  z-index: 200;
}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
  background: #000dfa;
  /*this is where the rounded corners for the dropdown disappears*/

}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 50px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover a {
  border: 0px;
  color: #ff8400;
  text-decoration: none;
  background: #000894;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}

我现在把它放到jsfiddle以及那些要求

的人

http://jsfiddle.net/GregTimeassistant/WLP8h/

Answer 1

您可以为每个媒体查询设置样式。只需为每种情况复制/粘贴所有样式。您可以调整浏览器窗口的大小，以便查看每个媒体查询的结果。只需进行大量实验，您就会发现根据每种宽高比定制设计很容易。

@media (max-width: 600px) {
 #cssmenu {
  /*
  copy styles here
  */
 }
}

查看此示例，其中涵盖了许多设备（但需要对新的高清智能手机和平板电脑进行一些更新）。 https://gist.github.com/marcobarbosa/798569

如何使我的当前CSS下拉菜单响应和移动友好？

1 个答案: