Dashboards & Visualizations

Changing the sub navigation menu from on hover to on click

pgadhari
Builder

Hi All,

I have used following top level sub-navigation menu from W3schools for our Splunk apps.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_subnav

The problem with above menu is that - some people are finding it difficult to use on-hover as it suddenly goes off while selecting different menu items. I want to change the same from on-hover to on-click. Please let me know what changes would be required in the CSS and HTML for the same. Thanks

PG

0 Karma

niketn
Legend

[UPDATED ANSWER]

Removed font-awesome css CDN link. Corrected couple of CSS settings.
Attaching image to show sub-menu on Click of Menu

alt text


@pgadhari if you need to handle clicks on html elements, you would require Simple XML JS Extension as pure CSS may not work.

Try the following example on similar lines with the example provided on w3Schools but adjusted for Splunk Dashboard.

Following is the Simple XML Dashboard Code:

<dashboard script="navigation_menu_click_handler.js">
  <label>Custom Menu W3Schools</label>
  <row>
    <panel>
      <html>
        <style>
          .panel-body.html{
            padding-left:0px !important;
            padding-right:0px !important;
            padding-top:0px !important;
          }
          #splunk_navbar.navbar {
            overflow: hidden;
            background-color: #333; 
          }

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

          .subnav {
            float: left;
            overflow: hidden;
          }

          .subnav .subnavbtn {
            font-size: 16px;  
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
          }

          #splunk_navbar.navbar>a:hover, .subnav:hover .subnavbtn {
            background-color: red;
          }

          .subnav-content {
            display: none;
            position: absolute;
            left: 0;
            background-color: red;
            width: 100%;
            z-index: 1;
          }

          .subnav-content a {
            float: left;
            color: white;
            text-decoration: none;
          }

          .subnav-content a:hover {
            background-color: #eee;
            color: black;
          }
        </style>
        <div id="splunk_navbar" class="navbar">
          <a href="#home">Home</a>
          <div class="subnav">
            <button class="subnavbtn">About <i class="icon-triangle-down-small"></i></button>
            <div class="subnav-content">
              <a href="#company">Company</a>
              <a href="#team">Team</a>
              <a href="#careers">Careers</a>
            </div>
          </div> 
          <div class="subnav">
            <button class="subnavbtn">Services <i class="icon-triangle-down-small"></i></button>
            <div class="subnav-content">
              <a href="#bring">Bring</a>
              <a href="#deliver">Deliver</a>
              <a href="#package">Package</a>
              <a href="#express">Express</a>
            </div>
          </div> 
          <div class="subnav">
            <button class="subnavbtn">Partners <i class="icon-triangle-down-small"></i></button>
            <div class="subnav-content">
              <a href="#link1">Link 1</a>
              <a href="#link2">Link 2</a>
              <a href="#link3">Link 3</a>
              <a href="#link4">Link 4</a>
            </div>
          </div>
          <a href="#contact">Contact</a>
        </div>

        <div style="padding:0 16px">
          <h3>Subnav/dropdown menu inside a Navigation Bar</h3>
          <p>hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file navigation_menu_click_handler.js used in dashboard above:

 require([
     'jquery',
     'splunkjs/mvc/simplexml/ready!'
 ], function ($) {
    console.log("Script Started");
    $(document).on("click","button.subnavbtn",function(){
        $(".subnav-content").each(function(){
            $(this).css("display","none");
        });
        $(this).next().css("display","block");
    });
    $(document).on("click","#splunk_navbar.navbar a",function(){
        $(".subnav-content").each(function(){
            $(this).css("display","none");
        });
    }); 
 });

PS: JavaScript file would need to be placed under your Splunk App's appserver/static folder. If the folder does not exist you would need to create one. Typical path looks like the following:

$SPLUNK_HOME/etc/apps/<yourSplunkAppName>/appserver/static

Since JavaScript is a static file you would need to restart/debug refresh or bump Splunk in your development environment for the changes to take effect. You may also need to clear Internet Browser history, close all browsers and open a new one in case JavaScript changes for Clicking on Menu to show Sub menu does not work.

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

@niketn - I have used this code in the prebuilt panel and further using that prebuilt panel for all the dashboards as top navigation menu. Now, how do I reference the above javascript in prebuilt panel ? as I understand that we cannot reference the "navigation_menu_click_handler.js" in prebuilt panel or is there a way for doing that ? can you please help on that ?

