Link to home
Start Free TrialLog in
Avatar of TECH_NET
TECH_NET

asked on

Help with the menu toggling

I have a web page that displays a menu bar at the top of each page. This is part of my masterpage.

What i am trying to achieve it that when i click on any one of the tabs, i highlight that tab by setting the class property to t_tab_s and other are set to class property t_tab
( the class properties are specified in the Css file)

Now when i click on tab 2 (ie Interview Tips), i need the class to be set as t_tab_s and so forth.

How can i achieve that functionality.



<table>
 <tr>
			        <td align="left" valign="bottom" class="top_center_tab_td">
				        <div id="tab1" runat="Server" class="t_tab_s"><a href="Default.aspx">Home</a></div>
				        <div id="tab2" runat="Server" class="t_tab"><a href="ArticlesView.aspx?CategoryID=1">Interview Tips</a></div>
				        <div id="tab3" runat="Server" class="t_tab"><a href="InterviewQuestionsView.aspx">Questions </a></div>
				        <div id="tab4" runat="Server" class="t_tab"><a href="Powerpacks.aspx">Powerpacks</a></div>
				        <div id="tab5" runat="Server" class="t_tab"><a href="Forums.aspx">Community</a></div>
				        <div style="font-size:11px; padding-top:7px; text-align:right; line-height:10px; ">&nbsp;</div>
			        </td>
		        </tr>
</table>

Open in new window

Avatar of naspinski
naspinski
Flag of United States of America image

To do that with asp.net, you are going to have to convert those things into .net controls.
Panel <=> div
LinkButton <=> link

actually, a hyperlink is more like a link, but we need the link to post back info, so we will use a LInkButton.  So now this:

<div id="tab1" runat="Server" class="t_tab_s"><a href="Default.aspx">Home</a></div>
<div id="tab2" runat="Server" class="t_tab"><a href="ArticlesView.aspx?CategoryID=1">Interview Tips</a></div>
<div id="tab3" runat="Server" class="t_tab"><a href="InterviewQuestionsView.aspx">Questions </a></div>
<div id="tab4" runat="Server" class="t_tab"><a href="Powerpacks.aspx">Powerpacks</a></div>
<div id="tab5" runat="Server" class="t_tab"><a href="Forums.aspx">Community</a></div>

will look like this:


<asp:Panel id="tab1" runat="Server" cssclass="t_tab_s">
    <asp:LinkButton ID="lb_tab1" runat="server" PostBackUrl="Default.aspx" onclick="menu_Click">Home</asp:LinkButton>
</asp:Panel>
<asp:Panel id="tab2" runat="Server" cssclass="t_tab">
    <asp:LinkButton ID="lb_tab2" runat="server" PostBackUrl="ArticlesView.aspx?CategoryID=1" onclick="menu_Click">Interview Tips</asp:LinkButton>
</asp:Panel>
<asp:Panel id="tab3" runat="Server" cssclass="t_tab">
    <asp:LinkButton ID="lb_tab3" runat="server" PostBackUrl="InterviewQuestionsView.aspx" onclick="menu_Click">Questions</asp:LinkButton>
</asp:Panel>
<asp:Panel id="tab4" runat="Server" cssclass="t_tab">
    <asp:LinkButton ID="lb_tab4" runat="server" PostBackUrl="Powerpacks.aspx" onclick="menu_Click">Powerpacks</asp:LinkButton>
</asp:Panel>
<asp:Panel id="tab5" runat="Server" cssclass="t_tab">
    <asp:LinkButton ID="lb_tab5" runat="server" PostBackUrl="Forums.aspx" onclick="menu_Click">Community</asp:LinkButton>
</asp:Panel>

Open in new window

and you just have to make your click event, which I named as menu_Click.  Which will now look like this:
protected void menu_Click(object sender, EventArgs e)
{
    Panel[] tabs = { tab1, tab2, tab3, tab4, tab5 }; //fill this with your tabs
    LinkButton clickedLink = (LinkButton)sender;
    foreach (Panel p in tabs)
        p.CssClass = "t_tab";
    Panel clickedTab = (Panel)this.FindControl(clickedLink.ID.Replace("lb_", string.Empty));
    clickedTab.CssClass = "t_tab_s";
}

Open in new window

What I did in the code-behind is pretty simple.
-Line 5/6 I run though all teh tabs and set them to the 'base' css class
-Line 7 I take the link that clicked, strip off the 'lb_' from it's ID, whic as you will notice corresponds directly to the tab it reside in (ie, 'lb_tab1' is in 'tab1', 'lb_tab3' is in 'tab3', etc.) and choose that tab
-Line 8 I choose the 'selected' cssClass

We had to change everything to asp.net control so it would be easy to manipulate it behind the scenes.  This is really only one of many, many ways to do with with asp.net.  This is also possible with Javascript and with other methods like the asp:menu control.  But this one seems the easiest and most straight-forward.
Avatar of Infinite_Recursion
Infinite_Recursion

My 2 cents:
Depending on what you are trying to accomplish and how you are trying to accomplish it, all this can be done using javascript without any server side controls or even posting back. That is as I said depending on things like wheter you HAVE to post back or not.
I also thought that, but considering these are hyperlinks, you are generally going to want postbacks.
Yes I missed the part where these are hyperlinks pointing to other pages, my bad.
Avatar of TECH_NET

ASKER

Hi naspinski: When is the menu_click  get fired. I do not see menu being declared any where in the code.
Sorry i figure the menu_click event. Now when i click on any tab, i do not get the tab color changed for the first click but color changes when i click it again (ie second time)
This is what i observed while debugging. one first click only Page_load is being executed. One the second click the page_load gets executed and then menu_click event is fired.

Any thoughts on this?
that seems really odd, I tested this exactly and if declare  onclick="menu_Click" it should fire every time?

Try changing your menu_Click to:
protected void menu_Click(object sender, EventArgs e)
{
    Response.Write("menu_Click() FIRING<br />");
}

Open in new window

You can see the output and functionality at
http://interviews.expertswatch.com/

I placed the menu_click method in the site.master.vb file. which is a master page.
The only difference in our code is that i converted to vb.
here is the script

 Protected Sub menu_Click(ByVal sender As Object, ByVal e As EventArgs)

        Response.Write("menu_Click() FIRING<br />")
        Dim tabs As Panel() = {tab1, tab2, tab3, tab4, tab5}
        'fill this with your tabs
        Dim clickedLink As LinkButton = DirectCast(sender, LinkButton)
        For Each p As Panel In tabs
            p.CssClass = "t_tab"
        Next
        Dim clickedTab As Panel = DirectCast(Me.FindControl(clickedLink.ID.Replace("lb_", String.Empty)), Panel)
        clickedTab.CssClass = "t_tab_s"

    End Sub
be at a machine with VS in about 2 hours
I think that posting back to ANOTHER page means that the events will NOT fire on the second page, that is why I am guessing Session should be used to save the state of the menu and figure out the highlighting of the menu.
That is not true, as I have tested this and it is working in c# perfectly
change your declaration to the following, you are not handling the clicks correctly in VB
Protected Sub menu_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lb_tab4.Click, lb_tab2.Click, lb_tab3.Click, lb_tab4.Click, lb_tab5.Click

Open in new window

Hi, it does not work either.

Pl find enclosed the solutions file at
http://interviews.expertswatch.com/expertswatch.zip
ASKER CERTIFIED SOLUTION
Avatar of naspinski
naspinski
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
also, with this, you can just revert all the linkbuttons back to <a href>'s
You could also use Request.ServerVariables("SCRIPT_NAME") to get the page currently loaded.