我无法让topbar在小屏幕上工作(www.mco.ntx-designs.com就是你可以看到的地方)。按菜单图标时,没有任何反应。我知道JQuery正在加载,而且我认为基础.topbar.js也在加载,但是我已经绞尽脑汁而无法解决这个问题。这是我的代码:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MCO.Master.cs" Inherits="mco.SiteMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head runat="server">
<title></title>
<link href="~/Styles/mco.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/foundation.css" rel="Stylesheet" type="text/css" />
<link href="~/Styles/foundation.min.css" rel="Stylesheet" type="text/css" />
<link href="~/Styles/normalize.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/vendor/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/vendor/modernizr.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!--<script type="text/javascript">
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
} else {
alert("jQuery library is not found!");
}
</script>-->
<form runat="server">
<script src="~/Scripts/foundation.js" type="text/javascript"></script>
<script src="~/Scripts/foundation/foundation.topbar.js" type="text/javascript"></script>
<Header class="row" id="masterpageHeader">
<div class="large-12 medium-12 small-12" id="logoTop">
<asp:Image ImageUrl="~/images/mcoLogo.png" runat="server" AlternateText="Melissa Community Outreach Logo" />
</div>
<div class="sticky large-12 medium-12 small-12">
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
<ul class="title-area">
<li class="name">
<h1><a href="#">Melissa Community Outreach</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li runat="server" id="mainHomeLink" class=""><asp:HyperLink ID="HyperLink13" runat="server" NavigateUrl="~/">Home</asp:HyperLink>
</li>
<li runat="server" id="mainGivingLink" class=""><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/giving/">Giving</asp:HyperLink>
</li>
<li runat="server" id="mainVolunteeringLink" class=""><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/volunteering/">Volunteering</asp:HyperLink>
</li>
<li runat="server" id="mainHoursLink" class=""><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/hours/">Hours</asp:HyperLink>
</li>
<li runat="server" id="mainLocationLink" class=""><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="~/location/">Location</asp:HyperLink>
</li>
<li runat="server" id="mainAboutLink" class="has-dropdown">
<asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="~/about/">About</asp:HyperLink>
<ul class="dropdown">
<li class="active"><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/mission-statement/">Mission Statement</asp:HyperLink>
</li>
<li><asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="~/directors/">Directors</asp:HyperLink>
</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>
<a href="#">Privacy Policy</a>
</li>
</ul>
</section>
</nav>
</div>
</Header>
<main class="row">
<div class="large-12 medium-12 small-12">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</main>
<footer class="row" id="footerMain">
<div class="large-12 medium-12 small-12" id="newsletterFooter">
<div class="large-6 medium-6 small-12 left column">
<span class="largerText2">Stay up to date with what's happening with Melissa Community Outreach</span><br />
<span class="smallerText">Sign up to receive monthly emails with our latest information:</span>
</div>
<div class="large-6 medium-6 small-12 right"><asp:TextBox ID="emailSignupMain" runat="server" Width="400px" Height="53px" CssClass="textBoxWhite left" ></asp:TextBox><span class="button left">Email</span>
</div>
<div class="clear"> <br /></div>
</div>
<div class="large-12" id="linksFooter1">
<div class="large-5 medium-5 small-12 borderRightSmall text-center columns"><span class="text-center" id="aboutFooterHead">Melissa Community Outreach</span><br /><br />
We are a non-profit organization that helps out needy families in Melissa, Texas. We provide food, clothing and other necessary items
for people who cannot afford to pay for these items themselves. If you or someone you know needs help please <asp:HyperLink ID="contactUs1" runat="server" NavigateUrl="~/contact">contact us</asp:HyperLink>
information about what services we offer.
</div>
<div class="large-7 medium-7 small-12 columns">
<div class="large-4 medium-4 small-4 borderRightSmall text-center columns"><span class="largerText">Important Links</span><br /><asp:HyperLink ID="feedingamerica" NavigateUrl="http://www.feedingamerica.org/" Target="_blank" runat="server">www.feedingamerica.org</asp:HyperLink>
<br />
<asp:HyperLink ID="theSamaritansInn" NavigateUrl="http://www.thesamaritansinn.org" Target="_blank" runat="server">The Samaritan's Inn</asp:HyperLink>
<br /><br /><br /></div>
<div class="large-4 medium-4 small-4 borderRightSmall text-center columns"><span class="largerText">More Text</span><br />More text can go into this spot.<br /><br /><br /><br /></div>
<div class="large-4 medium-4 small-4 text-center columns"><span class="largerText">More Text 2</span><br />More text can go into this spot.<br /><br /><br /><br /></div>
</div>
</div>
<div class="large-12 medium-12 small-12" id="footerRed">
<div class="large-6 medium-6 small-12 left column">
<span class="smallerText">Copyright © 2012 <strong><asp:HyperLink ID="ntxDesigns" runat="server" NavigateUrl="http://www.ntx-designs.com" Target="_blank">NTX Designs</asp:HyperLink></strong>. All right reserved.</span>
<span class="largerText"><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/giving/">Giving</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/volunteering/">Volunteering</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/hours/">Hours</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/location/">Location</asp:HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/about/">About</asp:HyperLink> </span>
</div>
<div class="large-6 medium-6 small-12 text-right right column">
<asp:Image ID="googleIcon" ImageUrl="~/images/social-049_google.png" runat="server" AlternateText="Google Social Media Icon" />
<asp:Image ID="Image1" ImageUrl="~/images/social-043_twitter.png" runat="server" AlternateText="Twitter Social Media Icon" />
<asp:Image ID="Image2" ImageUrl="~/images/social-046_facebook.png" runat="server" AlternateText="Facebook Social Media Icon" />
</div>
</div>
</footer>
</form>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
非常感谢任何帮助!
答案 0 :(得分:-1)
是的!添加了一个runt =&#34;服务器&#34;一切都很完美。谢谢!