HeaderMenu Selected When Click On It

Hi,

I have a hover menu on my site, I would like to add Visited or Selected feature when someone clicks on a button but I don't know how, not in ASP.NET??

Here's the link to my site:

www.myamericanfurnituregalleries.com

There's some lead under the Top Navagation Menu but there's no specific tips in adding the codes to HeaderMenu.ASCX; HeaderMenu.ASCX.CS; and what else to add in the CSS file like ul-mainmenu; li-aboutus; etc???

Regards,

Tom

Hi there,

do you mean you want to visually show if the button is selected or active?
If yes, then it's more css related.

http://www.w3schools.com/Css/css_link.asp

Thank you so much Deval for your quick reply. After I have added the codes in CSS file, it is working somewhat, but not the way I really needed to be - all selected buttons stay selected.

I would like the button to stay selected when you click on it, but to be unselected when you click on another button. I think I need to modify the HeaderMenu.ascx file. But where do I begin?

Here's the code I modified in the CSS file:

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  MASTER HEADER MENU

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.headermenu
{  
   background: #efebce;
   height: 32px;
   width: 960px;
}

.headermenu ul{
  display: inline;
}

.headermenu li
{
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

/* ancors Start
---------------------*/
.headermenu a:link, a:visited {
color:#EEE;
text-decoration:none;
}

.headermenu a:hover {
text-decoration:none;
}

.headermenu a:active {
color:#0000FF;}

.headermenu li a  
{ display: block;
  float: left;
  height:26px;
  text-decoration: none;
  padding: 6px 19px 0px 19px;
  border-right: 2px solid;
  font-weight: bold;
  background: #935d29;
  color: #4c1d00;
  border-color: #935d29;
  background:transparent url('images/nav_tab_bg.png') no-repeat scroll left top;
}

.headermenu li a:hover, .headermenu li a.selected, .headermenu li a.selected:hover
{ background: #935d29;
  color: #EEE;
  border-color: #935d29;
  background:transparent url('images/nav_tab_bg.png') no-repeat scroll left top;
  background-position: 0 -34px;
}

Regards,
Tom

I think for the active part you need some sort of modification. Either on the server side or client
Server Side:
Page_Load in you user control where you have all the links, you skim through your list of links and apply a css class when the current url matches the current url.
like
foreach(var link in myLinks)
{
    HyperLink hyperLink = new HyperLink();
    hyperlink.NavigateURL = link;
    if (link.indexOf(currentRequestURL) >= 0)
    {
       hyperLink.CssClass = "link-active";
    }
    myLinkList.Add(.....)
}

Client side:
Another way without touching your server side code is via jquery.

function markActiveLink() {

    //Look through all the links in the sidebar
   $("div#sidebar a").filter(function() {

      //Take the current URL and split it into chunks at each slash
      var currentURL = window.location.toString().split("/");

      //return true if the bit after the last slash is the current page name
      return $(this).attr("href") == currentURL[currentURL.length-1];

    //when the filter function is done, you're left with the links that match.
    }).addClass("active");

   //Afterwards, look back through the links. If none of them were marked,
   //mark your default one.
   if($("div#sidebar a").hasClass("active") == false) {
      $("div#sidebar h2:nth-child(2) a").addClass("active");
    }
 }

found this jquery example on stackoverflow
http://stackoverflow.com/questions/302955/active-navigation-with-jquery-cant-apply-a-default-class-to-anchor

needless to say that for both options you need to add css class to your styles.

the disadvantage with jquery is that if someone visits your site with javascript disabled it wouldn't work. but in this scenario i think its ok to do it.

Cheers

Hi Deval,

I am sorry to say that this is too advance for me and for this, I would not choose to modify the server side. I'd rather modify on the Client side. However, the jquery you've specified. Where do I put them, in the HeaderMenu.ASCX?
Or did you mean to creat a separate jquery file from dreamweaver? If that's the case, I suppose it'll go in the "js" folder?

Regards,
Tom

OK, the client side it is.
I recommend you create a new file in the script folder for all your javascript additions in your project.
That way you have your stuff seperated from nopcommerce scripts, easier for later updates.

There are several ways to inlcude your javascript. But as it is your menu control, which is on every page,
you can also put you javascript stuff in the masterpage
look out of the <!-- start and end --> thats whay you need.

Root.Master
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />

<!-- START -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">  </script>
<script type="text/javascript" src="/scrips/myjavascript.js"></script>
<!-- END -->

    <asp:PlaceHolder id="SCRIPTS" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">
            <nopCommerce:Header ID="ctrlHeader" runat="server" />
            <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="clear">
            </div>
        </div>
        <nopCommerce:GoogleAdsense runat="server" ID="ctrlGoogleAdsense" />
        <nopCommerce:Footer ID="ctrlFooter" runat="server" />
        <nopCommerce:WebAnalytics ID="ctrlWebAnalytics" runat="server" />
    </div>
    </form>
</body>
</html>


Now open your newly created file and enter this

$(document).ready(
    function () {
   
          alert('Worked');
          $(".headermenu ul li a").filter(function () { 
              var currentURL = window.location.toString().split("/"); 
               return  $(this).attr("href").indexOf(currentURL[currentURL.length - 1])>0;
          }).addClass("active");
    }
)

Run your site and see if you get the "Worked" message.
Then you have this bit working. The code should worked on site. I tried it with firebug.
In your styles you need this

.headermenu ul li a.active
{
    font-size:25px;
    color:red;
    font-weight:bold;
}

try to get this working before you change the style.

Hi Deval,

Here's what I did.

1) added codes to Root.Master
2) added jquery functions to a new js file and named it "jquery.min.js"
3) uploaded "Root.Master" to MasterPages folder
4) uploaded "jquery.min.js" to js folder
6) Launched website without any errors although it still shows multiple pages selected. You can test it out as I am leaving the way it is right now so you can see what I mean. http://www.myamericanfurnituregalleries.com

