响应式菜单-自动折叠点击左侧显示菜单-网页编程网

当前位置：主页 >> html5 >> 正文

响应式菜单-自动折叠点击左侧显示菜单

阅读：15668 输入：2018-10-03 21:31:12

<html><head>
<style>
#sildeMenu{
display:none;
position:fixed;top:0;left:0;width:90%;height:100%;background-color:#373737;z-index:9999;
overflow:scroll;
}
#sildeMenu ul{
list-style:none;}
#sildeMenu ul li a{
float:left;
color:white;
margin:1px 1px;
padding:3px;
text-align: center;
text-decoration: none;
text-align: left;
font-size: 17px;

}
</style>
<style>body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
font-size:15px
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}</style>
<script>
function showMenu() {
var x = document.getElementById("sildeMenu");
x.style.display=(x.style.display != "block")?"block":"none";
}</script>
</head><body><div class="topnav" id="myTopnav">
<a href="#home">主页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系方式</a>
  <a href="javascript:void(0);" class="icon" onclick="showMenu()">M</a>
</div>
<div id="sildeMenu">
	<ul>
<li><a href="list.php?id="/>dddfffdfdfd</a></li>
<li><a href="list.php?id="/>dddfffdfdfd</a></li>
<li><a href="list.php?id="/>dddfffdfdfd</a></li>
	</ul>
</div>
重置浏览器查看实例。重置浏览器查看实例。重置浏览器查看实例。重置浏览器查看实例。重置浏览器查看实例。重置浏览器查看实例。重
</body></html>

上一篇：响应式布局入门只看此一例
下一篇：MySQL无法重启报错Warning: World-writable config file ‘/etc/my.cnf’

相关阅读: 响应式菜单-自动折叠; CSS3电脑端、移动端自适应及媒体查询; 手机端自适应缩放显示 js