SideNav - open to selected entry - Material Design for Bootstrap

Topic: SideNav - open to selected entry

richardlstokes2 pro asked 6 years ago

Hi - I just purchased MDB Pro and I'm running into an issue. How can I automatically expand the sidenav menu to the currently selected page? Here is an excerpt from my code. I'm looking to have the menu automatically open to the entry with the a href=/DesiredURL when that is the current page. I'd also like the entry to be accented in some manner. Thanks!

        <ul class="collapsible collapsible-accordion">
            <li>
                <a class="collapsible-header waves-effect arrow-r" ><i class="fa fa-paperclip fa-fw"></i>Scenarios<i class="fa fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body">
                    <ul>
                        <li class="">
                            <a href="/Scenario">This should be visible and accented</a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect">XYZ</a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect">ABC</a>
                        </li>
                    </ul>
                </div>
            </li>

Add comment

richardlstokes2 pro answered 6 years ago

0 0 Best answer

It's not as simple as thet. Adding the 'active' class to the menus using jquery didn't work at first. It was a lot of work but I finally figured it out. This needs to be done before the mdb.js class is executed as that script is what opens up the marked menu items. If you add the 'active' class after it is called, nothing happens.

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

#1. You just need to write a script that gets current URL, then select link that redirects to current page and adds .active class to this and it's parent li

Add comment

richardlstokes2 pro answered 6 years ago

0 0 Best answer

I answered #2. I was able to do this by eliminating the padding for the collapsible menu li's and assigning it a class of .light-blue: .side-nav .collapsible > li { padding-left: 0px; padding-right: 0px; }

Add comment

richardlstokes2 pro answered 6 years ago

0 0 Best answer

(Edited previous post) Adding the active class to the links does open the menu now. Couple of questions though. 1. Is there a jquery script which could be run to check the hrefs of every entry on the navbar and automatically add the "active" class to it and its parent if it matches the current page? 2. Is there a class I can add to accent the currently active navbar item? Thanks!

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

You mean something like this?

<ul class="collapsible collapsible-accordion">
	<li class="active">
		<a class="collapsible-header waves-effect arrow-r active"><i class="fa fa-paperclip fa-fw"></i>Scenarios<i class="fa fa-angle-down rotate-icon rotate-element"></i></a>
		<div class="collapsible-body">
			<ul>
				<li>
					<a class="active" href="/Scenario">This should be visible and accented</a>
				</li>
				<li>
					<a href="#" class="waves-effect">XYZ</a>
				</li>
				<li>
					<a href="#" class="waves-effect">ABC</a>
				</li>
			</ul>
		</div>
	</li>
</ul>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

richardlstokes2

Pro User 10Support score
1Questions 3Answers 0Snippets