sidr --为网页添加侧边滑出菜单栏

最新推荐文章于 2024-05-11 10:05:24 发布

原创

最新推荐文章于 2024-05-11 10:05:24 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#插件 #jquery #html

sidr是一款用于创建隐藏侧滑菜单的插件，提供多种样式选择。当需要时，菜单会从页面边缘滑出。在使用过程中，如果要在菜单中添加HTML元素，可能需要针对不同主题调整样式，例如修改`jquery.sidr.light.min.css`或`jquery.sidr.dark.min.css`以适应按钮或其他元素的效果和背景色。

使用sidr

sidr是一个侧滑菜单插件，可以作为隐藏的选项，需要时点击滑出，查看在线demo可以感受效果。要使用侧边栏工具，首先需要在网页源码中添加以下内容，注意路径改为你的路径

<script src="sources/js/jquery-3.1.1.min.js"></script>
<script src="sources/js/jquery.sidr.js"></script>
<link rel="stylesheet" href

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dongchangzhang

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

点击弹出侧边菜单.zip

12-10

android 源码学习

简洁侧边栏管理后台网页模板-HTML网站源码.zip

03-31

这套HTML源代码文件为您呈现了一个完整的网页模板，适用于各类网站开发需求。它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的项目需求，对页面布局、颜色和内容进行个性化调整，轻松打造出独具特色的网站。同时，我们的代码结构清晰、注释详细，便于您学习和掌握HTML、CSS和JavaScript等前端技术。无论您是面临课程设计、毕业设计等学术挑战，还是希望在职业发展中展示自己的才华和技能，这套源代码文件都将成为您的得力助手。通过使用这套源代码文件，您将轻松完成网站搭建任务，为您的课程设计或毕业设计增添独特亮点。总之，这套HTML源代码文件是一个高效、实用且易于上手的工具，无论您是专业的网页设计师，还是业余的编程爱好者，都值得一试。

参与评论您还未登录，请先登录后发表或查看评论

Sidr – 创建侧栏和响应式菜单的最佳 jQuery 插件

weixin_34336292的博客

04-11

214

　　侧栏隐藏菜单是一个很好的方式，使得用户可以在需要的时候查看导航选项。而且这种方式对于响应式布局非常完美，因为节省空间。Sidr 是创建侧栏和响应式菜单的最佳 jQuery 插件，提供了多种菜单的显示方案。您可能感兴趣的相关文章 zoom.js：一款效果很独特的页面内容缩放插件 -prefix-free：帮你从 CSS 前缀的地狱中解脱出来 CSS Beautify – 方便的...

使用jQuery插件sidr来创建一个隐藏式的边栏菜单

GBin1.com

04-21

1294

日期：2013-4-8 来源：GBin1.com 在线演示如果大家需要创建一个隐藏式的边栏菜单的话，Sidr这个jQuery插件肯定能够帮助你快速的实现。这个插件拥有两个不同的样式主题，暗色和亮色。使用非常简单，javascript和HTML代码如下： Javascript： ...... HTML：更多操作选项 ...... via：极客标签

推荐开源项目：Sidr - 简约而强大的响应式侧边菜单插件

最新发布

gitblog_00067的博客

05-11

540

Sidr 是一个基于 jQuery 的轻量级插件，专为创建优雅的响应式侧边菜单设计。它利用了现代浏览器中的 CSS3 过渡效果，并在不支持这些特性的旧版浏览器中提供了 jQuery 动画作为回退方案。Sidr 以其简洁的代码和易于实现的特点，为开发者提供了一个快速将网站菜单转变为适应各种屏幕尺寸的解决方案。 ### 2、项目技术分析 - **jQuery 驱动**：Sidr 使用广泛流行的 j...

一款实现弹出侧边菜单效果

04-02

这是一款实现弹出侧边菜单效果，实现在弹出侧边菜单后，然后主视图会变小了，也就是后退的效果，而且还可以加上阴影的效果，喜欢的朋友可以下载学习一下看看吧。说明说明：添加侧边菜单： #import "MVYSideMenuController.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Create your menu view controller MVYMenuViewController *menuVC = [[MVYMenuViewController alloc] initWithNibName:@"MVYMenuViewController" bundle:nil]; // Create your main content view controller MVYContentViewController *contentVC = [[MVYContentViewController alloc] initWithNibName:@"MVYContentViewController" bundle:nil]; // Initialize the MVYSideMenuController MVYSideMenuController *sideMenuController = [[MVYSideMenuController alloc] initWithMenuViewController:menuVC contentViewController:contentVC options:options]; // Add to the window self.window.rootViewController = sideMenuController; [self.window makeKeyAndVisible]; return YES; } 可以调整以下参数： MVYSideMenuOptions *options = [[MVYSideMenuOptions alloc] init]; options.menuViewOverlapWidth = 60.0f; options.bezelWidth = 15.0f; options.contentViewScale = 0.9f; // 1.0f to disable scale options.contentViewOpacity = 0.5f; // 0.0f to disable opacity options.panFromBezel = NO; options.panFromNavBar = YES; options.animationDuration = 0.3f; 打开菜单和关闭菜单： // Close menu animated [sideMenuController closeMenu]; // Open menu animated [sideMenuController openMenu];