-->A) The codes in Root.Master:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Root.Master.cs" Inherits="NopSolutions.NopCommerce.Web.MasterPages.root" %>

<%@ Register TagPrefix="nopCommerce" TagName="Header" Src="~/Modules/Header.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HeaderMenu" Src="~/Modules/HeaderMenu.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Footer" Src="~/Modules/Footer.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="WebAnalytics" Src="~/Modules/WebAnalytics.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />

<!-- START -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">  </script>
<script type="text/javascript" src="/scrips/myjavascript.js"></script>
<!-- END -->

    <asp:PlaceHolder id="SCRIPTS" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">
            <nopCommerce:Header ID="ctrlHeader" runat="server" />
            <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="clear">
            </div>
        </div>
        <nopCommerce:Footer ID="ctrlFooter" runat="server" />
        <nopCommerce:WebAnalytics ID="ctrlWebAnalytics" runat="server" />
    </div>
    </form>
</body>
</html>



-->B) The codes in style.css:

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  MASTER HEADER MENU

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.headermenu
{  
   background: #efebce;
   height: 32px;
   width: 960px;
}

.headermenu ul li a.active
{
    font-size:25px;
    color:red;
    font-weight:bold;
    display: inline;
}

.headermenu li
{
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

/* ancors Start
---------------------*/
.headermenu a:link, a:visited {
color:#EEE;
text-decoration:none;
}

.headermenu a:hover {
text-decoration:none;
}

.headermenu a:active {
color:#0000FF;}

.headermenu li a  
{ display: block;
  float: left;
  height:26px;
  text-decoration: none;
  padding: 6px 19px 0px 19px;
  border-right: 2px solid;
  font-weight: bold;
  background: #935d29;
  color: #4c1d00;
  border-color: #935d29;
  background:transparent url('images/nav_tab_bg.png') no-repeat scroll left top;
}

.headermenu li a:hover, .headermenu li a.selected, .headermenu li a.selected:hover
{ background: #935d29;
  color: #EEE;
  border-color: #935d29;
  background:transparent url('images/nav_tab_bg.png') no-repeat scroll left top;
  background-position: 0 -34px;
}


-->C) The codes in HeaderMenu.ascx:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.HeaderMenuControl"
    CodeBehind="HeaderMenu.ascx.cs" %>

<div class="headermenu">
    
    <ul>
      <li><a class="selected" href="<%=Page.ResolveUrl("~/Default.aspx")%>">Home</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/58-living-rooms.aspx")%>">Living</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/34-bed-rooms.aspx")%>">Bedrooms</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/30-dining-rooms.aspx")%>">Dining</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/43-kids-rooms.aspx")%>">kids' Rooms</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/53-mattresses.aspx")%>">Mattresses</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/48-entertainment.aspx")%>">Entertainment</a></li>
      <li><a href="<%=Page.ResolveUrl("~/Category/52-home-office.aspx")%>">Home Office</a></li>
      <li><a href="<%=Page.ResolveUrl("~/ContactUs.aspx")%>">
                   <%=GetLocaleResourceString("ContactUs.ContactUs")%></a></li>
      <li><a href="<%=Page.ResolveUrl("~/AboutUs.aspx")%>">About Us</a></li>
    </ul>
</div>

Many thanks for your effort and time!

Well, there is something what you need to understand first.
jquery is a client sider javascript framework, it basically wraps the javascript schebang in a more comprehensive way.
After inlcuding the jquery in your page, you can do stuff like $(#header).find("li").each(.....)
As I can see on your page the jquery framework is NOT loaded. AND the myjavascript.js as mentioned in my example is also NOT loaded.

So again
placed this in your header section of your root.master. Do NOT change anything in here. Later when everything works, you can put that file locally if you like. But for now leave it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Secondly, create a new file called myjavascript.js save this in your roots scripts folder.
In this file you copy and paste this.

$(document).ready(
    function () {
  
          alert('Worked');
          $(".headermenu ul li a").filter(function () {
              var currentURL = window.location.toString().split("/");
               return  $(this).attr("href").indexOf(currentURL[currentURL.length - 1])>0;
          }).addClass("active");
    }
)


It should look like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">  </script>
<script type="text/javascript" src="/scrips/myjavascript.js"></script>




Run your site and you should see a message popping up "Worked". If not then check if this file was found
http://www.myamericanfurnituregalleries.com/scrips/myjavascript.js
paste it in your browser.



So, from here on I have to leave it with you.

Cheers

Hi Deval,

Thank you so much for your time and efford! I finally got it to work by following your instructions.

My very last question is if you have some leads in getting the selected button to be like the "Home" button?

I have a hover underline on the "Home" button that is calling from the url background of 'images/nav_tab_bg.png'. Is this something I have to look and modify in the Style sheet?

Thanks again!

Glad you got it working.

This is now css related.
Your home link has a class called "selected". You should remove this. Seems it is hardcoded.
What the script I gave you does is to set the class of the link to "active".
Just change the "active" in the script to "selected".
This should work.

Deval