如何调整Shiny应用标签页：将子标签改为悬停显示而非新增行

需求说明 #

现有Shiny应用仅包含「Person」标签页，需新增「New Tab」标签页，其下设置「Sub 1」和「Sub 2」两个子标签，要求实现悬停「New Tab」时显示子标签的导航效果，避免生成新的标签行。

修改后的完整代码 #

ui <- navbarPage(
  title = "", # 留空，使用自定义标题栏
  tags$head(
    tags$style(HTML("
      body, .gt_table {
        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      }
      .title-wrapper {
        background-color: #6b4c2d;
        padding: 15px;
        margin-bottom: 0;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      }
      .title-wrapper h1, .person-ratings {
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 0;
        color: white;
        text-align: center;
        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        font-weight: normal;
      }
      .title-line1, .title-line2, .person-line {
        border: none;
        height: 7px;
        margin: 0;
        width: 100%;
      }
      .title-line1 {
        background-color: #e2eff5;
      }
      .title-line2 {
        background-color: #b8d8e7;
        margin-bottom: 0; /* 去掉原有margin，和导航栏衔接 */
      }
      .person-person {
        background-color: #6b4c2d;
        color: white;
        text-align: center;
        padding: 7.5px;
        font-weight: normal;
        font-size: 16.5px;
        margin-top: 5px;
      }
      .person-line {
        background-color: #b8d8e7;
      }
      /* 导航栏样式调整 */
      .navbar-default {
        background-color: white;
        border: none;
        border-bottom: 1px solid #e2eff5; /* 添加上边框分隔 */
        margin-bottom: 10px;
      }
      .navbar-default .navbar-nav > .active > a,
      .navbar-default .navbar-nav > .active > a:hover,
      .navbar-default .navbar-nav > .active > a:focus {
        background-color: #b8d8e7;
        color: white;
        font-weight: normal;
      }
      .navbar-default .navbar-nav > li > a {
        color: #6b4c2d;
        font-weight: normal;
      }
      /* 悬停展开下拉菜单 */
      .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* 消除点击时的位移 */
      }
      /* 下拉菜单样式匹配主题 */
      .dropdown-menu {
        background-color: white;
        border: none;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      }
      .dropdown-menu > li > a {
        color: #6b4c2d !important;
      }
      .dropdown-menu > li > a:hover {
        background-color: #b8d8e7 !important;
        color: white !important;
      }
    "))
  ),
  # 自定义标题栏
  div(class = "title-wrapper",
      HTML("<h1>Title</h1>")
  ),
  tags$hr(class = "title-line1"),
  tags$hr(class = "title-line2"),
  
  # 原有Person标签页
  tabPanel("Person",
           fluidRow(
             column(width = 4, align = "center", offset = 4,
                    selectInput("person", "Choose a person:", choices = unique(df$name))
             )
           ),
           fluidRow(
             column(width = 8, offset = 2,
                    h3("--------", class = "person-person"),
                    hr(class = "person-line"),
                    uiOutput("person_tbl")
             ),
             column(width = 8, offset = 2,
                    plotOutput("person_plot")
             )
           )
  ),
  
  # 新增带子标签的New Tab
  navbarMenu("New Tab",
             tabPanel("Sub 1",
                      h3("Sub 1 内容区域"),
                      p("这里可以添加Sub 1的具体内容")
             ),
             tabPanel("Sub 2",
                      h3("Sub 2 内容区域"),
                      p("这里可以添加Sub 2的具体内容")
             )
  )
)

server <- function(input, output, session) {
  # 保留原有server逻辑
}

shinyApp(ui = ui, server = server)

关键修改说明 #

1. 导航结构重构：使用navbarPage替代直接的fluidPage构建顶部导航体系，通过navbarMenu创建「New Tab」的下拉子标签
2. 悬停触发实现：添加CSS规则.navbar-nav .dropdown:hover .dropdown-menu，实现鼠标悬停时自动展开下拉菜单
3. 样式统一：调整下拉菜单、导航栏的样式参数，匹配原有主题的配色（#6b4c2d、#b8d8e7）和视觉风格
4. 布局衔接：修改.title-line2的margin-bottom为0，让标题栏和导航栏无缝衔接，保持页面整体美观

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