Forum Discussion

nakul's avatar
nakul
Ace
10 years ago

Navigation Toggle Css

Can anyone tell toggle css for navigation
irach15's avatar
irach15
Maven
9 years ago

Claudius,

I have a question about 'toggle' class too ;-)

We are re-designing our site main navigation to be a Mega Nav.

Simplified code:

<div class="main-nav">
    <ul>
        <li class="dropdown menu-catID"><a href="#" class="dropdown-toggle">Top Category<i class="fa fa-angle-down"></i></a>


          <div class="dropdown-menu">  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>
                 
                </div>  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>
                 
                </div>  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>                 
                </div> 
            </div>
        </li>
    </ul>
</div>

The question is:

- how to over-write drop-down toggle behavior 'drop on hover' to 'open on click', stay open and close on click?

- how to debug Lithium js to see what I need over-write?

- if I just get rid off 'toggle' class, it messes up everything.

- I tried using Bootstrap, too much work to debugg and layout issues...

note: we have same functionality as Lithium community ;-)

Claudius's avatar
Claudius
Boss
9 years ago

I'm not aware of any Lithium CSS classes you could simply apply to elements that would enable a JS menu on hover or click, I'm afraid. So apart from re-using some styling you might actually want to stay away from applying the "toggle" class to your mega nav.

 

Instead of overwriting Lithium behaviour it's probably easier to implement the specific menu opening/closing behaviour yourself in jQuery.