If I setup a Master page to display a header similar to the following
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
I want to set the element active for the current page the user is on so in html it will look like this if default.aspx is the active page.
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown active"> <%--active--%>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
The header menu is based on an existing template so is all html with CSS styling and does not contain any asp: controls. I know I can do this in codebehind by setting the attributes but most of the searches I've pulled up say there could be a better way or here's a dirty workaround link1 & link2
What would be the best way(s) of doing this?
First you have to set all li tags as server Controls
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx" runat="server" id="lidefault">Home</a>
</li>
<li>
About Us
</li>
</ul>
do like the above for all li tags
Then in master page load,
string sURL=Request.Url.ToString().ToLower();
if (sURL.Contains("/default.aspx")
lidefault.Attributes.Add("class", "active")
else if (sURL.Contains("/about.aspx")
liabout.Attributes.Add("class", "active")
// do like the above for the rest li tags
You can check it with javascript. Set a foreach loop for check each link of your menu. If your menu url equal the page url, add active class with .addClass() method.
Related
I have these links
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
My home page url is abcd.com
Home page have some data according to # tag. The # show a scroll down only for home page. when i click on any link then url change in abcd.com/#who-are-we and scroller point that section on home page,
But i want one thing.
When i will go on any other page as like products page or contact us page then the click action of these links go on about us page. Will you please tell me how can i set a conndition for url in php
You should look at the difference between named Anchors and links to other pages.
You can combine the page AND the named anchor like this:
go to contact page to anchor ABC
Here an example:
named-anchors: first 3 <a href>'s point to a location in this document
links: other 2 <a href>'s point to other pages...
That should do the trick.
<ul>
<li>About us:
<ul>
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
</ul>
</li>
<li>Contact Page</li>
<li>Products Page</li>
</ul>
<a name="who-are-we">
<h2>Who are we</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="how-it-works">
<h2>how-it-works</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="what-to-expect">
<h2>what-to-expect</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
Basically there are 2 pages with me :-
Index page
<div class="box-footer text-center">
View my Groups
</div>
MyGroups.html
<ul class="nav nav-tabs pull-right ui-sortable-handle">
<li class=""><a id="clickSearch" data-toggle="tab" href="#search" aria-expanded="false">Search</a></li>
<li class=""><a data-toggle="tab" href="#sent" aria-expanded="false">My Groups</a></li>
<li class="active"><a data-toggle="tab" href="#all" aria-expanded="true">All Groups</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Groups</li>
</ul>
<div id="sent" class=" tab-pane">
//some content
</div>
Now how can user be redirected from HTML page 1 on clicking " View my groups" to the #sent div on another Html page ?
Things seacrhed :- Using jquery .click() function
But Need proper guidance in syntax .
Had a look on this , got the basic idea but still not able to achieve what's needed .
You can link directly from the href of the first page
View my Groups
adding the #sent to the link will automatically scroll to the appropriate div
If you go to this dev site (it's a Joomla site using bootstrap) and view on 1023px wide screen or smaller (or any smartphone), there is a hamburger menu. If you click it, it drops down a menu and if you click "Learn More", it jumps to a form (because it's really just an anchor). However, the dropdown menu stays open (because it's not going to a new page I guess).
Is there an easy way to add some code that basically says "any dropdown menu click should CLOSE the dropdown menu"?
Here is the code for the menu when it's expanded (first nav tag is probably all that's important)...
<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0">
<li>
Home
</li>
<li class="dropdown">
Features <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Scheduling & Routing
</li><li>
Billing & Invoicing
</li><li>
Mobile Workforce
</li><li>
Office Staff Persona
</li><li>
Owner Persona
</li><li>
Field Worker Persona
</li></ul></li>
<li class="dropdown">
Industries <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Cleaning
</li><li>
Lawn
</li><li>
Pest
</li><li>
HVAC
</li></ul></li>
<li>
Pricing
</li>
<li class="active dropdown">
About <b class="caret"></b>
<ul class="level1 dropdown-menu"><li class="current active">
Resources
</li><li>
Support
</li><li>
Security
</li></ul></li>
<li class="">
Learn More
</li>
<li>
Contact
</li>
<li>
Log In
</li>
</ul></nav>
And then when it collapses again, the classes in the nav tag look like this...
<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">
So it looks like that class of "in" needs to go away. Therefore, I am trying this jquery, but it isn't working. Shouldn't this work?
jQuery(function($) {
$("li a").click(function() {
$("nav.t3-navbar-collapse").removeClass( "in" );
});
});
Sorry for the bad luck on the first question, I actually just did this recently so I have a snippet on hand for you.
Basically what you want to tell the code to do is close the nav when you click an anchor, so you target the a and use a slideUp property.
$(document).ready(function(){
$("a").click(function(){
$("Your_Nav_ID").slideUp('slow');
});
});
I am using Bootstrap Treeview from my ASP.NET master page. Please see the sample code below. This code is in a Master page. The treeview is losing its state when going to a child page (for example, Page5). The menu gets collapsed.
What would be the best way to keep the respective treeview expanded? For example, when I go to Page 3, I want to have the secondMenuli expanded.
NOTE: I tried it without master page and it works perfectly, but I was looking to solve it using the master page.
<ul id="leftmenulist" class="sidebar-menu">
<li id="firstMenuli" class="active">
<a href="Home.aspx">
<span>Home</span>
</a>
</li>
<li id="secondMenuli" class="treeview">
<a href="#">
<span>Second Menu</span>
</a>
<ul class="treeview-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li id="thirdMenuli" class="treeview">
<a href="#">
<span>Third Menu</span>
</a>
<ul class="treeview-menu">
<li>Page4</li>
<li>Page5</li>
<li>Page6</li>
</ul>
</li>
</ul>
I've been combing around looking for an example of the same problem I'm having but no luck yet. I'm trying to create a multi-level collapsible side navigation in bootstrap using bootstrap.js.
My problem is that I've added in the second level but when I click the list item to trigger it to open it collapses the whole menu. When I re-open the menu, the second-level menu is open also. My code is below:
<div class="sidebar-nav">
<p class="sidenav-header">Units and Lessons:</p>
<ul class="nav nav-list">
<li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
Content Areas
</span>
<ul class="nav nav-list collapse" id="content-areas">
<li>All</li>
<li>Urban Planning</li>
<li>Sustainability</li>
<li>Public Administration</li>
<li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas">Health
<ul class="nav-secondary nav-list collapse" id="nav-health">
<li>Introduction</li>
<li>Lesson: What is Epilepsy?</li>
<li>Lesson: Pathology</li>
</ul>
</li>
</ul>
</li>
<li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
Languages
</span>
<ul class="nav nav-list collapse" id="languages">
<li>All</li>
<li>Arabic</li>
<li>Turkish</li>
<li>Hebrew</li>
</ul>
</li>
</ul>
</div>
The specific section I'm talking about is under the "Health" list item under "Content Areas".
Any help is greatly appreciated. Thanks!
The problem with your markup is that whole menu is collapsed when you try to click within the list. For example, if you click All inside of Content Areas it collapse the Content Areas. The same is happening for the second level menu, Health in your case.
This is caused because you don't have an accordion-heading specified. Take a look into Bootstrap Collapse Documentation where you will find an example like this:
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
Once you specify the heading your second level nav should work fine.
I have created a fiddle for you to verify. I modified the Content Areas according to the Documentation and the second level menu worked fine. However, I did not modify the Languages menu items so that you can see how it's acting (try clicking within the list once the Languages is expanded)
While Similar to Pitamber's example I would not add some of the extra classes, especially the extra div with class "accoridan-heading", just apply that class to the a tag as so.
<ul class="nav nav-list">
<li>
<a>Menu Item with No Sub-Items</a>
</li>
<li>
<a class="accordion-heading" data-toggle="collapse" data-target="#submenu">
<span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span>
</a>
<ul class="nav nav-list collapse" id="submenu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
You can go further and add CSS and or some JS to place some contrast on the sub-menu and also to flip/change the caret icon when a menu item is expanded and collapsed.