Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

navebarMenu is always highlighted

Tags:

r

shiny

I have a navbarPage, within that I have three navbarMenu. But the first navbarMenu i.e, "Help" is always highlighted by default and with that navbarMenu tabpanel "Manual" is also always highlighted. How to avoid that. The sample code is shown below

ui.r

shinyUI(fluidPage(theme = "bootstrap.css",
                  (navbarPage("B Version",
                              position = c("fixed-top"),
                              fluid=TRUE,
                              navbarMenu("Help",
                                         tabPanel(
                                           a("Manual",
                                             target="_blank", href="Manual.pdf")
                                         ),
                                         tabPanel(
                                           a("Supporte",
                                             target="_blank", href="gpl.pdf")
                                         ),
                                         tabPanel(
                                           a("Tutorials",
                                             downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                             downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                           )
                                         )
                              ),
                              navbarMenu("Sample Data",
                                         tabPanel(
                                           downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                         )
                              ),
                              navbarMenu("Stand-Alone Version",
                                         tabPanel(
                                           downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           a("Stand-alone Manual",
                                             target = "_blank", href= "Stand-alone.pdf")
                                         )
                              )

                  )
                  )
)
)

server.r

shinyServer(function(input, output,session) {
})

-------------------------------------------------------------------

*Edit

This part show how it reacts with the answer provided @amrrs . It shows the data when the cursor is pressed and then again disappears.

ui.r

shinyUI(fluidPage(theme = "bootstrap.css",
                  tags$script("setInterval(function(){
                              $('.active').removeClass('active');//remove class active
                              },1000);"),
                  (navbarPage("B Version",
                              position = c("fixed-top"),
                              fluid=TRUE,selected = "none",
                              navbarMenu("Help", 
                                         tabPanel(
                                           a("Manual",
                                             target="_blank", href="Manual.pdf")
                                         ),
                                         tabPanel(
                                           a("Supporte",
                                             target="_blank", href="gpl.pdf")
                                         ),
                                         tabPanel(
                                           a("Tutorials",
                                             downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                             downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                           )
                                         )
                              ),
                              navbarMenu("Sample Data",
                                         tabPanel(
                                           downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                         )
                              ),
                              navbarMenu("Stand-Alone Version",
                                         tabPanel(
                                           downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           a("Stand-alone Manual",
                                             target = "_blank", href= "Stand-alone.pdf")
                                         )
                              )


)
),

br(),
br(),



sidebarLayout(
  sidebarPanel(
    h5("Upload Data Files",style="bold"),
    fileInput("files", 
              "Choose CSV/txt processed files or raw files",
              multiple = "TRUE",
              accept=c('text/csv',
                       'text/comma-separated-values,
                       text/plain', '.csv','.cel','.TXT','.txt'))

                      ),

                    mainPanel(
                      tabsetPanel(id = "MaTabs",
                        tabPanel("Source-data", dataTableOutput("sourced"))
                      )

                    )
                    )))

server.r

shinyServer(function(input, output,session) {

  output$sourced <- renderDataTable(mtcars)
})
like image 326
AwaitedOne Avatar asked Oct 13 '17 10:10

AwaitedOne


People also ask

How do I keep a clicked navigation button highlighted?

If the button has to stay highlighted even if you're not holding the click button, use a:focus { background-color: blue; //or others } Instead, if you want the button to be highlighted only when you are holding them clicked use a:active { background-color: yellow; } hope this helps, good luck with your html.

How to highlight active menu in WordPress?

Step 1 – From the WordPress dashboard navigate to Appearance > Menus. Step 2 – Click on Screen Options and tick the CSS Classes checkbox. Step 3 – Click on the menu item that needs to be highlighted. Step 4 – Add CSS class to the menu item and save the changes in the menu.


1 Answers

Based on this answer adding a small snippet of js helps it.

Updated Code with hiding active only for nav:

 shinyUI(fluidPage(theme = "bootstrap.css",
                  tags$script("setInterval(function(){
                              $('.nav').removeClass('active');//remove class active
                              },1000);"),
                  (navbarPage("B Version",
                              position = c("fixed-top"),
                              fluid=TRUE,selected = "none",
                              navbarMenu("Help", 
                                         tabPanel(
                                           a("Manual",
                                             target="_blank", href="Manual.pdf")
                                         ),
                                         tabPanel(
                                           a("Supporte",
                                             target="_blank", href="gpl.pdf")
                                         ),
                                         tabPanel(
                                           a("Tutorials",
                                             downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                             downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                           )
                                         )
                              ),
                              navbarMenu("Sample Data",
                                         tabPanel(
                                           downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                         )
                              ),
                              navbarMenu("Stand-Alone Version",
                                         tabPanel(
                                           downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           a("Stand-alone Manual",
                                             target = "_blank", href= "Stand-alone.pdf")
                                         )
                              )


)
),

br(),
br(),



sidebarLayout(
  sidebarPanel(
    h5("Upload Data Files",style="bold"),
    fileInput("files", 
              "Choose CSV/txt processed files or raw files",
              multiple = "TRUE",
              accept=c('text/csv',
                       'text/comma-separated-values,
                       text/plain', '.csv','.cel','.TXT','.txt'))

              ),

  mainPanel(
    tabsetPanel(id = "MaTabs",
                tabPanel("Source-data", dataTableOutput("sourced"))
    )

  )
)))
like image 166
amrrs Avatar answered Sep 20 '22 02:09

amrrs