当前位置:首页> 随笔> 前端开发

基础页面简单导航条样式以及响应式效果

:2022-03-31   :格展网络   :102

下面将详细介绍导航条的构成以及响应式样式内容首先搭建出具体的div框架
为了方便演示,将logo图片替换成了文字,并给导航整体加上了背景
骨架的原理是:header 全屏宽度,navbar-header 设置导航条版心,使内容居中显示
版心里面放置logo图标和a链接内容

  1.   <div class="header">

  2.         <div class="container-fluid">

  3.             <div class="navbar-header">

  4.                 <div class="brand">

  5.                     <a href="#" class="logo">logo</a>

  6.                 </div>

  7.                 <div class="menu" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

  8.                     <span></span>

  9.                 </div>

  10.                 <div class="navbar-nav">

  11.                     <ul class="fr">

  12.                         <li class="active"><a href="#">首页</a></li>

  13.                         <li><a href="#">关于我们</a></li>

  14.                         <li><a href="#">公司简介</a></li>

  15.                         <li><a href="#">产品中心</a></li>

  16.                         <li><a href="#">在线留言</a></li>

  17.                         <li><a href="#">联系我们</a></li>

  18.                     </ul>

  19.                 </div>

  20.             </div>

  21.         </div>

  22.     </div>

复制代码

下面,对于整体框架进行适当的美化,添加相应的CSS样式
因为导航中使用了ul和li,所以给他们清楚默认浮动,实际网站制作中还需要清除很多内容的浮动,以后再详细讲解
给头部设置高度,调整logo位置,然后给a链接添加默认颜色和鼠标悬浮颜色,设置行高使a链接居中,然后给li设置浮动成为一行
给li适当的margin或者给a标签一个padding值,让a标签分离开来

  1. <style>

  2.     body,html,ul,li {

  3.         margin: 0;

  4.         padding: 0;

  5.     }

  6.     .container-fluid {

  7.         width: 100%;

  8.         margin: 0 auto;

  9.         background-color: #f1f1f1;

  10.     }

  11.     .fr {

  12.         float: right;

  13.     }

  14.     a {

  15.         text-decoration: none;

  16.     }

  17.     .header {

  18.         height: 70px;

  19.     }

  20.     .navbar-header {

  21.         width: 1200px;

  22.         margin: 0 auto;

  23.         position: relative;

  24.     }

  25.     .brand {

  26.         line-height: 70px;

  27.         padding-left: 10px;

  28.     }

  29.     .brand > a {

  30.         color: #444;

  31.     }

  32.     .brand > a > img {

  33.         visibility: middle;

  34.     }

  35.     .navbar-nav {

  36.         position: absolute;

  37.         top: 0;

  38.         right: 0;

  39.     }

  40.     .navbar-nav > ul > li {

  41.         float: left;

  42.         list-style: none;

  43.         margin: 0 20px;

  44.     }

  45.     .navbar-nav > ul > li > a {

  46.         line-height: 70px;

  47.         color: #444;

  48.     }

  49.     .navbar-nav > ul > li > a:hover {

  50.         color: green;

  51.     }

  52.     @media (max-width:1200px) {

  53.         .navbar-header {

  54.             width: 100%;

  55.         }

  56.     }

  57.     @media (max-width:768px) {

  58.         .navbar-header {

  59.             width: 100%;

  60.         }

  61.         .brand {

  62.             padding-left: 30px;

  63.         }

  64.         .navbar-nav {

  65.             display: none;

  66.         }

  67.         .menu{display:block;float:right;cursor:pointer;height:40px;width:35px;position:absolute;top:10px;right:35px;}

  68.         .menu span{display:inline-block;width:35px;height:2px;background-color:#000;position:absolute;top:25px;left:0px;transition:background-color 0.2s ease-out 0.1s;}

  69.         .menu span:before{content:'';display:inline-block;width:35px;height:2px;background-color:#000;position:absolute;top:-12px;left:0px;transition:transform 0.1s ease-out,top 0.3s ease 0.2s;transform:rotate(0deg);}

  70.         .menu span:after{content:'';display:inline-block;width:35px;height:2px;background-color:#000;position:absolute;top:12px;left:0px;transition:transform 0.1s ease-out,top 0.3s ease 0.2s;transform:rotate(0deg);}

  71.         .menu.btn_click span{background-color:transparent;}

  72.         .menu.btn_click span:before{transition:top 0.3s ease,transform 0.1s ease-out 0.2s;transform:rotate(45deg);top:0px;}

  73.         .menu.btn_click span:after{transition:top 0.3s ease,transform 0.1s ease-out 0.2s;transform:rotate(-45deg);top:0px;}

  74.         .navbar-nav {

  75.             margin-top: 70px;

  76.         }

  77.         .navbar-nav > ul > li {

  78.             float: left;

  79.             list-style: none;

  80.             width: 100%;

  81.             border-bottom: 1px solid #ccc;

  82.             padding-left: 30px;

  83.             margin: 0;

  84.         }

  85.     }

  86.     </style>

复制代码

这样一个基础的导航条就形成了,当然,为了实现响应式效果,还需要给nav设置适当的样式在移动端显示对应效果,然后点击右上角菜单图标,实现隐藏显示功能。
最后,需要添加一些js实现上述描述的显示隐藏效果。

  1. <script src="https://www.91084.com/jquery/jquery-2.1.1.js"></script>

  2. <script>

  3. var i = 0;

  4. $(document).ready(function(){

  5.     $(".menu").click(function(){

  6.         $('.menu').toggleClass('btn_click');

  7.         if (i == 0) {

  8.             $(".navbar-nav").fadeIn();

  9.             i = 1;

  10.         } else {

  11.             $(".navbar-nav").fadeOut();

  12.             i = 0;

  13.         }

  14.     });

  15. });

  16. </script>