Question

我正在尝试使用以下漂亮的演示作为我在asp.net webform项目中的主页： secondary-expandable-navigation

下载的示例工作正常，即使在没有任何服务器端表单标签的情况下复制并粘贴到母版页中，转换也非常流畅（我的意思是从右到左的抽屉效果）。

我添加到母版页的唯一内容是在打开正文标记并在/ body标记之前关闭它之后的表单元素。现在，转换不像以前那样有效，主要内容的速度比应该更快。

我不擅长UI，可能有人可以指出我的错误。同时我需要在表单标记中包含导航和内容部分以放置我的服务器端控件。

注意：要查看上述效果，只需点击右上方的菜单＆＃34;按钮打开菜单，然后再次单击它以关闭菜单。

由于

修改要重新创建问题，请执行以下步骤：

首先从link下载示例。

然后在visual studio中创建一个Web表单应用程序项目，并使用以下代码添加一个母版页：

    <!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->      
    <title>Secondary Expandable Menu</title>
</head>
<body>
    <form id="frmMain" runat="server">
    <header>
        <a id="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Homepage"></a>
        <nav id="cd-top-nav">
            <ul>
                <li><a href="#0">Tour</a></li>
                <li><a href="#0">Login</a></li>
            </ul>
        </nav>
        <a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
    </header>
    <main class="cd-main-content">
        <!-- put your content here -->
    </main> <!-- cd-main-content -->
    <nav id="cd-lateral-nav">
        <ul class="cd-navigation">
            <li class="item-has-children">
                <a href="#0">Services</a>
                <ul class="sub-menu">
                    <li><a href="#0">Brand</a></li>
                    <li><a href="#0">Web Apps</a></li>
                    <li><a href="#0">Mobile Apps</a></li>
                </ul>
            </li> <!-- item-has-children -->
                <a href="#0">Stockists</a>
                <ul class="sub-menu">
                    <li><a href="#0">London</a></li>
                    <li><a href="#0">New York</a></li>
                    <li><a href="#0">Milan</a></li>
                    <li><a href="#0">Paris</a></li>
                </ul>
            </li> <!-- item-has-children -->
        </ul> <!-- cd-navigation -->
    </nav>
    </form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var $lateral_menu_trigger = $('#cd-menu-trigger'),
            $content_wrapper = $('.cd-main-content'),
            $navigation = $('header');

        //open-close lateral menu clicking on the menu icon
        $lateral_menu_trigger.on('click', function (event) {
            event.preventDefault();

            $lateral_menu_trigger.toggleClass('is-clicked');
            $navigation.toggleClass('lateral-menu-is-open');
            $content_wrapper.toggleClass('lateral-menu-is-open').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                // firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
                $('body').toggleClass('overflow-hidden');
            });
            $('#cd-lateral-nav').toggleClass('lateral-menu-is-open');

            //check if transitions are not supported - i.e. in IE9
            if ($('html').hasClass('no-csstransitions')) {
                $('body').toggleClass('overflow-hidden');
            }
        });

        //close lateral menu clicking outside the menu itself
        $content_wrapper.on('click', function (event) {
            if (!$(event.target).is('#cd-menu-trigger, #cd-menu-trigger span')) {
                $lateral_menu_trigger.removeClass('is-clicked');
                $navigation.removeClass('lateral-menu-is-open');
                $content_wrapper.removeClass('lateral-menu-is-open').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                    $('body').removeClass('overflow-hidden');
                });
                $('#cd-lateral-nav').removeClass('lateral-menu-is-open');
                //check if transitions are not supported
                if ($('html').hasClass('no-csstransitions')) {
                    $('body').removeClass('overflow-hidden');
                }

            }
        });

        //open (or close) submenu items in the lateral menu. Close all the other open submenu items.
        $('.item-has-children').children('a').on('click', function (event) {
            event.preventDefault();
            $(this).toggleClass('submenu-open').next('.sub-menu').slideToggle(200).end().parent('.item-has-children').siblings('.item-has-children').children('a').removeClass('submenu-open').next('.sub-menu').slideUp(200);
        });
    });
</script> <!-- Resource jQuery -->
</body>
</html>

然后你需要添加两个CSS文件，使用下载的示例并将css文件夹复制到项目中（因为＆＃34; style.css＆＃34;有407行，我不想复制这里为了清楚起见）。

现在您应该使用母版页创建一个webform并在浏览器中查看输出;打开和关闭面板时存在延迟。要消除延迟，您可以从代码中删除<form id="frmMain" runat="server">和</form>，样本运行正常。我的问题是，当我将所有内容包装在<form runat="server">标签中时，为什么会出现这种滞后现象？

包裹在<form runat =“server”> </form>中时缓慢淡化效果

0 个答案: