ASP.Net Hide left hand menu on main page
I have an asp.net website that has a left hand menu added and I ran into a problem as I found myself doing a lot of code duplication (which is bad I know). I want the left hand menu to be added to my Site.Master file, not me to add it to every page.
I can do this, but the left hand menu is displayed on the Home page, which I don't want, so I thought I needed some kind of operator IF
, but I don't know how I can do this as I cannot see the URL -address, as when the user clicks their default name on the page (e.g. http://www.webaddress.co.uk/ )
My menu on the left is scrolling nav-stacked
, which works fine, so I also need to add JQuery for this on Site.Master I guess.
Current HTML for my About Us page
<asp:Content ID="AboutBodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-3 hidden-xs" style="padding-left: 0px">
<div class="follow-scroll">
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li class="active"><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<h2><%: Title %>.</h2>
<p>Use this area to provide additional information.</p>
<p>Use this area to provide additional information.</p>
<p>Use this area to provide additional information.</p>
</div>
<script type="text/javascript">
(function ($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 75;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function (event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
});
})(jQuery);
</script>
</asp:Content>
Below is the HTML code that I was thinking about my Site.Master, but as I said, it shouldn't appear on the "home page".
<div class="container body-content" style="padding-top: 25px">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-sm-3 hidden-xs" style="padding-left: 0px">
<!-- 'IF' statement to go here so not displayed on Home page -->
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/About">About</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/Session/pg1">Session</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9" style="padding-right: 0px">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>
source to share
To solve all the problems, I added ID
also runat="server"
to the container for the menu and then I was able to access it in the code behind:
div class="follow-scroll">
<div ID="Sidebar" runat="server" class="col-sm-3 hidden-xs" style="padding-left: 0px">
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
</div>
Then, in the code for the main page, I can do something like:
FROM#:
protected void Page_Load(object sender, EventArgs e)
{
var URL = Request.Url.PathAndQuery;
if(URL == "/default" || URL == "/default.aspx")
{
this.Sidebar.Visible = false;
}
}
This is using the PathAndQuery from the property HttpContext.Request.Url
, which is an object Uri
.
Then I managed to move my JQuery to my site.master file as well
source to share