Shiny R实现mega menu巨型菜单导航栏运行异常问题求助

根因说明 #

• 类名冲突：Shiny默认加载Bootstrap前端框架，框架内置了.navbar、.dropdown等同名样式类，优先级高于自定义样式，导致菜单的交互和展示效果被覆盖失效
• DOM结构错误：fluidPage本身会自动生成<body>标签，额外用tags$body包裹内容会破坏页面原生DOM结构，影响样式的定位逻辑
• 代码冗余：末尾重复调用两次shinyApp，属于无效代码

修复方案 #

将自定义样式类名添加专属前缀避免和Bootstrap冲突，删除冗余的DOM结构和重复代码，同时调高菜单的z-index值避免被其他页面元素遮挡。

完整可运行代码 #

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(
      rel="stylesheet",
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    ),
    tags$style(
      '
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.mega-navbar {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.mega-navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.mega-dropdown {
  float: right;
  overflow: hidden;
}

.mega-dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #13347b;
  padding: 24px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.subtitle {
  color: white
}

.mega-navbar a:hover, .mega-dropdown:hover .dropbtn {
  background-color: #13347b;
  color: white;
}

.mega-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
}

.mega-dropdown-content .header {
  background: #13347b;
  padding: 16px;
  color: white;
}

.mega-dropdown:hover .mega-dropdown-content {
  display: block;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #13347b;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
'
    )
  ),
  tags$div(
    class = "mega-navbar",
    tags$img(
      src = "https://assets.turbologo.com/blog/en/2020/07/19084433/what-size-should-logo-be.png",
      width = 250),
    tags$div(
      class = "mega-dropdown",
      tags$button(
        class="dropbtn",
        "Dropdown 1",
        tags$i(class = "fa fa-caret-down")
      ),
      tags$div(
        class="mega-dropdown-content",
        tags$div(class="header",tags$h2("Mega Menu")),
        tags$div(class = "row", 
                 tags$div(class="column",
                          tags$h3(class = "subtitle","Categoria 1"),
                          tags$a(href="#","Link1")),
                 tags$div(class="column",
                          tags$h3(class = "subtitle","Categoria 2"),
                          tags$a(href="#","Link2")),
                 tags$div(class="column",
                          tags$h3(class = "subtitle","Categoria 3"),
                          tags$a(href="#","Link3"))
        )
      )
    )
  )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

运行上述代码即可得到和参考HTML完全一致的巨型菜单效果。

内容的提问来源于stack exchange，提问作者MatCordTo