h5+css3 响应式滑动菜单

最新推荐文章于 2024-05-05 16:18:19 发布

万能守恒定律

最新推荐文章于 2024-05-05 16:18:19 发布

阅读量904

点赞数 8

分类专栏： h5+c3 文章标签： css3 前端 javascript html5

本文链接：https://blog.csdn.net/qq_50951790/article/details/127685886

版权

h5+c3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是响应式滑动菜单，可以理解为，在不同的大小范围下，能显示出不同的布局效果

可以先看看效果图（3种不同的大小下的效果）

最大

中等

最小

而如何得到这种效果，主要是操纵css的功劳，下面会细讲

首先创建一个文件夹，分别有js,css,image(图片自己找哟),和一个index.html

js文件夹里面，主要是一个jquery.js(此处会使用jquery)

image文件夹里面是自己找的图片

css文件夹里面代码如下


*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
    font-size: 15px;
    padding: 0;
    margin: 0;
}

/* 第一种范围 */
@media all and (min-width:800px){
    .clearfix:after {
        content: " ";
        display: block;
        clear: both;
    }
    body {
        font-family: 'Lato', Calibri, Arial, sans-serif;
        color: #89867e;
        background: #f9f9f9;
    }
    
    a {
        color: #333;
        text-decoration: none;
    }
    
    li:hover{
        transition: all 1.2s ease-in-out;
        transform: rotate(0deg) scale(1.5);
    }
    a:hover {
        color: #fff;
        transition: all 1.2s ease-in-out;
        transform: rotate(0deg) scale(1.2);
        text-shadow:  2px 2px 2px rgb(213, 213, 213);
    }
    .main, .container > header {
        width: 100%;
        margin: 0 auto;
        padding: 30px;
    }
    .main {
       
        max-width: 1024px;
        min-height: 600px;
    }
    .container > header {
        text-align: center;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.01);
    }
    .container > header h1 {
        font-size: 30px;
        line-height: 1.3;
        margin: 0;
        font-weight: normal;
    }
    
    .nav ul {
        display: flex;
        justify-content: center;
        max-width: 1240px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 24px;
        font-weight: 300;
    }
    .nav li span {
        margin-top: 10px;
        text-align: center;
        width: 100px;
        height: 50px;
        display: block; 
    }
    .nav a {
        display: block;
        color: rgba(249, 249, 249, .9);
        text-decoration: none;
    }
    #imgLogo{
        display: none;
    }
    .nav img {
        background-color: rgb(223, 223, 223,0.3);
        border-radius: 50%;
    }
    a, button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    .nav li:nth-child(6n+1) {
        background: rgb(208, 101, 3);
    }
    
    .nav li:nth-child(6n+2) {
        background: rgb(233, 147, 26);
    }
    
    .nav li:nth-child(6n+3) {
        background: rgb(22, 145, 190);
    }
    
    .nav li:nth-child(6n+4) {
        background: rgb(22, 107, 162);
    }
    .nav li:nth-child(6n+5) {
        background: rgb(27, 54, 71);
    }
    .nav li:nth-child(6n+6) {
        background: rgb(21, 40, 54);
    }
}

/* 第二种范围 */
@media all and (min-width:520px) and (max-width:799px){
    .clearfix:after {
        content: " ";
        display: block;
        clear: both;
    }
    body {
        font-family: 'Lato', Calibri, Arial, sans-serif;
        color: #89867e;
        background: #f9f9f9;
    }
    
    a {
        color: #333;
        text-decoration: none;
    }
    
    .nav a:hover {
        color: #fff;

    }
    .main, .container > header {
        width: 100%;
        margin: 0 auto;
        padding: 30px;
    }
    .main {
        max-width: 1024px;
        min-height: 600px;
    }
    .container > header {
        text-align: center;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.01);
    }
    .container > header h1 {
        font-size: 30px;
        line-height: 1.3;
        margin: 0;
        font-weight: normal;
    }
    
    .nav ul {
        display: flex;
        flex-wrap: wrap;
        min-width: 600px;  
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 24px;
        font-weight: 300;
    }
    .nav li span {
        margin-top: 10px;
        text-align: center;
        width: 150px;
        height: 50px;
        display: block;
        float: left;
    }
    .nav a {
        display: block;
        color: rgba(249, 249, 249, 0.5);
        text-decoration: none;
    }
    #imgLogo{
        display: none;
    }
    .nav img {
        background-color: rgb(223, 223, 223,0.2);
        border-radius: 50%;
    }
    a, button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    .nav li:nth-child(6n+1) {
        background: rgb(208, 101, 3);
    }
    
    .nav li:nth-child(6n+2) {
        background: rgb(233, 147, 26);
    }
    
    .nav li:nth-child(6n+3) {
        background: rgb(22, 145, 190);
    }
    
    .nav li:nth-child(6n+4) {
        background: rgb(22, 107, 162);
    }
    .nav li:nth-child(6n+5) {
        background: rgb(27, 54, 71);
    }
    .nav li:nth-child(6n+6) {
        background: rgb(21, 40, 54);
    }
}

/* 第三个范围 */
@media all and (max-width:519px){
    .clearfix:after {
        content: " ";
        display: block;
        clear: both;
    }
    body {
        font-family: 'Lato', Calibri, Arial, sans-serif;
        color: #89867e;
        background: #f9f9f9;
    }
    
    a {
        color: #333;
        text-decoration: none;
    }
    
   .nav a:hover {
        color: #fff;
    }

    .main, .container > header {
        width: 100%;
        margin: 0 auto;
        padding: 30px;
    }
    .main {
        max-width: 1024px;
        min-height: 600px;
    }
    .container > header {
        text-align: center;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.01);
    }
    .container > header h1 {
        font-size: 30px;
        line-height: 1.3;
        margin: 0;
        font-weight: normal;
    }
    
    .nav ul {
        max-width: 519px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 24px;
        font-weight: 300;
        /* display: none; */
    }
    .nav li span {
        /* display: block; */
        display: inline;
        margin-left: 20px;
        margin-top: 10px;
    }
    .nav li{
        height: 50px;
        
    }
    .nav a {
        display: block;
        color: rgba(249, 249, 249, 0.5);
        text-decoration: none;
    }
    #imgLogo{
        
    }
    .nav img {
        background-color: rgb(223, 223, 223,0.2);
        margin-top: 10px;
    }
    a, button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    .nav li:nth-child(6n+1) {
        background: rgb(208, 101, 3);
    }
    
    .nav li:nth-child(6n+2) {
        background: rgb(233, 147, 26);
    }
    
    .nav li:nth-child(6n+3) {
        background: rgb(22, 145, 190);
    }
    
    .nav li:nth-child(6n+4) {
        background: rgb(22, 107, 162);
    }
    .nav li:nth-child(6n+5) {
        background: rgb(27, 54, 71);
    }
    .nav li:nth-child(6n+6) {
        background: rgb(21, 40, 54);
    }
}

我们可以看到，控制大小变化主要的属性就是@media这样的方式来控制不同范围下的css布局

最后index.html内容如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>响应式滑动菜单</title>
    <link rel="stylesheet" type="text/css" href="css/default.css"/>
</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>