Currently, I am in the process of developing a user-friendly interface with senior tabs and sub-tabs underneath to guide users through various options. To better assist users in navigating these choices, I have implemented a system where inactive senior tabs are shaded while active senior tabs remain unshaded. I would like to extend this design principle to the sub-tabs as well, as illustrated in the accompanying image. Are there any suggestions on how I can achieve this? This inquiry is related to my previous post on Stack Overflow, where I utilized code from the initial response:
https://i.sstatic.net/N7amP.png
I am open to any ideas for enhancing the visual appeal of the tabs as well!
Sample Code:
library(shiny)
library(shinyjs)
ui <-shinyUI(fluidPage(
h1("Tabs"),
tags$style(HTML("
.tabbable > .nav > li > a {background-color: #E0E0E0; color:black}
.tabbable > .nav > li[class=active] > a {background-color: white;color:black}
")),
tabsetPanel(
tabPanel("Tab 1", div(style = "margin-top: 5px"),
tabsetPanel(
tabPanel("Tab 1 subtab A"),
tabPanel("Tab 1 subtab B")
)
),
tabPanel("Tab 2", div(style = "margin-top: 5px"),
tabsetPanel(
tabPanel("Tab 2 subtab A"),
tabPanel("Tab 2 subtab B")
)
),
tabPanel("Tab 3",h2("senior tab 3")),
tabPanel("Tab 4",h2("senior tab 4")),
tabPanel("Tab 5",h2("senior tab 5")),
tabPanel("Tab 6",div(style = "margin-top: 5px"),
tabsetPanel(
tabPanel("Tab 6 subtab A"),
tabPanel("Tab 6 subtab B")
)
)
)
))
server <- function(input, output) {}
shinyApp(ui=ui,server=server)