0 Karma

niketn
Legend

One option is to use the js in dashboard.js file in your app's appserver/static folder.

The dashboard.js file will be invoked in all dashboards, without you having to explicitly reference it in your dashboards. Ensure that the JS code is robust and will not fail in dashboards that do not have the elements from custom menu.

Otherwise if you have created a separate js file you need to include its reference in every dashboard you have created.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

Its working now. I have copied seperate js file to each app and referenced it in every dashboard. Seems to be working fine now. Thank you very much.

@niketnilay - can you reply to my comment above made on 21 Jan 11.50 PM, wherein I have given screenshot and video ? Thanks.

0 Karma

niketn
Legend

@pgadhari since that is more of a technical CSS, JS related issue related with your implementation, I will have to see whether I can spend some time over the weekend. Hope that is not too late for you!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

@niketnilay - did you get chance to fix the html, js and css issue, we were discussing on the submenu ?

0 Karma

niketn
Legend

@pgadhari pgadhaso sorry
But I have not so far been able to dedicate time.

@kamlesh_vaghela can you have a look at this if time permits?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

@kamlesh_vaghela - did you get chance to have a look at my issue ? can you help resolve that issue please ?

0 Karma

pgadhari
Builder

@niketnilay - did you get chance to look at the CSS and JS issue of the navigation menu please ?

0 Karma

pgadhari
Builder

@niketnilay - can you check on this issue pls ?

0 Karma

pgadhari
Builder

Ok no problem. But would appreciate if you can help resolve this issue earliest, over the weekend. Thanks again for your kind support. Appreciate it.

0 Karma

pgadhari
Builder

@niketnilay - I tried pasting that code in fresh dashboard, but somehow, now the menu is not loading. It flashes for sometime and then goes off, not sure where is the problem. I have tried restarting the splunk services too ? but still not working ?

0 Karma

niketn
Legend

Works fine for me. Check out Browser inspector tool to see if there is any Console Error.

I have changed code a bit. Removed link to font awesome stylesheet. And couple of minor css changes. Try of the link was causing the issue for you.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

@niketnilay - I used the new code, and its working fine. Actually, previous code was also good, but in dashboard.css someone put the same css id name for the navbar, due to which it was not loading. I commented that in dashboard.css and then it was working fine. But, now actually, I see some minor issues here. I am attaching the screenshots and a small video for the same.

  1. When you click on parent menu, it shows the sub-menus (child), but it sticks to that position, when
    I dont click futher on the sub-menu and click outside on any other page, the sub-menu is still showing, I mean the red bar sub-menu. Actually, it should go away, if I dont click on sub=menu. It sticks to that position ? https://ibb.co/P4WM9bk

  2. when you click on sub-menu (child) to select that page, the background-color is not changing, instead it is showing some gray border around it - see the referenced image ?

https://ibb.co/P4WM9bk

  1. Also, when you click on Parent menu, it shows sub-menu, but at the same time, the hover on other parent menus are working, which I think will create confusion for the users, unless they click on other parent menu, whether we can remove that hover ? -- see attached video

http://sendvid.com/h256tm4y

Please help resolve these issues ?

0 Karma

pgadhari
Builder

@niketnilay - can you reply on my above comments pls ? Thanks.

0 Karma

niketn
Legend

@pgadhari just noticed that you had commented out dashboard.css style which should not be removed as it would be in place due to some other dashboard's requirement.

In case you have a conflict between dashboard.css and your css, you should resolve the same by using specific css selector to your own html DOM element, one way would be to prefix unique id #splunk_navbar (or maybe more specific) before generic class based selectors like .subnav so that they become more specific. (This is just an example, you would need to apply specific CSS selector for all CSS styles that may be conflicting with existing CSS selector in dashboard.css).

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

Just saw it now - Actually I have already used different CSS selector for .navbar as .navbar1 for the menu and I have not commented dashboard.css (.navbar). May be that was the old post which you saw, after that I changed it accordingly.

But the main issue is when I click on other part of the page, that sub-menu still sticks to the page and does not go off. Can you help on that issue ?

0 Karma

pgadhari
Builder

Sure. I will verify it and revert. Thanks.

0 Karma

pgadhari
Builder

Point no. 2 image is here ==> https://ibb.co/4YjVZ4j

0 Karma

pgadhari
Builder

Sure. I wil try this out and revert. Thanks.

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...