导航栏（jquery,css）

最新推荐文章于 2022-10-22 16:07:35 发布

elegancy_

最新推荐文章于 2022-10-22 16:07:35 发布

阅读量286

点赞数

本文详细介绍了使用jQuery和CSS创建响应式导航栏的过程，包括HTML结构、CSS样式以及JavaScript交互效果，展示了如何实现下拉菜单功能。

效果图：

jquery：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<script src="jquery/jquery-1.8.2.min.js"></script>

<style>
*{
    padding:0;
    margin:0;
}

.nav{
    width:100%;
    height:40px;
    background:#E4393C;
}

.containter{
    width:70%;
    margin:0 auto;
}

nav ul li{
    display:inline-block;
}

nav ul li a{
    display:block;
    color:#fff;
    text-decoration:none;
    line-height:40px;
    text-align:center;
    width:85px;
}

nav ul li a:hover{
    transition:background 0.2s linear;
    background:#A40000;
}

nav ul li ul{
    display:none;
    position:absolute;
}

nav ul li ul li{
    display:block;
}

nav ul li ul li a{
    background:#E4393C;
}
</style>
<script>
$(function(){  
        $('nav li').hover(  
            function(){
                //$(this).find('ul').show();   
                $(this).find('ul').slideDown('slow');  
            },  
            function(){  
                //$(this).find('ul').hide();
                $(this).find('ul').slideUp('slow');  
            }  
        );  
    });  
</script>
</head>
<body>
<div class="nav">
    <nav class="containter">
        <ul>
            <li><a href>首页</a></li>
            <li>
            
                <a href>首页</a>
                <ul>
                    <li><a href>首页</a></li>
                    <li><a href>首页</a></li>
                    <li><a href>首页</a></li>
                </ul>
            </li>
            <li>
                <a href>首页</a>
                <ul>
                        <li><a href>首页</a></li>
                        <li><a href>首页</a></li>
                        <li><a href>首页</a></li>
                </ul>
            </li>
            <li><a href>首页</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

css：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
</head>
<style>
*{
	padding:0;
	margin:0;
}

.nav{
	width:100%;
	height:40px;
	background:#E4393C;
}

.containter{
	width:70%;
	margin:0 auto;
}

nav ul li{
	display:inline-block;
}

nav ul li a{
	display:block;
	color:#fff;
	text-decoration:none;
	line-height:40px;
	text-align:center;
	width:85px;
}

nav ul li a:hover{
	transition:background 0.2s linear;
	background:#A40000;
}

nav ul li ul{
	display:none;
	position:absolute;
}

nav ul li ul li{
	display:block;
}

nav ul li ul li a{
	background:#E4393C;
}

nav ul li:hover ul{
	display:block;
}
</style>
</head>
<body>
<div class="nav">
	<nav class="containter">
		<ul>
			<li><a href>首页</a></li>
			<li>
				<a href>首页</a>
				<ul>
					<li><a href>首页</a></li>
					<li><a href>首页</a></li>
					<li><a href>首页</a></li>
				</ul>
			</li>
			<li>
				<a href>首页</a>
				<ul>
						<li><a href>首页</a></li>
						<li><a href>首页</a></li>
						<li><a href>首页</a></li>
				</ul>
			</li>
			<li><a href>首页</a></li>
		</ul>
	</nav>
</div>
</body>
</html>