效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码：<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery鼠标悬停上下滑动导航条 - 柯乐义</title><base target="_blank" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></s...
本文主要介绍了jQuery导航条固定定位效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。实现效果图：向下滑动时，导航栏固定代码：<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0; }img{display: block;margin: 0 auto;}img#search.dhgd{position: fixed;left: 50%;margin-left: -596px;top: 0px;}</style><script src="jq...
导航条背景切换的效果，想必大家在浏览网页时可能会碰到过，下面为大家介绍下使用jquery如何实现，具体思路及代码如下，感兴趣的朋友可以参考下效果如下： 代码如下:<DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta charset="UTF-8">
<style>
.nav{height:40px; width: 100%;background: #E6E6E6;}
.nav ul li{float: left;list-style: none;margin-right: 20px...
text-align</a>: center">利用js和JQuery定义一个导航条效果：一、html代码：<p class="Maintenance"><p class="Title"><p class="M_Button" id="Plan">menu1</p><p class="M_Button" id="Expert">menu2</p><p class="M_Button" id="Team">menu3</p><p class="M_Button" id="Medic">menu4</p><p class="M_Button" id="Shelter">menu5</p><p class="M_Button" id="Warehouse">menu6</p></p></p><!-- menu1 --><p class="Content" id...
标题1
标题2
标题3
标题4
标题5
标题6 进入之后才能看到效果！ $(document).ready(function () {
myHide();
});
function myHide() {
//alert("hello");
//注册事件
$(".m1").bind('mouseover', m1_mouseover);
$(".m1").bind('mouseout', m1_mouseout);
$(".m2").bind('mouseover', m2_mouseover);
$(".m2").bind('mouseout', m2_mouseout);
$(".m3").bind('mouseover', m3_mouseover);
$(".m3").bind('mouseout'...
下面的例子将结合项目实际运用来使用Jquery.TreeView,当然在使用控件树需要现在相应的js文件 下面就把我生成的TreeView展现给大家看看希望对大家有所帮助！在使用之前需要下载控件树的js文件和Css样式 介绍一下表结构 M_ID M_Name M_ParentID M_URL M_Sort 然后新建一个网站，在新建的网站下添加CSS文件夹和js文件夹分别用于存放Css样式和JS，同时再添加一个image文件夹用于存放TreeView的图片 接着我们就开始实现我们的功能了！ 前...
图示效果：演示地址：http://demo.jb51.net/js/menu_jquery/index.html下载地址：http://xiazai.jb51.net/201011/yuanma/menu_jquery.rarOutlookBar.js 代码如下: function OutlookBar(targetName)//targetName:右侧iframe的name { //创建标题 this.AddTitle=function(menuid,menutitle,openor){ $("body").append(""+menutitle+""); if(openor==false) { $("#child_"+menuid).hide(); $("#"+menuid).removeClass("menu_down"); $...
1、编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。 示例代码如下： 代码如下: New Document body{font-size:13px} #divFrame{border:solid 1px #666;width:301px;overflow:hidden} #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand} #divFrame .clsHead h3{padding:0px;margin:0px;float:left} #divFrame .clsHead span{float:right;margin-top:3px} #div...
本文使用jquery的scrollTop方法监视页面垂直滚动像素，并根据像素隐藏或者显示顶部的导航条。 效果预览网址：http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍： 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选。规定相对滚动条顶部的偏移，以像素计。 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置...
代码如下： 代码如下: 导航条在项目中的应用 $(function(){ $(".tit").find("span").click(function(){ $(this).toggleClass("closeBtn2").parent().next().slideToggle(); //实现内容隐藏显示，及图标的切换 }) ; $(".clsBot").click(function(){ $(this).parent().find("li:gt(4)").toggle(); //实现内容索引值大于4的隐藏或者显示...
效果如下： 代码如下: .nav{height:40px; width: 100%;background: #E6E6E6;} .nav ul li{float: left;list-style: none;margin-right: 20px;line-height: 40px;} .nav ul li a{text-decoration: none; display: block;width: 60px; text-align: center;} .onNav{font-weight: bold;color:#fff; background: #ccc;} 首页 博客 论坛 关于 联系 $(".nav ul li a").click(function(){if($(this).has(".onNav")){ $(th...
借助 插件 Lavalamp实现导航条动态显示效果， 以前用animate来实现，效果不是很好 代码如下: $(function() { $(".nav").lavaLamp({ fx: "backout", speed: 1100, mouseover:function(event, menuItem){alert();} }); }); .nav { width:650px; height:100px; float:left; position: relative; } .nav li { width:auto; min-width:40px; line-height:100px; padding:0 15px; margin:0 10px 0 0; color:#000; font-size:14px; ...
代码如下: 维护中... *{ margin:0; padding:0; } body{ text-align:center; background:yellow; } #container{ width:962px; height:auto; background:url(b3.jpg); margin:0px auto; } #head{ height:100px; width:100%; } .head_ul{ list-style:none; margin-left:200px; } .head_ul li{ float:left; width:90px; height:50px; line-height:40px; font-size:20px; margin-top:40px; background:url(b1.png); } .head_ul li ...
用jQuery实现一些导航条切换，显示隐藏，主要运用的技术有slideToggle( )，toggeClass( )，toggle( ):
代码如下：导航条在项目中的应用$(function(){
$(".tit").find("span").click(function(){
$(this).toggleClass("closeBtn2").parent().next().slideToggle(); //实现内容隐藏显示，及图标的切换
}) ;
$(".clsBot").click(function(){
$(this).parent().find("li:gt(4)").toggle(); //实现内容索引值大于4的隐藏或者显示})
})*{...
本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下：
这是一款网站导航条效果代码，菜单最多可支持两级，适合较多类型的网站使用，不喜欢蓝色的可自己修改成其它颜色，整体效果不错，挺简单的网站导航。
运行效果截图如下：在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/
具体代码如下：css+jquery打造二级横向菜单#droplinebar {overflow: hidden;}
.dr...
1、编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。