资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css3中怎么实现响应式导航

这篇文章将为大家详细讲解有关css3中怎么实现响应式导航，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业红古免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

html代码：

代码如下:


           
               
           
           

               
           

           
           

               
           

       

       


           Work In Progress

css3代码：

代码如下:

.visible-phone
       {
           display: none !important;
       }
       .visible-tablet
       {
           display: none !important;
       }
       .hidden-desktop
       {
           display: none !important;
       }
       .visible-desktop
       {
           display: inherit !important;
       }
       @media (min-width: 768px) and (max-width: 979px)
       {
           .hidden-desktop
           {
               display: inherit !important;
           }
           .visible-desktop
           {
               display: none !important;
           }
           .navbar
           {
               overflow: visible;
           }
           .visible-tablet
           {
               display: inherit !important;
           }
           .hidden-tablet
           {
               display: none !important;
           }
       }
       @media (max-width: 767px)
       {
           .hidden-desktop
           {
               display: inherit !important;
           }
           .visible-desktop
           {
               display: none !important;
           }
           .navbar
           {
               overflow: visible;
           }
           .visible-phone
           {
               display: inherit !important;
           }
           .hidden-phone
           {
               display: none !important;
           }
       }
       html
       {
           background: #4e4955;
       }
       body
       {
           padding: 0;
           margin: 0;
           font-family: 'Open Sans' , sans-serif;
           font-weight: 300;
           font-size: 1em;
       }
       *, *:after, *::before
       {
           -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
       }
       .navbar
       {
           position: relative;
           z-index: 99;
           width: 100%;
           min-width: 520px;
           height: 40px;
           max-height: 40px;
           background-color: #0b8c8c;
           background: -webkit-gradient(linear, left top, left bottom, from(#0b8c8c), to(#0b8787));
           background: -webkit-linear-gradient(top, #0b8c8c, #0b8787);
           background: -moz-linear-gradient(top, #0b8c8c, #0b8787);
           background: -ms-linear-gradient(top, #0b8c8c, #0b8787);
           background: -o-linear-gradient(top, #0b8c8c, #0b8787);
           border-bottom: 2px solid #0c9595;
           -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
           -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
       }
       .brand
       {
           float: left;
           padding: 0;
           margin: 0;
           padding: 1px 5px;
           display: inline-block;
       }
       .nav
       {
           padding: 0;
           margin: 0;
           display: block;
           text-align: left;
       }
       .nav li
       {
           position: relative;
           height: 40px;
           color: white;
           display: block;
           list-style: none;
           float: left;
           padding: 6px 15px;
       }
       .nav li a
       {
           color: white;
           text-decoration: none;
       }
       .nav li:first-child
       {
           border-left: 1px solid #097474;
       }
       .nav li:nth-last-child(3)
       {
           border-right: 1px solid #097474;
       }
       .nav li:hover, .active-drop
       {
           background: #0da4a4;
       }
       .nav li:hover ul.dropdown-menu, .active-drop ul.dropdown-menu
       {
           padding: 0;
           margin: 0;
           border: none;
           background: #0b8c8c;
           position: absolute;
           z-index: 98;
           top: 40px;
           right: 0;
           display: block;
           width: 250px;
       }
       .nav li:hover ul.dropdown-menu li, .active-drop ul.dropdown-menu li
       {
           width: 100%;
           line-height: 20px;
           border: none;
           margin: 0;
       }
       .nav li.admin
       {
           float: right;
       }
       .nav li.search
       {
           width: 45px;
           border-right: 1px solid #097474;
           overflow: hidden;
           -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
           -ms-transition: all 0.5s ease-in-out;
           -o-transition: all 0.5s ease-in-out;
           backface-visibility: hidden;
           -webkit-backface-visibility: hidden; /* Chrome and Safari */
           -moz-backface-visibility: hidden; /* Firefox */
           -ms-backface-visibility: hidden; /* Internet Explorer */
       }
       .nav li.search:hover, .active-search
       {
           width: 250px;
       }
       .navbar-search
       {
           position: absolute;
           top: 5px;
           left: 45px;
       }
       .navbar-search input
       {
           font-weight: 300;
           font-size: 1em;
           border: none;
           background: #075d5d;
           color: white;
           -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
           border-radius: 5px;
           -moz-background-clip: padding;
           -webkit-background-clip: padding-box;
           background-clip: padding-box;
       }
       .icon-angle-down
       {
           padding-left: 3px;
       }
       ul.dropdown-menu
       {
           display: none;
       }
       .mobile-dropdown
       {
           border-right: 1px solid #097474;
       }
       .mobile-dropdown:hover .mobile-menu
       {
           -webkit-transform: translate(0px, 0);
           -moz-transform: translate(0px, 0);
           -ms-transform: translate(0px, 0);
           -o-transform: translate(0px, 0);
           backface-visibility: hidden;
           -webkit-backface-visibility: hidden; /* Chrome and Safari */
           -moz-backface-visibility: hidden; /* Firefox */
           -ms-backface-visibility: hidden; /* Internet Explorer */
       }
       .mobile-dropdown:hover .mobile-admin
       {
           -webkit-transform: translate(0px, 0);
           -moz-transform: translate(0px, 0);
           -ms-transform: translate(0px, 0);
           -o-transform: translate(0px, 0);
           backface-visibility: hidden;
           -webkit-backface-visibility: hidden; /* Chrome and Safari */
           -moz-backface-visibility: hidden; /* Firefox */
           -ms-backface-visibility: hidden; /* Internet Explorer */
       }
       .mobile-admin
       {
           position: fixed;
           top: 40px;
           bottom: 0;
           right: 0px;
           display: block;
           width: 280px;
           background: #0b8c8c;
           overflow: hidden;
           -webkit-transform: translate(330px, 0);
           -moz-transform: translate(330px, 0);
           -ms-transform: translate(330px, 0);
           -o-transform: translate(330px, 0);
           -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
           -ms-transition: all 0.5s ease-in-out;
           -o-transition: all 0.5s ease-in-out;
       }
       .mobile-menu
       {
           position: fixed;
           top: 40px;
           bottom: 0;
           left: 0px;
           display: block;
           width: 300px;
           background: #0b8c8c;
           overflow: hidden;
           -webkit-transform: translate(-330px, 0);
           -moz-transform: translate(-330px, 0);
           -ms-transform: translate(-330px, 0);
           -o-transform: translate(-330px, 0);
           -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
           -ms-transition: all 0.5s ease-in-out;
           -o-transition: all 0.5s ease-in-out;
       }
       .admin-wrapper, .menu-wrapper
       {
           overflow-y: scroll;
           width: 390px;
           height: 100%;
       }
       .mobile-admin ul.mobile-nav, .mobile-menu ul.mobile-nav
       {
           position: relative;
           right: 40px;
           top: 0;
           font-size: 1.2em;
           font-weight: 400;
           width: 100%;
           border-left: 1px solid #0c9f9f;
       }
       .mobile-admin ul.mobile-nav li, .mobile-menu ul.mobile-nav li
       {
           border: none;
           padding-bottom: 0px;
           border-top: 1px solid #0c9f9f;
           width: 100%;
           position: relative;
           height: 100%;
       }
       .mobile-menu ul.mobile-nav li:hover
       {
           background: #0c9595;
       }
       .mobile-menu ul.mobile-nav li:hover ul.dropdown-menu
       {
           padding: 0;
           margin: 0;
           border: none;
           background: #0b8c8c;
           position: relative;
           z-index: 98;
           top: 0;
           right: 15px;
           display: block;
           width: 100%;
       }
       .mobile-menu ul.mobile-nav li:hover ul.dropdown-menu li
       {
           width: 100%;
           line-height: inherit;
           border-top: 1px solid #0c9f9f;
           margin: 0;
       }
       .mobile-menu ul.mobile-nav li ul.dropdown-menu
       {
           display: block;
           overflow: hidden;
           height: 100%;
           padding: 0;
           margin: 0;
           border: none;
           background: #0c9595;
           position: relative;
           z-index: 98;
           top: 0;
           right: 15px;
           width: 100%;
       }
       .mobile-menu ul.mobile-nav li ul.dropdown-menu li
       {
           font-size: .9em;
           font-weight: 300;
           display: inline-block;
           width: 100%;
           line-height: inherit;
           border-top: 1px solid #0c9f9f;
           margin: 0;
       }

关于css3中怎么实现响应式导航就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


文章名称：css3中怎么实现响应式导航
链接URL：http://cdkjz.cn/article/gpjdcg.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
内江做网站手机网站建设网页改版SSL证书名片印刷佑馨产后护理内江广告高端定制网站设计成都定制网站h5响应式网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图