响应式导航栏

yintaolaowanzi 发布于2019-08-29 16:10 / 870人阅读

摘要：响应式导航栏响应式导航栏就是在和在移动端的渲染形式不一样代码如下首页导航产品新闻我们样式代码如下运行结果如下图技术要点媒体查询当在手机的时候，需要先隐藏，点击的时候全部显示按钮的制作用到了的动画运用到了中的点击事件持续更新，欢迎大家指教

响应式导航栏

响应式导航栏就是在pc和在移动端的渲染形式不一样

HTML代码如下：




    
    
    
    <span class="nginx"><span class="hljs-attribute">Document</span></span>
    
    


    
        
        
        
    

    
        
            首页

            导航

            产品

            新闻

            我们

css样式

*{
    margin: 0;
    padding: 0;
}
body{
    background: #000;
}
ul{
    list-style: none;
}
a{text-decoration: none}
.bars{
    width: 60px;
    height: 60px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;  
}
.bars span{
    width: 30px;
    height: 2px;
    background: #000;
    position: absolute;
    left: calc(50% - 15px);
    top:calc(50% - 1px);
    transition: 0.1s;
}
.bars span:first-child{
    transform: translateY(-10px);
}
.bars span:last-child{
    transform: translateY(10px);
}
.bars.active span:first-child{
    transform: rotate(45deg);
}
.bars.active span:nth-child(2){
    transform: translateX(-100%);
    opacity: 0;
}
.bars.active span:last-child{
    transform: rotate(-45deg);
}
.nav{

    height: 60px;
    background: #fff;
    transition: .4s;
}
.nav ul{
    float: right;
    display: flex;
}
.nav ul li{
    border-right:1px solid rgba(0,0,0,.2);
    line-height: 60px;
}
.nav ul li:last-child{
    border: 0;
}
.nav ul li a{
    padding: 0 20px;
    display: block;
    color: #262626;
}
.nav ul li a:hover{
    background: #262626;
     color: #fff;
}
.nav.active{
    transform: translateX(-100%);
}
@media screen and (max-width:570px){
    .nav{
        height: 100vh;
    }
    .nav ul{
        width: 100%;
        display: inherit;
        text-align: center;
    }
    .nav ul li{
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
}

js代码如下

运行结果如下图

技术要点：

媒体查询：当在手机的时候，需要先隐藏，点击的时候全部显示

按钮的制作：用到了C3的动画

运用到了js中的点击事件

持续更新，欢迎大家指教！

GPU云服务器云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113570.html

响应式可弹出横向导航栏

摘要：响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在端时导航栏的内容可以通过来显示和隐藏，在移动端时也可以达到同样的效果。响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。效果如图所示：showImg(https://segme...

Harriet666 2019-08-29 16:10 评论0 收藏0
响应式可弹出横向导航栏

摘要：响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在端时导航栏的内容可以通过来显示和隐藏，在移动端时也可以达到同样的效果。响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。效果如图所示：showImg(https://segme...

entner 2019-08-23 10:27 评论0 收藏0
响应式可弹出横向导航栏

摘要：响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在端时导航栏的内容可以通过来显示和隐藏，在移动端时也可以达到同样的效果。响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。效果如图所示：showImg(https://segme...

chenatu 2019-08-02 11:04 评论0 收藏0
响应式导航栏

摘要：响应式导航栏响应式导航栏就是在和在移动端的渲染形式不一样代码如下首页导航产品新闻我们样式代码如下运行结果如下图技术要点媒体查询当在手机的时候，需要先隐藏，点击的时候全部显示按钮的制作用到了的动画运用到了中的点击事件持续更新，欢迎大家指教响应式导航栏响应式导航栏就是在pc和在移动端的渲染形式不一样 HTML代码如下： Document ...

OBKoro1 2019-08-23 10:27 评论0 收藏0
响应式导航栏

摘要：响应式导航栏响应式导航栏就是在和在移动端的渲染形式不一样代码如下首页导航产品新闻我们样式代码如下运行结果如下图技术要点媒体查询当在手机的时候，需要先隐藏，点击的时候全部显示按钮的制作用到了的动画运用到了中的点击事件持续更新，欢迎大家指教响应式导航栏响应式导航栏就是在pc和在移动端的渲染形式不一样 HTML代码如下： Document ...

王陆宽 2019-08-02 11:04 评论0 收藏0