前端项目-sidr.zip

09-03

SIDR为开发者提供了便捷的方式来实现网页上的侧滑菜单，使得菜单在不同设备上都能表现出良好的适应性和用户体验。首先，SIDR的核心功能是为网站添加可扩展的侧边导航菜单。它通过jQuery库进行驱动，这意味着开发者...

SIDR：实现响应式侧边菜单的jQuery插件

压缩包子文件的文件名称列表只有一个项：“sidr-master”，这暗示了压缩包中可能包含SIDR项目的源代码或者示例项目。由于文件名后缀有“-master”，这通常表示我们正在处理的是源代码仓库的主分支或主版本。这种命名...

yii-sidr:这是 Sidr JQuery 插件的 Yii 小部件

07-04

此插件使您能够构建像 JPanel 一样的滑出式菜单，但适用于浏览器的任一侧或两侧。还通过 TouchSwipe JQuery 插件支持触摸。要求 Yii 1.1 或以上 ##Usage 复制到你的扩展目录，然后像这样使用： $ this -> ...

slidemenu:打包用于 Rails 4 和 Jquery.Turbolinks 的 Sidr 菜单

06-13

为 Rails Asset Pipeline 创建很酷的屏幕外滑块菜单。和将其整合在一起。我只是更新了一些东西，这样我就不必单击按钮一千次就可以让它与 Rails 4 中的 Turbolinks 一起工作。使用和享受。开始设置将此行添加到...

JS实现侧部菜单栏的滑动

hjkle987的博客

09-14

3784

最近的网站越来越流行侧部菜单栏，所以今天自己实现了一下: <img src="http://p2.qhimg.com/t01a17710c9463ec2d5.jpg" style="width: 100%;height: 100%"/>//背景图片 //这张图片点击后调用菜单栏scrol

网页侧浮栏源代码

01-26

1、侧悬栏（侧浮栏）可浮在网页前面，不会被网页遮住。 2、把其中链接代码修改成你的QQ在线交谈链接即可实现QQ交谈功能。在线交谈链接见代码说明。 3、目前QQ侧悬栏位于网页左侧。把left修改成right可实现右侧功能。还可以修改其中的参数，改变具体的位置。

jQuery+HTML5手机侧边栏弹出菜单代码

06-05

这是一款基于jQuery+HTML5实现的手机移动端点击弹出菜单特效，手机侧边栏滑动菜单代码。

01-17

01-09

jQuery弹出侧边栏滑动菜单实现思路

hangzhang

06-28

6393

昨天下午下了一个用jQuery实现弹出侧边栏滑动菜单的demo，其实看明白了很简单，现在把思路整理一下。 js部分：主要用了jQuery的toggleClass()方法，该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。 html部分:主要有三个部分:主页、侧滑菜单页、点击按钮（a标签）。 css部分：主页设置相对布局(relative),在这里看到一个单位

Android侧滑菜单的实现

fjnu_se的博客

06-15

6336

Android侧滑菜单1.侧滑菜单概述什么是侧滑菜单实现侧滑菜单的两种主要方式2.SlidingMenu开源库应用简介常用属性介绍设置SlidingMenu属性支持右侧划出菜单3.DrawerLayout详细介绍Drawerlayout概述使用Drawerlayout的要点 1.侧滑菜单概述什么是侧滑菜单侧滑菜单是在应用中非常常见的从侧边划出菜单的一个效果在本文中，将讲解如何实现侧滑菜单。实现侧滑菜单的两种主要方式 1.Slidingmenu开源库https://github.com/jfeins

侧边栏弹出导航插件

Rey

10-13

2373

下面介绍一款自己优化完善的侧边栏弹出框插件（基于jQuery） 1、首先需要有一个下面的HTML框架。可以放在DOM中的任意位置。 <div class="menu-modal"> <div class="menu-bg"></div> <div class="menu"> <!-- 里面放导航内容 --&am

android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果

weixin_36475420的博客

05-27

286

本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果。分享给大家供大家参考。具体如下：这是一款基于jQuery实现的气球弹出框式的侧边导航菜单，预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml...