0
Я не могу заставить верхнюю панель работать на маленьких экранах (где вы можете видеть). Когда вы нажимаете значок меню, ничего не происходит. Я знаю, что JQuery загружается, и я полагаю, что base.topbar.js также загружается, но у меня есть мозг и я не могу понять это. Вот мой код:Topbar в Foundation js не работает на небольших экранах в приложении asp.net
<%@ 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>
Любая помощь с этим была бы принята с благодарностью!
Вы заметили, что ваши скрипты не загружены, они неверны с префиксом ~. GET http://www.mco.ntx-designs.com/~/Scripts/foundation/foundation.topbar.js 404 (не найдено) – Martijn
Да! Добавлен runt = "server", и все работает отлично. Благодаря! –