用jquery 写的 带有汉堡图标的导航(新手第一次尝试)






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
    </style>
</head>
<body>
    
    <div id="carousel">
        
        <nav>
           
            <ul id="nav">
            <li>Home</li>
            <li>导航1 <i class="fa fa-angle-down"></i>
                <ul><li>1</li>
                    <li>1</li>
                    <li>1</li>
                </ul>
            </li>
            <li>导航2 <i class="fa fa-angle-down"></i>
                <ul><li>2</li>
                    <li>2</li>
                    <li>2</li>
                </ul>
            </li>
            <li>导航3 <i class="fa fa-angle-down"></i>
                <ul><li>3</li>
                    <li>3</li>
                    <li>3</li>
                </ul>
            </li>
            <li>导航4 <i class="fa fa-angle-down"></i>
                <ul><li>4</li>
                    <li>4</li>
                    <li>4</li>
                </ul>
            </li>
        </ul>
        
        </nav>
        <span><i class="fa fa-bars"></i></span>
    </div>
    <main></main>
    <footer></footer>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="js/index.js">
   
</script>
</html>

 $(document).ready(function(){
        $('#nav li').first().css({'color':'red'});
        
        $('#nav>li').on('click',function(){
            
              $(this).children().not('i').toggle(300);
            
        });
         $('#nav>li>ul>li').on('mouseover',function(){
            
              $(this).css({'color':'red'});
            
        });
        $('#nav>li>ul>li').on('mouseout',function(){
            
              $(this).css({'color':'#aaa'});
            
        });
        
        
    })
    var navColor=0;
    $('.fa-bars').on('click',function(){   
         navColor++;
        $('#nav').slideToggle(900);
        
        $('nav').animate({'height':400+'px'});
       if( navColor%2==0){
            $('nav').animate({'height':100+'px'});
       }
                                        
                
                         })


css代码如下:

  *{
            margin: 0;
            padding: 0;
        }
        nav{
            background-color: black;
            opacity: 0.65;
            margin: 0 auto;
            width: auto;
            height: 100px;
            color: white;
            font-size: 20px;
        }
        ul li{
            list-style-type: none;
            
        }
        #nav>li{
            float: left;
            margin-right: 50px;
            position:relative;
            top:40px;
        
        }
        
        #nav>li>ul{
            background-color: black;
            padding: 5px;
            display: none;
        }
       
       
        #carousel{
            background-image: url('image/1.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size:cover;
            width: auto;
            height: 500px;
        }
        .fa-bars{
            display: none;
            
        }

        @media (max-width:1920px){
            
            #nav{
                padding-left: 500px;
            }
            
        }
        @media(max-width:1100px){
            #nav{
                padding-left: 300px;
            }
        }
  

         @media(max-width:960px){
            #nav{
             float: none;
             width:80px;
             height:300px;
             padding:0px;
             position:absolute;
             top:50px;
             right: 0%;
             display:none; 
            
             
        }
             #nav>li{
                 margin-bottom: 17px;
                 width:80px;
                
             }
        
        .fa-bars{
            
            position: absolute;
            top: 7%;
            right:4%;
            color:white;
            font-size: 30px;
            display: block;
            
        }
            
        }

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

用jquery 写的 带有汉堡图标的导航(新手第一次尝试)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