menu 相关问题

我有一个简单的导航栏，这是 HTML 我有一个简单的导航栏，这是 HTML <body> <header> <nav class="menubar"> <ul class="menulist"> <li id="login" class="login"><a href="login.html">Login</a></li> <li id="settings" class="settings"><a href="settings.html">Settings</a></li> <li id="conf" class="conf"><a href="conf.html">Configuration</a></li> <li id="about" class="about"><a href="about.html">About</a></li> </ul> </nav> </header> </body> ul li { list-style: none; display: inline-block; float: left; line-height: 50px; } ul li a{ display: block; text-decoration: none; font-size: 14; font-style: arial; color: #1e1e1e; padding: 0 20px; } 我想禁用除登录之外的菜单项，直到用户实际登录页面。我在网上看到了很多例子，但没有什么真正有效的。你能给我举个例子吗？我是 HTML 新手，正在尝试学习。提前感谢您的宝贵时间我尝试过使用类，如你所见，但不清楚如何在 JS 中使用它们 ul li { list-style: none; display: inline-block; float: left; line-height: 50px; display: none; /*add this to hide all the menu*/ } ul li a { display: block; text-decoration: none; font-size: 14; font-style: arial; color: #1e1e1e; padding: 0 20px; } /*add these*/ ul li.login { display: block; } /*add these*/ ul.logged li { display: inline-block; } /*you need to add class 'logged' to 'ul' element after the user logged in, then all the menu will showing*/ <nav class="menubar"> <ul class="menulist"> <li id="login" class="login"><a href="login.html">Login</a></li> <li id="settings" class="settings"><a href="settings.html">Settings</a></li> <li id="conf" class="conf"><a href="conf.html">Configuration</a></li> <li id="about" class="about"><a href="about.html">About</a></li> </ul> </nav>

javascript html css menu

回答 1 投票 0

如何在 Dreamweaver 中创建自定义插入菜单项？

我需要创建一个插入一些专有标记的菜单项，例如像这样的代码标记 <###LoginForm###> 正如我的 CMS 所使用的。我发现这很难——从逻辑上讲，并且根据

xml configuration menu dreamweaver

回答 2 投票 0

我对编码完全陌生，renpy 正在以我从未测试过的方式测试我

好吧，所以我试图让玩家可以选择多个选项，而他们选择的选项我将标记为稍后在游戏中使用。但我不希望他们多次选择相同的选项，所以......

if-statement menu label renpy

回答 1 投票 0

如何让 Javascript 在特定屏幕尺寸上运行？

下面是我用于网站移动菜单的一些 Javascript。当移动菜单打开时，此 Javascript 会阻止菜单外部的内容滚动，并在出现某个项目时关闭菜单

javascript html css mobile menu

回答 2 投票 0

Google 文档菜单和工具栏

我的菜单和工具栏上的字体很小。有没有办法增加文本字体大小？我用谷歌搜索答案，但我只找到了如何增加文档中的字体，这是我已经知道的......

menu google-docs toolbar

回答 1 投票 0

自定义插件顶部菜单 url 替换为自定义帖子类型列表链接

如何更改插件管理菜单中自定义帖子类型菜单项的位置？我创建了自定义插件 WPTutor LMS 并创建了一个自定义帖子类型课程我想展示我的自定义插件...

wordpress post plugins menu admin

回答 1 投票 0

PyQt：在系统托盘应用程序中显示菜单

首先，我是一名经验丰富的 C 程序员，但对 python 很陌生。我想使用 pyqt 在 python 中创建一个简单的应用程序。让我们想象一下这个应用程序就像它运行时一样简单......

python menu pyqt system-tray

回答 9 投票 0

如何强制UIKit弹出菜单按钮项的顺序？

我在 Swift 应用程序的同一屏幕上有几个 UIKit 弹出菜单按钮，它们具有相同的菜单项。这些按钮是通过调用一个函数来构建的，该函数使用字符串数组来创建列表...

swift button menu uikit popup

回答 1 投票 0

Wordpress - 如何从我的插件将自定义导航菜单放置在网站页脚中

我在我的网站上为自定义移动菜单创建了一个插件。一切都按我想要的方式工作，除了我无法弄清楚如何从我的插件文件中将菜单放置在我的网站上，而不是通过添加...

woocommerce plugins menu

回答 1 投票 0

是否有一个when子句上下文来匹配vscode扩展中编辑器的内容

我正在编写一个具有菜单编辑器/上下文贡献的 vscode 扩展。我只希望在编辑器的内容与正则表达式匹配时显示此菜单项。我通读了

menu vscode-extensions

回答 1 投票 0

当 contextMenu 处于活动状态时，如何将所选文本的背景颜色从透明更改为黑色？

#这只是代码的示例，因此当我长按“文本（“长按菜单”）”并显示上下文菜单以更改背景颜色时：结构 ContentView: Vi...

ios xcode swiftui menu contextmenu

回答 2 投票 0

带图像的 WPF 菜单项

如何定义 MenuItem.Icon 以便将 MenuItemHeader 文本放置在菜单项图像下方？感谢帮助！

wpf image menu menuitem

回答 4 投票 0

“退出”按钮和徽标不可点击

我有一个用 HTML 和 CSS 创建的菜单栏。我的按钮集中在菜单栏的中间，工作得很好。我的问题是机翼上的按钮......

html css button menu click

回答 1 投票 0

bootstrap-vue多级下拉

我正在使用 BootstrapVue，并且有一个多级下拉菜单（带有类别）。这是官方网站的一个例子： https://bootstrap-vue.org/docs/components/dropdown 我正在使用 BootstrapVue，并且有一个多级下拉菜单（带有类别）。这是官方网站的示例： https://bootstrap-vue.org/docs/components/dropdown <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2"> <b-dropdown-item>First Action</b-dropdown-item> <b-dropdown-item>Second Action</b-dropdown-item> </b-dropdown> 但我不知道如何创建多级菜单（我将下拉菜单放在彼此内部，但它不起作用）！只有一个单级下拉示例！我怎样才能创建一个多层次的？谢谢！因此，正如我在评论中提到的，您可以包装 b-dropdown 事件并执行如下自定义操作： window.onload = () => { new Vue({ el: '#app', data() { return { name: 'BootstrapVue', isDropdown2Visible: false } }, mounted: function () { this.$root.$on('bv::dropdown::show', bvEvent => { if(bvEvent.componentId === 'dropdown-2') { this.isDropdown2Visible = true; } }) this.$root.$on('bv::dropdown::hide', bvEvent => { if(bvEvent.componentId === 'dropdown-2') { this.isDropdown2Visible = false; } if(this.isDropdown2Visible) { bvEvent.preventDefault() } }) } }) } body { padding: 1rem; } <link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-dropdown id="dropdown-1" text="Dropdown Button 1" class="m-md-2"> <b-dropdown-item>First Action 1</b-dropdown-item> <b-dropdown-item>Second Action 1</b-dropdown-item> <b-dropdown id="dropdown-2" text="Dropdown Button 2" class="m-md-2"> <b-dropdown-item>First Action 2</b-dropdown-item> <b-dropdown-item>Second Action 2</b-dropdown-item> </b-dropdown> </b-dropdown> </div> 你可以尝试这样的事情此片段包含一级菜单的逻辑。您可以将代码编辑为按您的要求 JSBin 链接 new Vue({ el: "#app", data: { menu: [ { title : 'one'}, { title : 'two'}, { title : 'three',showSubMenu : false, children : [ { title : 'four'}, { title : 'five'}, ]}, ] }, methods : { toogleItem(index){ if(this.menu[index].children){ if(!this.menu[index].showSubMenu){ this.menu[index].showSubMenu = true } else { this.menu[index].showSubMenu = false } } } } }) .sub-menu{ position: absolute; min-width: 10rem; padding: .5rem 0; margin: .125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title>  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />  <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> </head> <body> <div id="app"> <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2"> <b-dropdown-item v-for="(item,index) in menu" :key="index" @mouseover.native="toogleItem(index)" @mouseout.native="toogleItem(index)"> <span>{{item.title}} <b-icon-caret-down-fill :scale="0.6" v-if="item.children"></b-icon-caret-down-fill></span> <div v-if="item.children" class="sub-menu" v-show="item.showSubMenu"> <b-dropdown-item v-for="(item,index) in item.children" :key="index">{{item.title}} </b-dropdown-item> </div> </b-dropdown-item> </b-dropdown> </div> </body> </html>

vue.js menu dropdown bootstrap-vue

回答 2 投票 0

menu 相关问题

最新问题