菜单

侧边栏
侧边栏在页面之外隐藏额外信息

下载

类型

侧边栏 (Sidebar)

一个标准的边栏

虽然侧边栏可以和很多内容一起使用,但大多数情况下,侧边栏和 反色垂直菜单 使用的最多。你可以看 用法 以了解更多内容。

<body> <div class="ui sidebar inverted vertical menu"> <a class="item"> 1 </a> <a class="item"> 2 </a> <a class="item"> 3 </a> </div> <div class="pusher"> <!-- Site content !--> </div> </body>
$('.ui.sidebar') .sidebar('toggle') ;
<div class="ui left demo vertical inverted sidebar labeled icon menu"> <a class="item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="block layout icon"></i> Topics </a> <a class="item"> <i class="smile icon"></i> 朋友 </a> </div>
$('.ui.labeled.icon.sidebar') .sidebar('toggle') ;

状态

侧边栏

可见 (Visible)

侧边栏在页面中可以被显示出来。

添加 visible 就能使得侧边栏以最简单的方式显示出来。

推拉

遮罩 (Dimmed)

推拉的部分可以被遮罩住

变形

方向 (Direction)

侧边栏可以从不同的方向出现

宽度 (Width)

侧边栏可以指定宽度

边栏将自动调整其动画,以匹配CSS中指定的大小。

设置

页面结构 (Page Structure)

使用侧边栏需要特定的页面结构。为了达到最佳的性能,您的页面应该先设置了这个结构,然后再初始化侧边栏。

如果不设置,侧边栏在第一次加载时将自动添加正确的布局,但固定页面的布局会使性能降低,不推荐。
<body> <div class="ui sidebar"> ... </div> <div class="pusher"> Your site's actual content </div> </body>

结合菜单 (Using with Menu)

侧边栏可以是任何内容,但是最常见的类型是菜单。要了解的结构,请参阅菜单文档

<body> <div class="ui left vertical menu sidebar"> <a class="item"> Item 1 </a> <a class="item"> Item 2 </a> <a class="item"> Item 3 </a> </div> <div class="pusher"> <!-- Site content !--> </div> </body>

固定内容 (Using Fixed Content)

任何固定位置的内容,在侧边栏显示的时候,都应该跟随内容移动。固定内容使用 fixed

固定内容并不包含与 pusher 相邻的内容,当侧边栏显示的时候,与 pusher 相邻的内容讲失去位置。
<body> <div class="ui sidebar"> ... </div> <div class="ui top fixed menu"> ... </div> <div class="pusher"> Your site's actual content </div> </body>

iOS侧边栏 (iOS Sidebars)

Sidebars use a special fix for iOS that are added using userAgent detection.

This should have no meaningful affect on your code, but will prevent the canvas from incorrectly autoresizing when a sidebar opens.

html.ios { overflow-x: hidden; -webkit-overflow-scrolling: touch; } html.ios, html.ios body { height: initial !important; }

行为

下面所有行为都可以用以下语法调用:

$('.your.element') .sidebar('behavior name', argumentOne, argumentTwo) ;
行为 描述
attach events(selector, event) Attaches sidebar action to given selector. Default event if none specified is toggle
show Shows sidebar
hide Hides sidebar
toggle Toggles visibility of sidebar
is visible Returns whether sidebar is visible
is hidden Returns whether sidebar is hidden
push page Pushes page content to be visible alongside sidebar
get direction Returns direction of current sidebar
pull page Returns page content to original position
add body CSS Adds stylesheet to page head to trigger sidebar animations
remove body CSS Removes any inline stylesheets for sidebar animation
get transition event Returns vendor prefixed transition end event

例子

过度 (Transitions)

当多个侧边栏同时出现的时候,并不是所有的侧边栏都有过渡效果。

多个可见 支持垂直侧边栏 支持水平侧边栏
Overlay
Push
Scale Down
Uncover
Slide Along
Slide Out
方向
左侧
右侧
顶部
底部
所有方向动画
Overlay
Push
Scale Down
仅垂直返方向动画
Uncover
Slide Along
Slide Out

显示多个 (Displaying Multiple)

多个侧边栏可以同时显示,仅仅是在使用类似 push 或者 overlay 这种被支持过渡效果时。

