Log in

View Full Version : 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:

...


<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..


<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.



<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.



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