左侧多菜单的上下滚动效果实现

最新推荐文章于 2022-01-11 15:00:28 发布
最新推荐文章于 2022-01-11 15:00:28 发布
阅读量670 收藏
点赞数
文章标签： 交互 ux axure 墨刀
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29459903/article/details/120860352
版权
本文介绍了如何使用Axure制作一个左侧多菜单的上下滚动效果，通过动态面板和交互设置，实现无滚动条显示但能上下滚动的功能。首先创建滚动条素材，然后将内容放入长动态面板，添加拖动时跟随垂直拖动的交互，最后调整滚动条使其隐藏于菜单栏内。
摘要由CSDN通过智能技术生成

1.用动态面板制作滚动条素材

拖动动态面板画一个容器，鼠标选中后，右键选择滚动条→垂直滚动，给他命名为上层。

再拖动一个动态面板画一个比它长的矩形，用来盛放需要滑动的长内容，然后给长动态面板命名为下层。在概要面板视图里，调整两个图层的上下位置。

然后复制之前做好的菜单列表，粘贴到下层的动态面板里面。退出编辑窗口，内容就出现了滚动条。点击上层动态面板，添加交互效果，选择拖动时，目标下移→跟随垂直拖动，就可以了。滚动效果实现了，但是侧边的滚动条很影响美观，我们需要把它隐藏掉，这个时候点击上层的动态面板，鼠标邮件，再次转换为动态母版，然后将转换后的滚动条向左推动，宽度和你的左侧菜单栏实际宽度一致即可。

 再次预览看看，已经实现了无滚动条显示，可以进行上下滚动了~

 

