Top Navigation Menu

Hello,

I have a basic design question regarding the top navigation menu. I would like to apply class="current" to the <li> tag when someone clicks. Here is the code snipped:

<ul class="ul-mainmenu">
  <li><a class="li-aboutus" href="AboutUs.aspx">About Us</a></li>
  <li><a class="li-contactus" href="<%=Page.ResolveUrl("~/ContactUs.aspx")%>"> <%=GetLocaleResourceString("ContactUs.ContactUs")%></a></li>
  <% if (ProductManager.RecentlyAddedProductsEnabled){ %>
  <li><a class="li-products" href="<%=Page.ResolveUrl("~/RecentlyAddedProducts.aspx")%>"> <%=GetLocaleResourceString("Products.NewProducts")%></a> </li>
  <%} %>
  <li class="current"><a class="li-home" href="<%=Page.ResolveUrl("~/Default.aspx")%>"> <%=GetLocaleResourceString("Content.HomePage")%></a></li>
</ul>

I would like to highlight, apply the "current class" when someone click on New Product, or apply the highlight on Contact Us when someone clicks on it.

Thank you,

Try using "ul li_selected" in your .css

Chad

Don't I need to make some changes to the HeaderMenu.ASCX file, where I have the menu structure code? I have used CSS and Ajax before and was able to use just one "active" class from the CSS and apply necessary changes upon click.

I am sure I have to make some modification to the ASCX file as well.

no, if you only want to highlight what you click.

add the following code in style.css

.headermenu a:visited
{
      //your css code here
}

-------------------------------------------------------------------------------------------

if you need help in designing themes for nopcommerce.
I'm there to help you:)

lol

Check out my newly designed themes in

https://www.nopcommerce.com/boards/topic.aspx?topicid=3126

This would not work because the page does not retain the selection. As an example, If I click on "Contact Us" tab from the home page, since the Web page changes, CSS does not retain my click. Additionally, if I use the a:visited option, I will have two selection one for the home page and one for Contact US since I visited both pages.

I believe this must be done within the ASPX page not the CSS. Your suggestion can definitely work if I was using CSS + Ajax.

Do you have any other suggestion?

well, i understand what you mean now.

I think you're right. You need to create the css in codebehind file.

But this costs, every time visitor clicks the menu will be send back to server therefor it may slow your website loading.

I've got an example for you.

please visit this website:


http://cms.template-help.com/virtuemart_28489/index.php?option=com_virtuemart&Itemid=29&vmcchk=1&Itemid=29

you can hack the code with your IE8(developer's tool) hot key is F12.

lol hope this may help:)

Thank you very much for your respond. I really cannot see the initial PHP script since the server only outputs pure HTML source code. Additionally, I was hoping to get some hint in ASP.NET than PHP.

I installed all available nopCommerce templates to see if they support this feature. Unfortunately, no template has any support for this feature.

I am sure this is a very basic request but no one has provided any feedback except you. I am sure some people have already used this feature on their Websites.

Apparently, this is the only store that was featured on nopCommerce support "active tab" feature on the top navigation menu: http://www.artjersey.net/Default.aspx

I think I got some hints. I believe the CategoryNavigation.ascx and ManufactureNavigation.ascx have the highlight feature that I am looking for. I just need to study the source code and try to write my own.

Hi ,

I would like to have dynamic Menu on top as well as the content on the tab should be managable from admin part. Will need to change any source code or any setting to accomplish the task.


Thanks,
-Ajit

Here's one solution but it's not the best.
I'm not a js expert and my colleage told me that with jquery this issue can be solved perfectly.

OK. Please refer to my solution.

In headermenu.ascx

Replace <a> tag with

<asp:HyperLink  runat="server" id="Menu_Example" NavigateUrl="~/default.aspx">Home</asp:HyperLink >

In headermenu.ascx.cs
Put following code in Page_Load() method

if (Request.Url.AbsolutePath == "/default.aspx" || Request.Url.AbsolutePath == "/Default.aspx")
{                
Menu_Product.CssClass = "menu_clicked";
}

You also need to create a new class”menu_clicked”  in styles.css file.



Regards.

Larry

Hello Larry,

Here is how I solved this. It works fine.

<ul class="ul-mainmenu">
        
        <% if (Request.Url.AbsolutePath == "/AboutUs.aspx"){ %>
        <li class="current"><a class="li-aboutus" href="AboutUs.aspx">About Us</a></li>
        <%}%>
        <% else {%>
          <li><a class="li-aboutus" href="AboutUs.aspx">About Us</a></li>
        <% }%>
        
        <% if (Request.Url.AbsolutePath == "/ContactUs.aspx"){ %>
        <li class="current"><a class="li-contactus" href="<%=Page.ResolveUrl("~/ContactUs.aspx")%>"> <%=GetLocaleResourceString("ContactUs.ContactUs")%></a></li>
        <%}%>
        <% else {%>
          <li><a class="li-contactus" href="<%=Page.ResolveUrl("~/ContactUs.aspx")%>"> <%=GetLocaleResourceString("ContactUs.ContactUs")%></a></li>
        <% }%>
        
    <% if (Request.Url.AbsolutePath == "/RecentlyAddedProducts.aspx"){ %>
        <li class="current"><a class="li-products" href="<%=Page.ResolveUrl("~/RecentlyAddedProducts.aspx")%>"> <%=GetLocaleResourceString("Products.NewProducts")%></a> </li>
        <%} %>
        <% else {%>
          <li><a class="li-products" href="<%=Page.ResolveUrl("~/RecentlyAddedProducts.aspx")%>"> <%=GetLocaleResourceString("Products.NewProducts")%></a></li>
        <% }%>
        
        <% if (Request.Url.AbsolutePath == "/Default.aspx"){ %>
        <li  class="current"><a class="li-home" href="<%=Page.ResolveUrl("~/Default.aspx")%>"> <%=GetLocaleResourceString("Content.HomePage")%></a></li>
        <%}%>
        <% else {%>
          <li><a class="li-home" href="<%=Page.ResolveUrl("~/Default.aspx")%>"> <%=GetLocaleResourceString("Content.HomePage")%></a></li>
        <% }%>
        
      </ul>