Creating an accordion nav for only mobile

[Andrew Jordan, geändert vor 8 Jahren.]

Greetings,

Creating a web page with Liferay 6.2 that has a primary and sub nav menu for Desktops, but then needs to consolidate the sub menu into a single menu for mobile. We figured an accordion nav menu would make the most sense. I'm finding that Liferay adds an additional layer of complexity to most things you try to accomplish. The toggling accordion menu, which I'm creating with CSS/jQuery, for instance, still displays the div that houses the sub menu regardless of the css that tell it to not display (display:none). It's as if Liferay is overriding any div that is display none and making it display.

I've tried adding the !improtant tag to override Liferay, and it is invisible, but I can still see the div and it's sub menu nav divs when I look at the page's source in Chrome's dev tools.

This is my CSS:

.mobile-child-nav-links, .mobile-child-nav-link, .element.style.mobile-child-nav-links, .element.style.mobile-child-nav-link {
        display: none;
        visibility:  hidden;
        background-color: #AF251F !important;
        color: white !important;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: .5em;
        font-size: .8em;
        font-weight: 400;
        padding-left: 1em;
}
    @media screen and (max-width: 1200px) {
        .mobile-child-nav-links, .mobile-child-nav-link {
         display: block;
         visibility: visible;
        }
        
    
    }

This is my jQuery placed in the head of portal_normal.vm:

 <script>
    // Responsive accordian menu jquery 
    $( document ).ready(function() {
        $('.mobile-child-nav-links').hide();
        $('.primary-nav-link').click(function(e) { 
                $(this).nextAll('.mobile-child-nav-links').eq(0).slideToggle();
        });
    });
    </script>

What am I missing with Liferay? This is not the first time I've tried to accomplish something custom in the theme and have hit many roadblocks, many of which wouldn't be an issue if I wasn't using Liferay.

[Garrett Culos, geändert vor 8 Jahren.]

Can you attach your navigation template(s)?

[Andrew Jordan, geändert vor 8 Jahren.]

Thank you, Garrett for your interest. However, I think I resolved the issue.

I am using jQuery's slideToggle to accomplish the accordion effect. I didn't know that the slideToggle inserts inline CSS of 'style:"display:block;" for the element your targeting. Because of this, the element's inline CSS is overriding my CSS in the external stylesheet. I have made many efforts to remove that style as well as trying to manipulate it without much luck. I may have to achieve the accordion effect with CSS3 instead. I jumpted to conclusions in thinking it was LIferay's stock CSS that was interfering, but I guess that's not the case.

SlideToggle effect would be perfect if I only needed it on a page for both mobile and desktop. But because I'm detecting screen sizes and trying to turn it off if it's Desktop size, slideToggle prevails and seems to override all attempts to hide the targeted div that triggers the toggle.

Big fan of jQuery, but not such a fan of this functionality.