希望快乐会传染
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
系统左侧菜单上下滚动功能
Shawn_YuL的博客
02-17 3777
鉴于系统左侧导航菜单的栏目过多，出现有些模块看不到的情况，考虑做一个菜单上下滚动。目前系统左侧导航菜单是easyui的手风琴效果，UI更新后是图片和文字配合形式。以下是对于过程的整理： 一、方案的查找与确定 1、方案1（引入js插件） 参考示例：http://www.js-css.cn/jscode/focus/focus62/# 尝试结果：导入插件，导航模块那里不能展示，一些js方法
左侧导航菜单滚动
06-04
6. `js`：包含JavaScript文件，其中可能有实现菜单滚动效果的代码。 7. `css`：包含CSS文件，用于定义网页的样式和布局，包括导航菜单的初始样式和滚动时的固定样式。 要实现左侧导航菜单滚动的效果，开发者通常会...
菜单固定 页面滚动 效果
yuan_jie
11-27 1927
在一个单页面设置一个主菜单，当页面滚动时主菜单位置固定在页面窗口中不动，或左或右，或上或下。当单击菜单项时，页面滚动到菜单对应的内容区，当页面滚动到预定内容位置时，对应的菜单项变为当前选中样式。 此效果可以应用在一些内容比较长的单页设计，本文将介绍使用JjQuery和css来实现这一效果，demo中分别有菜单居左、居右及底部效果，点击demo看效果： 查看演示DEMO下载源码
滚动的菜单效果
风雨斋
11-29 945
/*设置width和rheight参数*/var width=150var height=20var bgcolor=//间暂停5秒。var stop=5000//定义一组文字，如果希望都是带连接的，只要加上标签即可。var images=new Array()images[0]=☆这里是效果☆images[1]=网上赚钱images[2]=极品网址images[3]=土丘学网
实战案例8——左侧菜单项滑动
格物的专栏
08-29 822
该原型主要实现几个功能： （1）点击主菜单图标时，弹出左侧菜单项。 （2）当鼠标在左侧边缘处往右拖动时，如果拖动速度快（200ms以内），则显示左侧菜单栏；如果拖动速度慢，如果已经将左侧菜单拖动出了1/2，就显示左侧菜单，否则，不显示。 （3）当显示左侧菜单时，可以往左拖动隐藏菜单。 具体原型设计如下： （1）利用主页面手机外壳元件的内嵌功能，内嵌页面1。 （2）主菜单的点击事...
左侧菜单添加滚动条
哂笑年少°
06-03 2178
javascript部分代码： $(function(){ var menuHeight = document.getElementById('menu');// menu 菜单ul的id名称 var screenHeight = window.innerHeight //浏览器窗口的内部高度 menuHeight.style.height=screenHeight-80+"px"; $("#menu").css({"overflow-y":"auto","height":m
jQuery左侧浮动跟随鼠标上下滚动菜单代码
10-27
本教程将详细讲解如何利用jQuery实现一个左侧浮动且跟随鼠标上下滚动的菜单代码。 首先，我们需要理解jQuery的核心概念。jQuery简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。它的语法简洁明了，使得...
MUI 实现侧滑菜单及其主体部分上下滑动的方法
08-28
为了实现滚动效果，我们需要为菜单部分和内容部分分别添加`mui-scroll-wrapper`类，并为它们指定唯一的ID，例如`offCanvasSideScroll`和`offCanvasContentScroll`。 接下来，为了让侧滑菜单和内容部分可以滑动，...
精美WPF左侧菜单栏
07-24
为了实现一个左侧菜单栏，我们可以将`Menu`控件放置在一个适当的布局容器，如`DockPanel`或`StackPanel`，并将其定位在左边。 菜单栏的核心功能之一是点击菜单项后自动展开子菜单。在WPF中，我们可以利用`MenuItem`...
jQuery实现带滚动导航效果的全屏滚动相册实例
10-24
- **导航动画**：使用`.animate()`方法实现导航栏从左侧滑入（`{'left':'0px'}`）的效果，以及缩略图容器的滚动动画。 #### 其他重要知识点 - **代码组织与管理**：为提高代码的可读性和可维护性，将具有特定功能...
左侧菜单不显示滚动条滚动
m0_46978096的博客
01-11 440
第一种 给大盒子加上这个 垂直方向“无滚动条”滚动 overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; /* Edge */ scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar { display: none; /* WebKit */ } 第二种 <div style="width:200px;height:100%;overflow:hidden
滑动菜单特效实现
Little_Boy
01-18 583
这次是滑动特效实现，代码是看的郭霖老师的，但是看了代码有点懵懵懂懂的，所以自己就对代码进行更详细的解读。 步骤： 1.首先我们要初始化几个参数： menuPadding=100; //完全显示Menu时，留给Content的宽度 screenWidth; //初始化为屏幕宽度 leftEdge; //也就是menu滑到最左边，menu布局leftMargin的最小值，也就是后面滑
html 横向滚动菜单栏,带子菜单的HTML水平滚动导航栏
weixin_39779004的博客
06-07 896
我有一个内部网页，它有一个大的导航栏，如果用户有一个小型监视器，导致子菜单显示在屏幕之外。我的想法是使用导航栏滚动，但是当我使用CSS中的溢出时，当子菜单打开时会出现垂直滚动条。我希望子菜单显示包含导航栏的div的OUTSIDE。我愿意接受所有想法，包括必要时重新整理我的网页。带子菜单的HTML水平滚动导航栏样本HTML是：Some Text而且我使用的CSS是(我发现这W3schools.com...
HTML页面滚动时左侧导航栏随着滚动
koudandan的博客
11-15 3119
<!doctype html> <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>页面滚动</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <s.
上下滚动的菜单栏
lin49940的专栏
10-07 835
参照文章 原生js动画效果（源码解析） 上下滚动菜单栏bylin49940 lin1 lin2 <a href="#" onmouseover="startDown(this,0);" onmouseout="startUp(this,-60);" style="width: 107px; height: 60px;float:l
html5页面滑动设计,JS+CSS实现网站侧边栏跟随浏览器滚动条
weixin_31807925的博客
06-03 505
CSS部分：/*侧栏跟随*/#box{float:left; position:relative;width:310px;}.div1{width:310px;}.div2{position:fixed;_position:absolute;top:0;z-index:310;}注：width:310px;可以随意修改尺寸。body部分：这里是你跟随浏览器滚动的内容JS部分：//侧栏跟随(func...
vue 上下滚动的菜单_5.导航栏下拉滚动出现
weixin_32659227的博客
01-13 874
1.绑定两个事件``````2.初始值设置```data(){return {bannerImg:"",isNav:false,opacitys:{opacity:0}}},```3.挂载监听事件```mounted() {window.addEventListener("scroll",this.handleScroll)},```4.销毁后移除监听事件```destroyed() {windo...
JQuery实现导航菜单栏随滚动条上下滚动
PANNJ
05-24 4542
JQuery实现导航菜单栏随滚动条上下滚动
菜单下拉滚动条
yuesheng3707的专栏
02-14 4482
<br />滚动条就是菜单右侧用来上下拖动以显示屏幕未显示内容的。 <br />滚动条有以下部分组成： <br />1.上下箭头图标——>我们一般称之为 SCROLLBAR_BUTTON <br />2.滚动轴——>我们一般称之为 SCROLLBAR_REGION <br />3.滚动条——>我们一般称之为 SCROLLBAR <br />在滚动条的显示方面，如果我们要改变滚动条是否显示，则通过改变结构体变量MMI_fixed_list_menu中的flag成员的值就可以了，因为我们事先定义好了一些菜单格式
jAVAFX实现左侧菜单栏并带收缩效果
最新发布
05-17
要实现左侧菜单栏并带收缩效果，可以使用JavaFX的TreeView组件。以下是一个简单的实现示例： ```java import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ // 创建TreeView TreeView<String> treeView = new TreeView<>(); TreeItem<String> rootItem = new TreeItem<>("Root"); rootItem.setExpanded(true); TreeItem<String> item1 = new TreeItem<>("Item 1"); rootItem.getChildren().add(item1); TreeItem<String> item2 = new TreeItem<>("Item 2"); rootItem.getChildren().add(item2); treeView.setRoot(rootItem); // 创建左侧面板 SplitPane leftPane = new SplitPane(); leftPane.getItems().add(treeView); // 创建中间面板 BorderPane centerPane = new BorderPane(); centerPane.setTop(new Label("Center Pane")); // 创建主面板 SplitPane mainPane = new SplitPane(); mainPane.getItems().addAll(leftPane, centerPane); // 监听TreeView的选中事件 treeView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<TreeItem<String>>() { @Override public void changed(ObservableValue<? extends TreeItem<String>> observable, TreeItem<String> oldValue, TreeItem<String> newValue) { centerPane.setTop(new Label(newValue.getValue())); } }); // 创建场景 Scene scene = new Scene(mainPane, 600, 400); // 设置舞台 primaryStage.setTitle("JavaFX TreeView Demo"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 以上示例代码创建了一个包含左侧菜单栏和中间面板的主面板，使用SplitPane实现了左右分割。左侧菜单栏使用TreeView组件实现，可以通过设置TreeItem的子节点来添加菜单项。监听TreeView的选中事件，可以在中间面板显示选中的菜单项。 要实现收缩效果，可以在左侧面板中添加一个ToggleButton，通过监听ToggleButton的选中状态来切换左侧面板的显示和隐藏。以下是修改后的示例代码： ```java import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.geometry.Orientation; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.BorderPane; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ // 创建TreeView TreeView<String> treeView = new TreeView<>(); TreeItem<String> rootItem = new TreeItem<>("Root"); rootItem.setExpanded(true); TreeItem<String> item1 = new TreeItem<>("Item 1"); rootItem.getChildren().add(item1); TreeItem<String> item2 = new TreeItem<>("Item 2"); rootItem.getChildren().add(item2); treeView.setRoot(rootItem); // 创建左侧面板 StackPane leftPane = new StackPane(); leftPane.getChildren().add(treeView); ToggleButton toggleButton = new ToggleButton("收起"); toggleButton.selectedProperty().addListener(new ChangeListener<Boolean>() { @Override public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) { if (newValue) { leftPane.setMaxWidth(0); toggleButton.setText("展开"); } else { leftPane.setMaxWidth(Double.MAX_VALUE); toggleButton.setText("收起"); } } }); leftPane.getChildren().add(toggleButton); // 创建中间面板 BorderPane centerPane = new BorderPane(); centerPane.setTop(new Label("Center Pane")); // 创建主面板 SplitPane mainPane = new SplitPane(); mainPane.setOrientation(Orientation.HORIZONTAL); mainPane.getItems().addAll(leftPane, centerPane); // 监听TreeView的选中事件 treeView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<TreeItem<String>>() { @Override public void changed(ObservableValue<? extends TreeItem<String>> observable, TreeItem<String> oldValue, TreeItem<String> newValue) { centerPane.setTop(new Label(newValue.getValue())); } }); // 创建场景 Scene scene = new Scene(mainPane, 600, 400); // 设置舞台 primaryStage.setTitle("JavaFX TreeView Demo"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 以上代码在左侧面板中添加了一个ToggleButton，通过监听其selectedProperty来控制左侧面板的显示和隐藏。当ToggleButton被选中时，将左侧面板的最大宽度设置为0，实现了收起的效果；当ToggleButton未被选中时，将最大宽度设置为Double.MAX_VALUE，实现了展开的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值