В этой записи блога я покажу, как можно применить некоторые приятные анимационные эффекты к элементу управления ASP.NET Menu.
Элемент управления ASP.NET Menu предлагает множество возможностей, но вместе с jQuery вы можете создавать очень насыщенное интерактивное меню с анимацией и эффектами.
Начнем с примера:
— Создать новое веб-приложение ASP.NET и дать ему имя
— Откройте страницу Default.aspx (или любую другую страницу .aspx, на которой вы создадите меню).
— Наша страница ASPX-код:
<form id="form1" runat="server"><div id="menu"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Images/Home.png" Text="Home" Value="Home" /> <asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/Images/Friends.png" Text="About Us" Value="AboutUs" /> <asp:MenuItem NavigateUrl="~/Products.aspx" ImageUrl="~/Images/Box.png" Text="Products" Value="Products" /> <asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/Images/Chat.png" Text="Contact Us" Value="ContactUs" /> </Items> </asp:Menu></div></form>
Как видите, у нас есть ASP.NET Menu с горизонтальной ориентацией и RenderMode = «Список» . Он имеет четыре пункта меню, где для каждого я указал свойства NavigateUrl , ImageUrl , Text и Value .
Все изображения находятся в папке Images в корневом каталоге этого веб-приложения. Изображения, которые я использую для этой демонстрации, взяты из Free Web Icons .
— Далее, давайте создадим CSS для тегов LI и A (поместите этот код в тег head)
<style type="text/css"> li { border:1px solid black; padding:20px 20px 20px 20px; width:110px; background-color:Gray; color:White; cursor:pointer; } a { color:White; font-family:Tahoma; }</style>
В этом нет ничего очень важного, и вы можете изменить стиль, как хотите.
— Теперь давайте обратимся к базовой библиотеке jQuery непосредственно из Microsoft CDN .
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
— И мы перейдем к самой интересной части, применяя анимацию с помощью jQuery.
Прежде чем мы начнем писать код jQuery, давайте посмотрим, какой код HTML генерирует наш элемент управления ASP.NET Menu в клиентском браузере.
<ul class="level1"> <li><a class="level1" href="Default.aspx"><img src="Images/Home.png" alt="" title="" class="icon" />Home</a></li> <li><a class="level1" href="About.aspx"><img src="Images/Friends.png" alt="" title="" class="icon" />About Us</a></li> <li><a class="level1" href="Products.aspx"><img src="Images/Box.png" alt="" title="" class="icon" />Products</a></li> <li><a class="level1" href="Contact.aspx"><img src="Images/Chat.png" alt="" title="" class="icon" />Contact Us</a></li></ul>
Таким образом, он генерирует неупорядоченный список с классом level1 и для каждого элемента создает элемент li с привязкой с изображением + текст меню внутри него.
Если мы хотим получить доступ к элементу списка только из нашего меню (а не к другому элементу списка на странице), нам нужно использовать следующий селектор jQuery: « ul.level1 li» , который найдет все элементы li, у которых есть родительский элемент ul с класс уровня1 .
Следовательно, код jQuery:
<script type="text/javascript"> $(function () { $("ul.level1 li").hover(function () { $(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow"); }, function () { $(this).stop().animate({ opacity: 1, width: "110px" }, "slow"); }); });</script>
Я использую hover , так что анимация будет происходить, как только мы перейдем к пункту меню. Две разные функции — одна для оверна, другая для эффекта аута.
Следующая строка
$(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");
делает реальную работу. Таким образом, это сначала остановит все предыдущие анимации (если таковые имеются), которые выполняются, и анимирует элемент меню, придав ему непрозрачность 0,7 и изменив ширину на 170px (ширина по умолчанию — 110px, как в определенном стиле CSS для li. тег). Это происходит при наведении мыши. Вторая функция при наведении мыши возвращает свойства непрозрачности и ширины к свойствам по умолчанию. Последний параметр «slow» — это скорость анимации.
Полный код ASPX:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>ASP.NET Menu + jQuery</title> <style type="text/css"> li { border:1px solid black; padding:20px 20px 20px 20px; width:110px; background-color:Gray; color:White; cursor:pointer; } a { color:White; font-family:Tahoma; } </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function () { $("ul.level1 li").hover(function () { $(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow"); }, function () { $(this).stop().animate({ opacity: 1, width: "110px" }, "slow"); }); }); </script></head><body> <form id="form1" runat="server"> <div id="menu"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Images/Home.png" Text="Home" Value="Home" /> <asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/Images/Friends.png" Text="About Us" Value="AboutUs" /> <asp:MenuItem NavigateUrl="~/Products.aspx" ImageUrl="~/Images/Box.png" Text="Products" Value="Products" /> <asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/Images/Chat.png" Text="Contact Us" Value="ContactUs" /> </Items> </asp:Menu> </div> </form></body></html>