Trouble with CSS menu as master page

**JamesTown** · 09-04-2011, 10:29 PM

I am using a free minibuzz template I downloaded. I use aspx pages so I decided to turn the topnav into a masterpage. Since each page manually used a css class to use show the small blue caret, to show which page you were on I had to create some code behind to autmatically do this for me. So I had to add runat="server" to the lines to be able to insert the class="active" programatically.

The problem is that except for the first (default) page, on all subsequent pages the downarrow graphic and the submenu disappear. I can post code and links if someone is willing (able) to help.

**ajfmrf** · 09-05-2011, 04:04 AM

with the issues so someone can look at you script for answers

Bud

**JamesTown** · 09-05-2011, 06:26 PM

I started out with a stardard CSS Slider Menu:

...

Code:

<div id="topnavigation">
 <div id="topnav">
  <div id="myslidemenu" class="jqueryslidemenu">
      <ul>
       <li class="home"><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="portfolio.html">Portfolio</a></li>
       <li class="active"><a href="blog.html">Blog</a></li>
       <li><a href="#">Page Templates</a>
      <ul>
       <li><a href="index.html">Index Page</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="portfolio.html">Portfolio</a></li>
       <li><a href="blog.html">Blog</a></li>
       <li><a href="full-width.html">Full Width</a></li>
       <li><a href="contact.html">Contact</a></li>
       <li><a href="#">Sub Menu Demo</a>
      <ul>
       <li><a href="#">Sub Menu Level 3a</a></li>
       <li><a href="#">Sub Menu Level 3b</a></li>
       <li><a href="#">Sub Menu Level 3c</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a href="contact.html">Contact</a></li>
  </ul>
 </div>
</div><!-- end #topnav -->
<div id="topsearch">
 <form action="" method="post">
 <p><input type="text" class="inputbox" /><input type="submit" value="Search" class="but" /></p>
 </form>
</div><!-- end #topsearch -->
</div><!-- end #topnavigation -->

So I copied the text to a page called MPMain.master and proceeded to create a master page from the above text. I know that in aspx to read controls at runtime I need to make the form runat="server". So..

Code:

<body>
 <form id="form1" action="" method="post" runat="server">
  <div id="wrapper">
	<div id="container">
		<div id="top">
			<div id="logo">
                <a href="http://www.it-techconsulting.com" /><img src="images/ITNewLogo.jpg" alt="IT Services"/>
</div><!-- end #logo -->
</div><!-- end #top -->

then I know that I need to make all the <li>controls runat="server" so I turned it into this.

Code:

<div id="topnavigation">
 <div id="topnav">
  <div id="myslidemenu" class="jqueryslidemenu">
    <ul runat="server">
     <li id="homepage" class="home" runat="server"><a href="HomePage">Home</a></li>
     <li id="it_tech_services" runat="server"><a href="IT_Tech_Services">Services</a>
      <ul runat="server">
      <li id="it_tech_cloud_services" runat="server"><a href="it_tech_cloud_services">Cloud Computing</a></li>
      <li id="it_service_and_support" runat="server"><a href="IT_Service_and_Support">IT Service &amp; Support</a></li>
      <li id="web_design_and_maintenance" runat="server"><a href="Web_Design_and_Maintenance"">Website Design &amp; Maintenance</a></li>
       <li id="search_engine_optimization_seo" runat="server"><a href="Search_Engine_Optimization_SEO">Search Engine Optimization (SEO) &amp; Internet Marketing</a></li>
       <li id="exchange_email_hosting" runat="server"><a href="Exchange_EMail_Hosting">Exchange E-Mail Hosting</a></li>
      </ul>			
     </li>
    <li id="it_tech_clients" runat="server"><a href="IT_Tech_Clients">Clients</a></li>
    <li id="technical_resources" runat="server"><a href="Technical_Resources">Tech Resources</a></li>
    <li id="it_tech_cchit_certification" runat="server"><a href="IT_Tech_CCHIT_Certification">CCHIT Certification</a></li>
    <li id="contact_us" runat="server"><a href="Contact_Us">Contact Us</a></li>
   </ul>
  </div>
 </div><!-- end #topnav -->
  <div id="topsearch">
   <p><input type="text" class="inputbox" /><input type="submit" value="Search" class="but" /></p>
   </div><!-- end #topsearch -->
 </div><!-- end #topnavigation --

I have and ending </form> at the end.

The sample is live at http://www.it-techconsulting.com

the <li> id's correspond to routes. I am using URL routing. IIS 6 .net 3.5

my codebehind to programmatically insert the little blue caret at the proper place with a CSS class is as follows.

Code:

Imports System.Web.UI.HtmlControls

Partial Class MPMain

    Inherits System.Web.UI.MasterPage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim pagename As String = ""

        pagename = Request.ServerVariables("SCRIPT_NAME")

        If InStr(pagename, "/") > 0 Then
            pagename = Right(pagename, Len(pagename) - InStrRev(pagename, "/"))
        End If

        If pagename = "default.aspx" Or pagename = "HomePage" Then
            Me.homepage.Attributes.Add("class", "home active")

            ' //////// Services Home Page ////////////

        ElseIf pagename = "IT-Tech_Services_Home.aspx" Or pagename = "IT_Tech_Services" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_services.Attributes.Add("class", "active")

            ' //////// Services Pages ////////////

        ElseIf pagename = "Cloud.aspx" Or pagename = "it_tech_cloud_services" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_services.Attributes.Add("class", "active")
        ElseIf pagename = "ITSS.aspx" Or pagename = "IT_Service_and_Support" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_services.Attributes.Add("class", "active")
        ElseIf pagename = "WebDesign.aspx" Or pagename = "Web_Design_and_Maintenance" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_services.Attributes.Add("class", "active")
        ElseIf pagename = "SEO.aspx" Or pagename = "Search_Engine_Optimization_SEO" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_services.Attributes.Add("class", "active")
        ElseIf pagename = "Exchange.aspx" Or pagename = "Exchange_EMail_Hosting" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_services.Attributes.Add("class", "active")

            ' //////// Back to the Menu Items ///////////

        ElseIf pagename = "IT-Tech_Clients_Home.aspx" Or pagename = "IT_Tech_Clients" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_clients.Attributes.Add("class", "active")
        ElseIf pagename = "Resources_Home.aspx" Or pagename = "Technical_Resources" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.technical_resources.Attributes.Add("class", "active")

            ' //////// Tech Resources Pages ////////////

        ElseIf pagename = "Routing.aspx" Or pagename = "Setting_up_URL_routing_IIS_6" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.technical_resources.Attributes.Add("class", "active")
        ElseIf pagename = "Viruses.aspx" Or pagename = "How_to_Avoid_Getting_Viruses" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.technical_resources.Attributes.Add("class", "active")

            ' //////// Back to the Menu Items ///////////

        ElseIf pagename = "CCHIT_Certification_Home.aspx" Or pagename = "IT_Tech_CCHIT_Certification" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.it_tech_cchit_certification.Attributes.Add("class", "active")
        ElseIf pagename = "Contact_Us.aspx" Or pagename = "Contact_Us" Then
            Me.homepage.Attributes.Add("class", "home")
            Me.contact_us.Attributes.Add("class", "active")

        Else
            Me.homepage.Attributes.Add("class", "home active")
        End If

    End Sub

End Class

I added the files to the message. I added txt to the end to be able to upload them. Thank You

Thread: Trouble with CSS menu as master page

Thread Tools

Search Thread

Trouble with CSS menu as master page

yes,please post the web pages

Bookmarks

Bookmarks

Posting Permissions