先规范JQuery代码结构组织如下
1,index.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Try JQuery</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> </head> <body> <div id="main_container"> test </div> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scripts/main.js" type="text/javascript"></script> </body> </html>
2,styles/main.css
#main_container { background-color: gray; width: 960px; margin: 0 auto; }
3,scripts/main.js
$(document).ready(function(){ alert("Hello"); }); $(function(){ alert("World"); });
实现一个简单的导航栏
1,index.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Try JQuery</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> </head> <body> <div id="main_container"> <div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">旅店</a> <ul> <li><a href="#">单人间</a></li> <li><a href="#">双人间</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <div class="clear" /> <div> test </div> </div> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scripts/main.js" type="text/javascript"></script> </body> </html>
2,styles/main.css
/* base css */ * { margin: 0; padding: 0; } ul, li { list-style: none outside none; } .clear { clear: both; } /* page css */ #main_container { background-color: #eeeeee; width: 960px; margin: 0 auto; } #navigation { width: 960px; } #navigation ul li { float: left; margin-right: 20px; z-index:100; position: relative; } #navigation ul li a { display: block; background: #eeeeee; font-weight: 700; } #navigation ul li a:hover { background: none; color: red; } #navigation ul li ul { display: none; overflow: hidden; position: absolute; background-color: #88C366; width: 80px; } #navigation ul li:hover ul { display: block; position: absolute; width: 100px; } #navigation ul li ul li{ border-bottom: 1px solid #BBB; text-align: left; width: 100%; }
3,scripts/main.js
//导航效果(兼容IE6) $(function(){ $("#navigation ul li:has(ul)").hover(function(){ $(this).children("ul").stop(true,true).slideDown(1000); },function(){ $(this).children("ul").stop(true,true).slideUp("fast"); }); })
相关推荐
jQuery实现简单漂亮的Nav导航菜单效果 ,滚动时自动高亮导航菜单 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固定的楼层导航,这个导航列出了所有的楼层,...
jquery.nav.js定位导航滚动插件,jquery实现定位导航
本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果。分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。 ...
HTML+css+jQuery实现导航栏效果--pc端 适合前端,下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav>li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') //...
这是使用了jquery实现的tmall的nav导航栏的一块,其他小块可以自己在上面进行修改。
jquery实现的导航固定效果 代码如下:1.jquery代码, .nav为导航的class$(function(){ $(window).scroll(function() { if($(window).scrollTop()>=250){ $(“.nav”).addClass(“fixedNav”); }else{ $(“.nav”...
电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包...如果你想在自己的页面上也实现这样的效果,那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件。查看演示 标签:OnePageNav
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover...
本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码。分享给大家供大家参考。具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下...
本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用。主要实现...
本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下: 这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引入了jquery,若运行代码后左上角提示错误,刷新页面即可...
jquery实现多级下拉菜单源码 <ul id="keleyi-com-nav"> <li class="site-name"><a href="http://keleyi.com"> </a></li> <li class="yahoo"><a href="http://keleyi.com">导航菜单 <li><a href=...
我采用了两种方式实现,一种用css3,另一种是用jquery实现。 首先说一下用css3如何实现: html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>首页</...
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法。分享给大家供大家参考。具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,...
本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称“链接提示”,鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致...
本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考,具体如下: 经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上。 效果如下图: 利用jquery的 animate 函数,...
本文实例讲述了jquery实现的横向二级导航效果代码。分享给大家供大家参考。具体如下: 这是一款灰色和黑色共同搭配做出的水平横向网站菜单,网页横向菜单代码,包括二级子菜单,使用了几张图片,用的朋友自己顺路径...
本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下: 这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习...
– 实现思路: CSS:用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果 javascript:hover()触发移动鼠标到导航nav的动作,和移出导航nav的动作(即返回到current导航) –> <!DOCTYPE HTML> <...