TOGOUTECH

javascript - 语义 UI 边栏和下拉菜单

coder 2024-12-09 原文

我正在尝试使用语义 ui 创建一个简单的 web ui。

我想要一个带有菜单的侧边栏,在某些项目中会有子项目......应该不会那么难吧?

http://jsfiddle.net/ycm8ctfx/

<div class="ui vertical menu sidebar teal">
   <div class="menu">
   <a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
     Example
   </a>
   <div class="ui left pointing dropdown link item">
      <i class="dropdown icon"></i>
      Messages
     <div class="menu">

如何让子项目在正常页面内容上“飞出”侧边栏?如果您在示例中单击“消息”,将出现菜单(观察底部出现的滚动条),但由于它们是侧边栏的子项,因此它们显示在侧边栏中。但我希望它们漂浮在正常内容上!我没有通过摆弄 z-index 来让它工作。

最佳答案

如果侧边栏被配置为使用overlay 过渡,它可以通过指定来修复

.ui.sidebar {
    overflow: visible !important;
}

取自此处http://jsfiddle.net/59174tt1/2/

关于javascript - 语义 UI 边栏和下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27172703/

有关javascript - 语义 UI 边栏和下拉菜单的更多相关文章

  1. javascript - 不使用angularjs向下滚动时如何验证表单? - 2

    我正在尝试验证名为“同意信息”的页面的表单。在这里,用户必须向下滚动才能向前移动(记住框底部没有复选框,相反用户必须一直向下滚动直到滚动结束),如果用户单击继续/同意按钮而不滚动,必须显示一个div元素/错误,说“需要滚动到信息的底部”(必须是anchor链接,单击它应该用颜色突出显示该框)。这是代码和图片(function(){angular.module('agreeToInfoApp',[]).directive('execOnScrollOnBottom',[function(){return{restrict:'A',link:function(scope,elem,attr

  2. javascript - Angular ng-options 在拼接上提供空选择选项 - 2

    所以我有一个具有以下标记的AngularView:selecthandheldid页面加载时的vm.handheldKeys是一个数组,有两个值[0,24]。当页面加载时,呈现的HTML如下(为便于阅读而标记):selecthandheldid024这当然是您所期望的。现在,通过一些业务逻辑,在用户与页面交互之后,有一个拼接vm.handheldKeys数组的函数。因此,假设代码如下所示:vm.handheldKeys.splice(0,1);//Removethe'0'fromthearray现在,我得到的是以下呈现的HTML(注意第一个选择选项):selecthandheldid2

  3. javascript - "Direct Response with Node.js"- 使用不同的 Node.js 进程发送 HTTP 响应(不同于主进程) - 2

    使用Node.js服务器,我想知道是否可以并建议从委托(delegate)工作进程而不是主进程发送HTTP响应。这些工作进程本身可以是Node.js服务器,或者只是通过IPC进行通信的Node.js子进程。我不认为集群核心模块https://nodejs.org/api/cluster.html可以做我想做的事,因为在那个模型中,所有的worker都在同一个端口上监听,他们代表主进程处理所有请求。我正在寻找的是一个主要的Node.js进程,它响应所有HTTP请求,可能进行身份验证和处理一些请求,但也能够将数据密集型或CPU密集型请求委托(delegate)给工作池。假设我们有一个获取大

  4. javascript - 如何使用 ng-table 进行服务器端分页? - 2

    我的代码是$scope.loadQuestions=function(){$scope.questionCount=0;$scope.questionTable=newNgTableParams({count:[]},{total:19387,getData:function($defer,params){$scope.filter.sort=params.orderBy();$scope.filter.page=params.page();return$http.get("/api/questions",{params:$scope.filter}).then(function(re

  5. javascript - 获取所有已声明模块导入的列表 (SystemJS) - 2

    我正在使用jspm和SystemJS导入ES2015模块。是否可以通过System对象或其他任何地方获取项目中所有导入模块的列表?我可以通过System._loader.moduleRecords访问我的项目特定模块,但是我通过jspm安装的模块(例如,d3、jquery)不会出现在这个列表中。System._loader.modules包含所有模块的列表,但遗憾的是还包含转译我的代码和模块加载包所需的模块列表。System._loader.moduleRecords(项目模块)System._loader.modules(项目模块、库、转译包)我只想要一个已声明导入的列表,特别是那些

  6. javascript - Chrome 扩展的 Manifest.json 中的自定义值? - 2

    是否允许将自定义值保存在Chrome扩展的manifest.json中?因为是json,所以我想在manifest.json中保存一些信息,特别是因为ChromeAPI可以用于Opera,我需要一些区分数据。如果manifest.json中有任何自定义数据,Chrome商店会提示吗? 最佳答案 不,不允许在Chrome扩展manifest.json文件中使用自定义值。您可以引用下面给出的链接。@约翰https://developer.chrome.com/extensions/manifest您只能在manifest.json中使用

  7. javascript转到带有unicode字符的url - 2

    我有一个包含这些url的数组:["path/to/url1","path/to/url2","path/url/unicóde.txt"]我正在使用angular,通过ng-repeat我创建了一个可点击的列表,该列表执行重定向到所需的url,但是,当我点击unicodeurl时,浏览器无法找到它。我尝试使用encodeURI("path/url/unicóde"),但它检索到的是:path/url/unic%C3%B3de.txt未找到。相反,当我手动访问时:path/url/unicóde.txt(这是在ftp中,因此,我逐个文件夹直到到达文件)浏览器中的url现在说:path/u

  8. javascript - 为什么我的 Ice Candidate 请求触发了 6 次而不是 1 次? - 2

    我正在使用WebRTC编写我的第一个点对点连接应用程序,我通过socket.io连接发送的用于从对等点请求icecandidate的代码触发了6次而不是一次。这真的很令人困惑,因为如果我错误地设计了一个大请求循环,我会期望无限递归,而不仅仅是6(8个onicecandidate事件)。那么谁能告诉我为什么下面的代码会产生6个递归?这里是消息处理程序,它只是发送一条由语法控制的socket.io消息:Muveoo.Messenger.input('icecandidaterequest',data);'icecandidaterequest':function(data){console

  9. javascript - 如何从 asar 存档提供静态文件 - 2

    我正在尝试构建一个带有服务器组件的Electron应用程序,使用express进行远程控制。express模块初始化为varstaticPath=path.resolve('app/assets')setupNotifications(server);app.use(cors());app.use('/api/',json());app.use('/api/',router);app.use('/assets',express.static(staticPath));console.log('servingstaticfilesfrom:'+staticPath);Elecrondoc

  10. javascript - 如何使用 Node js 和 babel 保留正确的行号 - 2

    我有以下设置并且我的错误/堆栈跟踪有问题我是否遗漏了什么?package.json看起来像:{"name":"xxxxxx","main":"server.js","private":true,"scripts":{"start":"nodemon--exec./node_modules/.bin/babel-nodeserver.js"},"dependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-pr

随机推荐