语义-UI-如何只在页面的一部分使用侧边栏？(即有上下文) [英] Semantic-ui - how to use sidebar in only part of a page? (ie with context)
本文介绍了语义-UI-如何只在页面的一部分使用侧边栏？(即有上下文)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用Semancui在我页面的一小部分中显示一个侧边栏作为覆盖。我该怎么做？
我试图获得the example they have on their home page working，但我错过了一些东西...谢谢！
推荐答案
您可以try a working example here (JSFiddle)
以下是本地运行的同一示例的转储：
使用Bower安装语义-UI和jQuery。
test.html
<html>
<head>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/semantic/dist/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
</head>
<body>
<div style="background:red; height:200px; width:100%;">
Top content - should appear above the sidebar, like an app toolbar
</div>
<div id="app">
<div class="ui left vertical inverted labeled icon sidebar 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>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
<a class="item">
<i class="mail icon"></i>
Messages
</a>
<a class="item">
<i class="chat icon"></i>
Discussions
</a>
<a class="item">
<i class="trophy icon"></i>
Achievements
</a>
<a class="item">
<i class="shop icon"></i>
Store
</a>
<a class="item">
<i class="settings icon"></i>
Settings
</a>
</div>
<div class="pusher">
Your site's actual content
</div>
</div>
<script>
function toggleSidebar()
{
$('#app .ui.sidebar')
.sidebar({context:$('#app')})
.sidebar('setting', 'transition', 'overlay')
.sidebar('toggle');
}
document.addEventListener("DOMContentLoaded", function() {
toggleSidebar();
});
</script>
</body>
</html>
这篇关于语义-UI-如何只在页面的一部分使用侧边栏？(即有上下文)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
