jquery实现导航栏效果

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<div class="box">

<ul class="menu">

<li class="level1">

<a href=#>衬衫</a>

<ul class="level2">

<li><a href="none">短袖衬衫</a></li>

<li><a href="none">长袖衬衫</a></li>

<li><a href="none">短袖T桖</a></li>

<li><a href="none">长袖T桖</a></li>

</ul>

</li>

<li class="level1">

<a href=#>卫衣</a>

<ul class="level2">

<li><a href="none">开襟卫衣</a></li>

<li><a href="none">套头卫衣</a></li>

<li><a href="none">运动卫衣</a></li>

<li><a href="none">童装卫衣</a></li>

</ul>

</li>

<li class="level1">

<a href=#>裤子</a>

<ul class="level2">

<li><a href="none">短裤</a></li>

<li><a href="none">休闲裤</a></li>

<li><a href="none">牛仔裤</a></li>

<li><a href="none">免烫卡其裤</a></li>

</ul>

</li>

</ul>

</div>

<script src="Z:/www/nubia_insurance/res/js/jquery.js?v=1"></script>

<script type="text/javascript">

$(‘.level1 > a‘).click(function(){

$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();

return false;

});

$(function(){

});

</script>

</html>

jquery实现导航栏效果

时间: 2024-11-10 04:33:18

jquery实现导航栏效果的相关文章

jquery 实现导航栏滑动效果

精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现: 3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

jQuery实现导航栏

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动 实现效果: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 4

PagerSlidingTabStrip实现网易新闻导航栏效果

PagerSlidingTabStrip实现网易新闻导航栏效果之前在项目当中有一个需求,实现类似网易新闻标题导航的效果,于是在在github搜索下,找了一个开源PagerSlidingTabStrip,研究了这个空间的使用和一些方法,在此与大家分享,希望能够帮到有需要的朋友,好了废话不多讲,直接上代码. package com.example.textpagerslidingtabstrip.activity; import com.example.textpagerslidingtabstri

php实现三级导航栏效果

首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array( 'three_tit' => '企业荣誉', 'three_cont' => array(

iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationB

jQuery实现侧边导航栏效果

效果图: 以下是完整代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="JS代码,侧边菜单,拉出菜单,高级菜单,导航菜单,jquery菜单" /><met

网页定位 - 右侧导航栏效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页定位导航效果</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 body{ 13 font-size: 12px; 14 line-height: 1

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

css3制作炫酷导航栏效果

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l