mardi 4 août 2015

ASP.Net Hide Left Hand Menu On Home Page

I have an asp.net website which is having a left hand menu added to it and have hit an issue as I have found that I am doing a lot of code duplication (which is bad I know). What I want is for the left hand menu to be added to my Site.Master file rather than me having to add it to every single page.

I can do this, but the left hand menu is then displayed on the "Home" page which I don't want so i was thinking that i need some sort of IF statement but I don't know how I can do this as I cant look at the URL as when the user hits the page its the standard naming (e.g. http://ift.tt/1N770SC)

My left hand menu is a scrolling nav-stacked which is working fine so I will also need to add the JQuery for this to the Site.Master I think.

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>

The HTML code below is what I thought of for my Site.Master but as I said it needs to not be displayed 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>

Aucun commentaire:

Enregistrer un commentaire