jquery制作导航条 - 作业栏目

Home > List of blog posts > jquery制作导航条

Blogger Information

Blog 40

fans 1

comment 0

visits 32448

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="icon" type="image/x-icon" href="2.png">
		<title>案例练习</title>
		<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    .box{
        width: 100%;
        height: 70px;
        background: #f5f5f5;
        box-shadow: 1px 1px 10px #ccc;
				line-height: 70px;
				position: relative;
    }
    form{
        width: 800px;
				margin: 0 auto;
				position: relative;
    }
    input{
        width: 800px;
        height: 35px;
        border:0;
        border-radius: 4px;
        padding-left: 15px;
    }
    form i{
        font-size:28px;
        position: absolute;
        top: 0;
        right: 10px;
    }
    span{
			position: absolute;
			width: 48px;
			height: 48px;
			display: block;
			background: url(show.jpg) -64px 168px;
			right: 0;
		}
		.menu{
			width: 1000px;
			height: 40px;
			line-height: 40px;
			margin:20px auto;
			background: #f5f5f5;
			position: relative;
		}
		.menu li{
			float: left;
			text-align: center;
			width: 100px;
			font-weight: bold;
		}
		.one li:hover{
			color: #fff;
			cursor: pointer;
		}
		.tiao{
			width: 100px;
			background:#ff6500;
			height: 5px;
			float: left;
			position: absolute;
			top: 40px;
		}
		.other:hover li{
			color: black;
		}
		.other li:hover{
			color: #ccc;
		}
</style>
<body>
    <div class="box">
        <form action="">
            <input type="text" placeholder="# 请输入一个关键词 #">
            <i class="layui-icon"></i>
				</form>
				<span></span>
		</div>
<ul class="menu one">
	<li name="0"><a >要闻</a></li>
	<li name="1"><a >国际</a></li>
	<li name="2"><a >国内</a></li>
	<li name="3"><a >社会</a></li>
	<li name="4"><a >军事</a></li>
	<li name="5"><a >娱乐</a></li>
	<li name="6"><a >体育</a></li>
	<li name="7"><a >汽车</a></li>
	<li name="8"><a >科技</a></li>
	<li class="other">
		<a >其他</a>
		<ul>
			<li>自然</li>
			<li>历史</li>
			<li>健康</li>
		</ul>
	</li>
	<div class="tiao"></div>
</ul>
</body>
</html>
<script>
	$(function(){
		$('input').focus(function(){
			$(this).css('box-shadow','0 0 5px #ff6500 inset');
		})
		$('input').blur(function(){
			$(this).css('box-shadow','');
		})
		$('.box').hover(
			function(){
				$(this).stop().animate({'top':'2px'},500);
			},function(){
				$(this).stop().animate({'top':'-65px'},500);
			}
		)
			//第一个导航
			$('.one>li').hover(function(){
				$(this).css('background','#ff6500');
				$('li:eq(9)').css('background','#f5f5f5');
				$x = parseInt($(this).attr('name'));
				$('.one>.tiao').stop().animate({left:100*$x+'px'},250);
			},function(){
				$(this).css('background','#f5f5f5');
				$('li:eq(9)').css('background','#f5f5f5');
				$('.one>.tiao').stop().animate({left: 0+'px'},200);
			})
			$('.other ul').hide();
			$('.other').hover(function(){
				$('.other ul').slideDown(100);
				$('.one>.tiao').hide();
			},function(){
				$('.other ul').slideUp(100);
				$('.one>.tiao').show();
			})
	})
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

第一步——布局前端页面

第二步——实现搜索框的隐藏与显现

		$('input').focus(function(){
			$(this).css('box-shadow','0 0 5px #ff6500 inset');
		})
		$('input').blur(function(){
			$(this).css('box-shadow','');
		})//选中搜索框时出现边框颜色的变化
		$('.box').hover(
			function(){
				$(this).stop().animate({'top':'2px'},500);
			},function(){
				$(this).stop().animate({'top':'-65px'},500);
			}//

第三步——实现导航条的变色

$(this).css('background','#ff6500');

第四步——实现导航条下提示条的跟随

$('.one>.tiao').stop().animate({left:100*$x+'px'},250);

第五步——实现导航条的下拉菜单

	$('.other ul').hide();
			$('.other').hover(function(){
				$('.other ul').slideDown(100);
				$('.one>.tiao').hide();
			},function(){
				$('.other ul').slideUp(100);
				$('.one>.tiao').show();
			})

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

js常用函数slice()和splice()(以及各类常用函数)——2019年1月16日

2019-01-20 10:28:05

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例