折叠的导航栏跟随效果

html:

      

            

            learnning

            

      

      

            

                  

                        

                              

                              导航1

                              

                                        

                                        

  •                                           二级栏目

                                              

                                                    

                                                    

                                                          三级栏目

                                                    

                                                

                                                      三级栏目

                                                

                                                

                                                      三级栏目

                                                

                                          

                                    

                                    

  •                                           二级栏目

                                              

                                                    

                                                          三级栏目

                                                    

  •                                                 

                                                          三级栏目

                                                    

                                                    

                                                          三级栏目

                                                    

                                              

                                        

                                        

  •                                           二级栏目

                                              

                                                    

                                                          三级栏目

                                                    

                                                    

                                                          三级栏目

                                                    

                                                    

                                                          三级栏目

                                                    

                                              

                                        

  •                               

                            

                            

                                  导航1

                                  

                            

                            

                                  导航1

                                  

                            

                      

                

          

     

    css:

    *{

                      margin: 0;

                      padding: 0;

                      /*消除所有的边距*/

                }

                html,body{

                      width: 100%;

                      height: 100%;

                }

                .page{

                      /*表示整个网页*/

                      width: 100%;

                      height: 4043px;

                      background:url(../img/0.jpg) center no-repeat;

                      /*图片居中不平铺*/

                      border: 1px solid red;

                }

                .nav{

                      width:160px;

                      /*//宽度*/

                      height:205px;

                      /*//高度根据子元素来算*/

                      margin-top:-103px;

                      position:fixed;

                      left:10px;

                      top:50%;

                      /*//上下居中*/

                      font-family: "微软雅黑";

                }

                .nav-li{

                      /*一级框*/

                      width:160px;

                      height:auto;

                      border-bottom:1px solid #FFFFFF;

                      background:#333333;

                      text-align:center;

                      /*//水平居中*/

                      line-height:40px ;

                      /*//垂直居中*/

                      color:#FFFFFF;

                      font-size:16px;

                }

                .tittle{

                      /*一级内容*/

                      width:160px;

                      height:40px;

                }

                .nav-li ul{

                      /*二级框*/

                      width:160px;

                      height:auto;

                      background-color:#FFF;

                      display:none;

                      /*//一开始二级标题是隐藏的*/

                }

                .nav-li:hover  ul{

                      display:block;

                      /*//当鼠标移动到一级框上边时显示,取代上边的display:none;*/

                      cursor: pointer;

                      /*//改变鼠标的形状*/

                }

                

                

                .nav-li ul li{

                      /*二级内容*/

                      width:160px;

                      height:40px;

                      border-bottom: 1px dashed #666;

                      color: #333;

                      text-align: center;

                      line-height: 40px;

                      position:relative;

                      /*//父元素*/

                }

                .nav-li ul li:hover .list-3{

                      /*//当鼠标移动到二级内容上时,三级栏目显示*/

                      display:block;

                }

                

                .list-3{

                      /*三级框*/

                      /*//三级栏目*/

                      width:160px;

                      height:auto;

                      position:absolute;

                      left:160px;

                      top: 0;

                      display:none;

                }

                .list-3Dom{

                      /*三级内容*/

                      /*//三级栏目的子栏目*/

                      width: 160px;

                      height: 40px;

                      background:#444;

                      border-bottom: 1px solid #FFF;

                      text-align: center;

                      line-height: 40px;

                      color:#FFFFFF;

                }

    2、垂直导航栏菜单的制作(1)

          

                

                导航菜单

                

                *{

                      margin: 0;

                      padding: 0;

                }

                     ul{

                            width: 100px;

                            height:auto;

                            background-color:#CCCCCC;

                            border: 1px solid red;

                            list-style-type: none;

                      }

                      a{

                            text-decoration: none;

                            text-indent: 18px;/*使用缩进*/

                            display: block;/*将a标签变为块级元素*/

                            width: 100px;

                            height: 40px;

                            line-height: 40px;

                            font-size: 16px;

                            margin-bottom:1px solid red;

                      }

                      a:hover{

                            background-color: #00FF00;

                            color: #FFFFFF;

                      }

                

          

          

                

          

    3、水平菜单的制作

          

                

                导航菜单

                

                *{

                      margin: 0;

                      padding: 0;

                }

                      ul{

                            text-align: center;

                            height:40px;

                            background-color:#CCCCCC;

                            border: 1px solid red;

                            list-style-type: none;

                      }

                      li{

                             float: left;

                      }

                      a{

                            text-align: center;

                            text-decoration: none;

                            display: block;/*将a标签变为块级元素*/

                            width: 100px;

                            height: 40px;

                            line-height: 40px;

                            font-size: 16px;

                            margin-bottom:1px solid red;

                      }

                      a:hover{

                            background-color: #00FF00;

                            color: #FFFFFF;

                      }

                

          

          

                

          

    4、菜鸟教程垂直导航栏

          

                导航栏

                

                

                      ul{

                            margin:0px;

                            padding:0px;

                            width:15%;

                            height: 100%;

                            position: fixed;

                            overflow: auto;

                            list-style-type: none;

                            background-color:#CCC;

                      }

                      li{

                            text-align: center;

                            border-bottom: 1px solid black;

                      }

                      li:last-child{

                            border-bottom: none;

                      }

                      a{

                            display: block;/**/

                            text-decoration: none;

                      }

                      a:hover{

                            background-color: red;

                            color: white;

                      }

                      .active{

                            background-color:rgb(37, 162, 58);

                      }

                

          

          

                

          

    5、菜鸟教程导水平航栏

    (1)display:inlie;

          

                导航栏

                

                

                      ul{

                            margin:0px;

                            padding:20px;

                            width: 100%;

                            position: fixed;

                            list-style-type: none;

                            background-color:#CCC;

                      }

                      li{

                            padding: 16px;

                            display: inline;

                      }

                      a{

                            text-decoration: none;

                      }

                      a:hover{

                            background-color: red;

                            color: white;

                      }

                      .active{

                            background-color:rgb(37, 162, 58);

                      }

                

          

          

                

          

    (2) li { float:left; } a { display:block; width:60px; }

          

                导航栏

                

                

                      ul{

                            margin:0px;

                            padding:20px;

                            width: 100%;

                            

                            position: fixed;

                            list-style-type: none;

                            background-color:#CCC;

                      }

                      li{

                            float: left;

                            

                            padding: 16px;

                      

                      }

                      a{

                            display: block;

                            width: 60px;

                            

                            text-decoration: none;

                      }

                      a:hover{

                            background-color: red;

                            color: white;

                      }

                      .active{

                            background-color:rgb(37, 162, 58);

                      }

                

          

          

                

          

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    你可能感兴趣的:(前端)