你需要在元素上手动设置 z-index 侧边栏元素显示在最上面。
如果你需要同时显示多个侧边栏,我们建议使用 overlay 这种过渡。
// showing multiple $('.demo.sidebar') .sidebar('setting', 'transition', 'overlay') .sidebar('toggle') ;

自定义内容 (Using a custom context)

侧边栏可以在任何元素内部使用,并不仅仅是页面的 body 中。

侧边栏的 context 不能有内边距(padding)。您可以通过填充其内部内容或使用附加的包含元素来解决此问题。

应用内容 (Application Content)

// using context $('.context.example .ui.sidebar') .sidebar({ context: $('.context.example .bottom.segment') }) .sidebar('attach events', '.context.example .menu .item') ;

切换隐藏/显示其他内容 (Triggering show/hide with other content)

For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click

$('.left.demo.sidebar').first() .sidebar('attach events', '.toggle.button') ; $('.toggle.button') .removeClass('disabled') ;
Trigger Sidebar

切换自定义行为 (Triggering custom behavior with other content)

You can also specify what behavior should occur when the element is clicked

$('.left.demo.sidebar').first() .sidebar('attach events', '.open.button', 'show') ; $('.open.button') .removeClass('disabled') ;
Open Sidebar

开始即显示 (Starting Visible)

添加类名visible能使侧边栏开始即显示。

You must include the class pushable on a sidebars containing element for it to appear correctly before Javascript initializes the element
Although sidebars support any size content, sidebars that are visible on load only support standard, predefined sizes like thin or wide. This makes sure content can be positioned correctly before Javascript is available.
// showing multiple $('.visible.example .ui.sidebar') .sidebar({ context: '.visible.example .bottom.segment' }) .sidebar('hide') ;

侧边栏

行为

设置 默认 描述
context body Context which sidebar will appear inside
exclusive false Whether multiple sidebars can be open at once
closable true Whether sidebar can be closed by clicking on page
dimPage true Whether to dim page contents when sidebar is visible
scrollLock false Whether to lock page scroll when sidebar is visible
returnScroll false Whether to return to original scroll position when sidebar is hidden, automatically occurs with transition: scale
delaySetup false When sidebar is initialized without the proper HTML, using this option will defer creation of DOM to use requestAnimationFrame.

Animation

Setting Default Description
transition auto Named transition to use when animating sidebar. Defaults to 'auto' which selects transition from defaultTransition based on direction.
mobileTransition auto Named transition to use when animating when detecting mobile device. Defaults to 'auto' which selects transition from defaultTransition based on direction.
defaultTransition
{ computer: { left : 'uncover', right : 'uncover', top : 'overlay', bottom : 'overlay' }, mobile: { left : 'uncover', right : 'uncover', top : 'overlay', bottom : 'overlay' } }
Default transitions for each direction and screen size, used with transition: auto
useLegacy false Whether Javascript animations should be used. Defaults to false. Setting to auto will use legacy animations only for browsers that do not support CSS transforms
duration 500 Duration of sidebar animation when using legacy Javascript animation
easing easeInOutQuint Easing to use when using legacy Javascript animation

回调函数

设置 语境 描述
onVisible Sidebar Is called when a sidebar begins animating in.
onShow Sidebar Is called when a sidebar has finished animating in.
onChange Sidebar Is called when a sidebar begins to hide or show
onHide Sidebar Is called before a sidebar begins to animate out.
onHidden Sidebar Is called after a sidebar has finished animating out.

模块

DOM 设置

设置 默认
namespace sidebar
className
className : { active : 'active', animating : 'animating', dimmed : 'dimmed', ios : 'ios', pushable : 'pushable', pushed : 'pushed', right : 'right', top : 'top', left : 'left', bottom : 'bottom', visible : 'visible' }
regExp
regExp: { ios : /(iPad|iPhone|iPod)/g, mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g }
selector
selector: { fixed : '.fixed', omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed', pusher : '.pusher', sidebar : '.ui.sidebar' }

调试

设置 默认 描述
name Sidebar 调试日志使用的名字
silent False 关闭所有调试信息的输出,包括错误信息
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台
errors
error : { method : 'The method you called is not defined.', pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element', movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag', overlay : 'The overlay setting is no longer supported, use animation: overlay', notFound : 'There were no elements that matched the specified selector' }