jquery 导航栏demo(竖)

最新推荐文章于 2024-04-28 13:41:52 发布
最新推荐文章于 2024-04-28 13:41:52 发布
阅读量635 收藏
点赞数 

<!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;
}

li{
	list-style:none;
}

a{
	text-decoration:none;
	color:#333;
	font-size:12px;
}

.box{
	border:solid 1px #ccc;
	width:123px;
	margin:20px auto;
}

.box a{
	padding-left:15px;
	display:block;
	width:88%;
	height:20px;
    line-height:20px;
}

.current{
	background:#E2E0E0;
}

.box ul li ul{
	display:none;
}
</style>
<script>
$(function(){
	$('li a').click(function(){
		$('li a').removeClass('current');
		$(this).addClass('current');
                $(this).next().slideToggle('slow');
                //$(this).next().toggle('slow');
		//$(this).parent().parent().prev().addClass('current'); 
	});
});
</script>
</head>
<body>
<div class="box">
	<ul>
		<li> 
			<a href="#">衬衫</a>
			<ul> 
				<li><a href="#">短袖衬衫</a></li>
				<li><a href="#">长袖衬衫</a></li>
				<li><a href="#">短袖T恤</a></li>
				<li><a href="#">长袖T恤</a></li>
			</ul> 
		</li> 

		<li> 
			<a href="#">卫衣</a>
			<ul> 
				<li><a href="#">开襟卫衣</a></li>
				<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>
				<li><a href="#">免烫卡其裤</a></li>
			</ul> 
		</li> 
	</ul>
</body>
</html>


或者

<!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;
}

li{
	list-style:none;
}

a{
	text-decoration:none;
	color:#333;
	font-size:12px;
}

.box{
	border:solid 1px #ccc;
	width:123px;
	margin:20px auto;
}

.box a{
	padding-left:15px;
	display:block;
	width:88%;
	height:20px;
    line-height:20px;
}

.current{
	background:#E2E0E0;
}

.box ul li ul{
	display:none;
}
</style>
<script>
$(function(){
	$('li a').click(function(){
		$('li a').removeClass('current');
		$(this)
			.addClass('current')
			.next().slideToggle('slow');
	});
});
</script>
</head>
<body>
<div class="box">
	<ul>
		<li> 
			<a href="#">衬衫</a>
			<ul> 
				<li><a href="#">短袖衬衫</a></li>
				<li><a href="#">长袖衬衫</a></li>
				<li><a href="#">短袖T恤</a></li>
				<li><a href="#">长袖T恤</a></li>
			</ul> 
		</li> 

		<li> 
			<a href="#">卫衣</a>
			<ul> 
				<li><a href="#">开襟卫衣</a></li>
				<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>
				<li><a href="#">免烫卡其裤</a></li>
			</ul> 
		</li> 
	</ul>
</div>
</body>
</html>


效果图：


elegancy_
关注
导航栏（横向、竖向折叠）
03-20
从网上下载整理的里面有二十几种特效，适合各种网站的导航，很实用的并且效果很好看
jq+css实现竖向导航栏
12-04
jq+css实现竖向导航栏.
简单的网页制作 之竖向导航栏的制作
最新发布
m0_57095106的博客
04-28 469
【代码】简单的网页制作 之竖向导航栏的制作。
CSS 竖导航 样式
08-14
这是一个易用的， 竖导航栏， 可以用在sidebar里面， 欢迎广大朋友下载！
垂直导航栏
小白小白从不日别的博客
04-02 6224
垂直导航栏这一类导航栏在很多网站上都是很常见的，比如京东 因此可以说是一个前端人员必须要会的吧 在这里目前给出了两种方式去实现：第一种就是利用html+css实现，这里模仿的是小米官网的垂直导航、第二种方式就是利用html+css+js实现 不管是第一种还是第二种主要都是利用定位来实现的 先来看第一种吧 先准备相关素材以及一些基础的css样式类，素材这里省略，基础的样式类如下： * { margin: 0; padding: 0; } ul,li { list-s
jquery下拉竖导航菜单代码demo
05-19
下拉菜单是一种常见的网页元素，用于组织和显示多个链接或选项，通常出现在导航栏中。用户点击主菜单项时，关联的子菜单会从下方滑出，提供更多的导航选择。在移动设备上，下拉菜单可以节省宝贵的屏幕空间，使页面...
jQuery插件集之(导航栏)+Demo
02-24
在本文中，我们将深入探讨jQuery插件在创建高效、动态导航栏方面的作用，以及如何结合提供的Demo和源码实现多级导航栏效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使开发者...
JavaScript类似米柚网jQuery下拉菜单栏demo
05-19
这个"JavaScript类似米柚网jQuery下拉菜单栏demo"提供了实现这一功能的实例代码，旨在帮助开发者快速构建响应式的导航菜单，同时保证在主流浏览器上的兼容性。 **一、jQuery简介** jQuery是一款轻量级的JavaScript...
超炫的jquery仿flash导航栏特效
10-25
在这个文档中，演示了如何使用jQuery为导航栏添加动态效果。 ### 知识点二：使用jQuery实现动画效果 在文档提供的代码示例中，使用了jQuery的animate()方法来创建平滑的动画效果。例如，当鼠标悬停在菜单项上时，...
左侧竖直tab导航栏
12-04
左侧竖直tab导航栏, 竖直选项卡 Verticaltablayout+Viewpager解决有时候需要垂直的tab导航,并带切换动画,直接可以拿来用
（web）竖状导航菜单（PHP/JSP/ASP）
01-08
漂亮的竖状导航菜单 适合用于WEB开发 JSP PHP ASP都可以引用 初学者 给力
字体页面导航
06-25
利用多媒体技术，显示页面导航，可插入背景图片，点击文字可链接到对应的效果页面
HTML5实现图标会旋转的竖向导航菜单.rar
07-10
HTML5实现图标会旋转的竖向导航菜单，竖直排列的网站导航，当鼠标悬停于图标时，图标会旋转，称之为旋转菜单也不为过。
竖导航特效实现
12-17
竖导航特效实现 竖导航特效实现 竖导航特效实现
web Tab页和竖直导航菜单
tdeclipse的专栏
03-26 1289
效果图： 用到tab插件Sweet AJAX Tabs With jQuery 1.4 & CSS3,地址http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/ 导航菜单 是用html+css+jquery 弹出框是用jquery.bpopup.min.js插件 地址：http://dinbror.dk/bpopup
css实现横向导航和竖向导航栏的方法（代码）
weixin_30362233的博客
11-21 3281
一、竖着的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul{ list-style-type:none; margin:0; padding:0; } a{ displ...
精巧的导航栏样式
k912120的博客
12-13 306
想仿一遍的导航栏样式：https://tympanus.net/Development/CreativeLinkEffects/ css实现的图标：The Shapes of CSS 
html5 css3超多款竖直菜单导航特效.rar
07-10
html5 css3超多款竖直菜单导航特效，Simple Effects for Drop-Down Lists，引入了jquery插件来辅助实现，效果果真不错。一共包括了6款动画方式不同的菜单，有左右滑入的菜单，有排列成半圆形的菜单，还有即时动画切入的菜单效果，你可选择使用喜欢的款式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值