<html>
<head>
<title>jquery - 左边栏菜单隐藏/显示</title>
<script type="text/javascript" src="jquery-1.4.4.min.js" ></script>
<script>
$(document).ready(function(){
/** 通过点击展开左边栏 **/
$("#pull").click(function(){
if($("#mydiv").css("left") == "0px")
{
$("#mydiv").animate({left:"-150px"});
}
else
{
$("#mydiv").animate({left:"0px"});
}
});
/** 通过鼠标进出来展开与收缩左边栏 **/
/**
$("#pull").mouseover(function(){
$("#mydiv").animate({left:"0px"});
});
$("#pull").mouseout(function(){
$("#mydiv").animate({left:"-150px"});
});
**/
/** 首页连接 **/
$("#aIndex").click(function(){
$("#maindiv").load("http://xieruilin.iteye.com/");
});
});
</script>
<style>
#mydiv
{
width:200px;
height: 100%;
position: absolute;
top:0;
left:-150px;
}
#maindiv
{
width:100%;
height: 100%;
background:black;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="maindiv">
</div>
<div id="mydiv">
<div style="background:blue;width:150px;height:100%;float: left;color:#FFFFFF;">
<a id="aIndex" href="#">首页</a>
</div>
<div style="width:50px;height:100%;float: left;">
<div id="pull" style="background:blue;width:50px;height:40px;color:yellow;cursor:pointer;">
拉
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
"左边栏菜单隐藏显示"是Bootstrap中一个常见的功能，它主要用于响应式布局，特别是在移动设备上，以优化用户体验。这个功能使得在有限的屏幕空间里，菜单可以被收起或展开，从而节省空间并保持页面整洁。 首先，...
总结起来，"jQuery左边悬浮显示菜单"是一个通过jQuery库实现的交互式菜单示例，它结合了HTML布局、CSS样式和JavaScript事件处理，以创建一个固定在页面左侧，且菜单项可展开/收起的悬浮菜单。通过理解并应用这些技术...
标题中的“隐藏在左边的导航菜单鼠标经过弹出jquery特效”指的是一个网页设计中的交互功能。这个功能通常出现在网站的左侧，当用户鼠标悬停在导航菜单上时，会有一个弹出的效果，显示更多的子菜单或者相关信息。这种...
这里，我们使用了CSS的`:hover`伪类来控制二级及三级菜单的显示与隐藏。当鼠标悬停在一级菜单上时，其子级菜单（二级菜单）会显示出来。 最后，我们需要使用jQuery编写JavaScript代码来处理菜单的收缩和展开。在`js...
在创建抽屉式菜单的过程中，jQuery的主要作用是监听用户的交互，如点击事件，然后通过CSS样式改变或JavaScript动画效果来控制菜单的显示与隐藏。 抽屉式菜单的实现原理大致如下： 1. **HTML结构**：首先，需要在...
在这个例子中，`#toggleButton`是触发导航栏显示/隐藏的按钮的ID，`toggleClass`方法会根据当前类是否存在来添加或移除该类。 最后，为了使导航栏在移动设备上更友好，我们可以添加媒体查询来调整布局： ```css @...
在实际项目中，你可能还需要考虑更多细节，比如添加触发动画、响应式布局调整、以及根据用户行为或屏幕尺寸自动隐藏和显示导航栏。此外，`navigator.js`文件应该包含了实现上述功能的具体JavaScript代码，你可以根据...
结合anime.js，可以添加更动态的显示和隐藏动画，使菜单的展开和收起过程更具吸引力。 最后，值得注意的是，项目的文件名“201701151446”可能是项目创建或更新的时间戳，这表明这个效果可能是在2017年1月15日下午2...
"jQuery左侧树形菜单"是常见的网页导航元素，主要用于网站的左侧栏，为用户提供层次化的页面导航。这种菜单通常以折叠和展开的形式显示，用户可以通过点击节点来展开或关闭子菜单，方便快捷地访问各个页面。 创建一...
例如，我们可以添加一个`.collapsed`类，当该类存在时，子菜单会被隐藏： ```css #menu ul { display: none; /* 默认隐藏子菜单 */ } #menu .collapsed ul { display: block; /* 当有.collapsed类时显示子菜单 *...
在`js`目录中，可能包含`bootstrap.js`（Bootstrap的JavaScript插件）和开发者编写的脚本文件，用于处理下拉菜单的显示和隐藏逻辑。例如，使用jQuery的`$(selector).on('mouseover', function() {...})`来监听鼠标...
"iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式，常用于展示左侧导航菜单，右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe，全称"Inline Frame"，是HTML中的一...
这种特效使得用户可以通过左侧的菜单栏轻松地在不同的页面内容之间切换，而无需加载全新的页面，极大地提高了浏览效率。 1. **菜单设计**： - 菜单通常位于网页的侧边或顶部，为用户提供网站的主要导航路径。左侧...
这种设计模式常见于许多网站和应用的管理员后台，它允许用户根据需要隐藏或显示菜单，以优化工作空间并提高效率。 在描述中，“27灰色”可能是指该界面设计采用了27号（可能是某种特定的色彩编号或者灰色的深浅程度...
在网页设计中，创建一个可滑动拉伸的导航菜单栏是提高用户体验的重要方式，尤其在响应式设计中，这种菜单栏能为不同设备提供更好的适应性。本示例将介绍如何利用HTML、CSS和jQuery来实现一个左侧滑动拉伸的导航菜单...
我们可以使用jQuery的`$(window).scroll()`事件监听滚动条变化，并通过计算窗口位置和侧边栏位置来决定是否显示或隐藏。 3. **在线状态显示**：使用jQuery，我们可以通过定时更新客服在线状态，如显示在线图标或...
当用户点击某个菜单项时，对应的子菜单会显示或隐藏。例如，使用jQuery，可以写如下代码： ```javascript $("#left-menu > li").click(function() { $(this).children("ul").slideToggle(); }); ``` 综上所述，...
关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。 话不多说，做了一个实例大致是这样的： 1、首先在你的项目中建立三个文件如： 2...
获取到元素后，我们可以改变它们的样式（如显示、隐藏、位置等）来实现滑动效果。 2. **事件监听**：为了响应用户的滑动操作，我们需要添加事件监听器，常见的有`touchstart`，`touchmove`和`touchend`，这些是触摸...
实现这一效果，开发者通常会使用CSS3的`transform`属性来控制菜单的滑入滑出动画，以及JavaScript或jQuery来监听用户的触摸或鼠标事件，触发菜单的显示和隐藏。在Android或iOS应用中，可以使用原生的侧滑 drawer ...