Design the page using responsive layout - sliding menu
Show results
1) When the width is greater than 800px, there will be a shadow around the image. When the mouse is moved in, the shadow changes from large to small and finally looks like the picture shown, and the height of each menu item changes;
2) The width is between 520px and 799px, and the transparency of each menu increases when the mouse is moved in;
3) Width Between 520px and 799px, the transparency increases when the mouse moves into each menu;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>响应式滑动菜单</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<script src="./js/jquery-1.12.4.js"></script>
<style>
@media screen and (min-width:800px){
.nav ul{
display: flex;
flex-wrap:wrap;
align-items: flex-start;
}
.nav li{
cursor: pointer;
width: 16.6%;
flex: 1 1 auto;
text-align: center;
display: flex;
justify-content: center;
}
.nav ul li a{
display: flex;
height: 200px;
align-items: center;
justify-content: center;
flex-direction: column;
color: #c8c8c8;
}
.nav ul li:hover a{
height: 230px;
color: #fcfcfc;
font-size: 28px;
}
.nav ul li:hover a span{
margin: 20px 0;
}
.icon{
width: 40px;
height: 40px;
line-height: 50px;
background-color: rgb(218, 218,218,0.4);
border-radius: 50%;
}
.nav ul li:hover a .icon{
box-shadow: 0px 0px 0px 3px rgb(238, 238, 238);
border-radius: 50%;
width: 50px;
height: 50px;
line-height: 60px;
}
}
@media screen and (min-width:520px) and (max-width:799px){
.nav ul{
display: flex;
flex-wrap:wrap;
}
.nav li{
/* cursor: pointer; */
width: 50%;
height: 80px;
text-align: center;
display: flex;
justify-content: center;
}
.nav ul li a{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: space-between
flex-direction: column;
color: #c8c8c8;
padding: 0 30px;
background-color: rgb(245, 245, 245,0.2);
}
.nav ul li:hover a{
color: #fcfcfc;
background-color: rgb(245, 245, 245,0.06);
}
.icon{
width: 40px;
height: 40px;
line-height: 50px;
background-color: rgb(218, 218,218,0.4);
border-radius: 50%;
}
.nav ul li:hover a .icon{
box-shadow: 0px 0px 0px 3px rgb(223, 223, 223,0.6);
border-radius: 50%;
}
}
@media screen and (max-width:519px){
#imgLogo{
display: block;
}
#ulList{
display: none;
}
.nav ul{
display: flex;
flex-wrap:wrap;
}
.nav li{
cursor: pointer;
width: 100%;
height: 80px;
text-align: center;
display: flex;
justify-content: center;
}
.nav ul li a{
display: flex;
width: 100%;
height: 100%;
align-items: center;
color: #f3f3f3;
margin-left: 15px;
background-color: rgb(245, 245, 245,0.15);
}
.nav li a span{
margin: 0 20px;
}
.nav li:hover a{
color: #ffffff;
background-color: rgb(245, 245, 245,0.06);
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>响应式滑动菜单</h1>
</header>
<div class="main clearfix">
<nav id="menu" class="nav">
<img id="imgLogo" src="images/1.png" alt=""/>
<ul id="ulList">
<li>
<a href="#">
<span class="icon">
<img src="images/2.png" alt=""/>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="images/3.png" alt=""/>
</span>
<span>Services</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="images/4.png" alt=""/>
</span>
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="images/5.png" alt=""/>
</span>
<span>Blog</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="images/6.png" alt=""/>
</span>
<span>The team</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="images/7.png" alt=""/>
</span>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('#imgLogo').click(function () {
$('#ulList').toggle();
})
</script>
</body>
</html>