More Group Sites
Education Books
School Rankings
Jobless Net
Better Home

Help | Subscribe/Unsubscribe | Rules | Other Group Sites: Better Education | Better Education Forum
Welcome Guest! To enable all features please Login or Register.



Go to last post Go to first unread
#1 Posted : Sunday, July 24, 2016 2:21:50 PM(UTC)

Rank: Administration


Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 11/23/2008(UTC)
Posts: 521

Activate Bootstrap menu item in a common place master page

When a page reloads, its menu tree is normally collapse. If we want to keep it expended and the active menu item remembered, we can set the Bootstrap menu item <li> tag of the page active: class='active". If it's parent <ul> tag is also set to active, all the active li and parent ul elements cannot be collapsed. This applies to SmartAdmin menus too. When a menu is clicked, the menu item will be highlighted in bold automatically and parent menu keep expanded.

The following example code works for ASP.NET master-children pages. A Child page can have local scripts like "$(document).ready(function () {..." or even using local scripts with 2nd ContentPlaceHolder, for example, using jquery DataTable functionalities in ASP.NET. Place the scripts BEFORE <asp:ContentPlaceHolder> tag.

                <%--required, event though already exists in this master page, this for this ContentPlaceHolder Content1--%>
                <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
                <script src=""></script>
                    if (!window.jQuery) {
                        document.write('<script src="js/libs/jquery-2.1.1.min.js"><\/script>');

                <script type="text/javascript">
                    $(document).ready(function () {

                         * Just active the Bootstrap menu item
                        //If it's parent <ul> tag is also set to active, all the active li and parent ul elements cannot be collapsed.
                        //$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
                        $('a[href="' + this.location.pathname + '"]').parents('li').addClass('active');

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

Workaround by 3rd party: set active class to nav menu from twitter bootstrap on each page js

Bootstrap add active class to li

Edited by user Sunday, September 18, 2016 2:32:58 PM(UTC)  | Reason: Not specified

Rss Feed  Atom Feed
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.