0

estou fazendo um website em asp.net mvc, e estou tentando fazer um menu bem criativo, para isso já tenho tudo pronto que testado em html e css normalmente ta funcionando, mas aqui em ASP NET MVC não estou conseguindo fazer funcionar, creio que devo esta fazendo alguma coisa errada, vou deixar todo o código da página de layout.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/style.css" rel="stylesheet" />
    <title>@ViewBag.Title - Meu Aplicativo ASP.NET</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/jquery.easing.1.3.js")
    <style>
        body {
            background: #333 url(bg.jpg) repeat top left;
            font-family: Arial;
        }

        span.reference {
            position: fixed;
            left: 10px;
            bottom: 10px;
            font-size: 12px;
        }

            span.reference a {
                color: #aaa;
                text-transform: uppercase;
                text-decoration: none;
                text-shadow: 1px 1px 1px #000;
                margin-right: 30px;
            }

                span.reference a:hover {
                    color: #ddd;
                }

        ul.sdt_menu {
            margin-top: 150px;
        }

        h1.title {
            text-indent: -9000px;
            background: transparent url(title.png) no-repeat top left;
            width: 633px;
            height: 69px;
        }
    </style>
</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="@Url.Action("Index", "Home")" class="navbar-brand" style="background-color: transparent;"></a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">


                <div class="content">
                    <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
                    <ul id="sdt_menu" class="sdt_menu">
                        <li>
                            <a href="@Url.Action("Index", "Home")">
                                <img src="~/Content/img/2.jpg" alt="" />
                                <span class="sdt_active"></span>
                                <span class="sdt_wrap">
                                    <span class="sdt_link">Inicio</span>
                                    <span class="sdt_descr">Ebase Sistemas</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" alt="" />
                                <span class="sdt_active"></span>
                                <span class="sdt_wrap">
                                    <span class="sdt_link">Portfolio</span>
                                    <span class="sdt_descr">My work</span>
                                </span>
                            </a>
                            <div class="sdt_box">
                                <a href="#">Websites</a>
                                <a href="#">Illustrations</a>
                                <a href="#">Photography</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/3.jpg" alt="" />
                                <span class="sdt_active"></span>
                                <span class="sdt_wrap">
                                    <span class="sdt_link">Inspiration</span>
                                    <span class="sdt_descr">Where ideas get born</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/4.jpg" alt="" />
                                <span class="sdt_active"></span>
                                <span class="sdt_wrap">
                                    <span class="sdt_link">Photos</span>
                                    <span class="sdt_descr">I like to photograph</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/5.jpg" alt="" />
                                <span class="sdt_active"></span>
                                <span class="sdt_wrap">
                                    <span class="sdt_link">Blog</span>
                                    <span class="sdt_descr">I write about design</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/6.jpg" alt="" />
                                <span class="sdt_active"></span>
                                <span class="sdt_wrap">
                                    <span class="sdt_link">Projects</span>
                                    <span class="sdt_descr">I like to code</span>
                                </span>
                            </a>
                            <div class="sdt_box">
                                <a href="#">Job Board Website</a>
                                <a href="#">Shopping Cart</a>
                                <a href="#">Interactive Maps</a>
                            </div>
                        </li>
                    </ul>
                </div>



            </div>


        </div>

    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Meu Aplicativo ASP.NET</p>
        </footer>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="~/Scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#sdt_menu > li').bind('mouseenter', function () {
                var $elem = $(this);
                $elem.find('img')
                    .stop(true)
                    .animate({
                        'width': '170px',
                        'height': '170px',
                        'left': '0px'
                    }, 400, 'easeOutBack')
                    .andSelf()
                    .find('.sdt_wrap')
                    .stop(true)
                    .animate({ 'top': '140px' }, 500, 'easeOutBack')
                    .andSelf()
                    .find('.sdt_active')
                    .stop(true)
                    .animate({ 'height': '170px' }, 300, function () {
                        var $sub_menu = $elem.find('.sdt_box');
                        if ($sub_menu.length) {
                            var left = '170px';
                            if ($elem.parent().children().length == $elem.index() + 1)
                                left = '-170px';
                            $sub_menu.show().animate({ 'left': left }, 200);
                        }
                    });
            }).bind('mouseleave', function () {
                var $elem = $(this);
                var $sub_menu = $elem.find('.sdt_box');
                if ($sub_menu.length)
                    $sub_menu.hide().css('left', '0px');

                $elem.find('.sdt_active')
                    .stop(true)
                    .animate({ 'height': '0px' }, 300)
                    .andSelf().find('img')
                    .stop(true)
                    .animate({
                        'width': '0px',
                        'height': '0px',
                        'left': '85px'
                    }, 400)
                    .andSelf()
                    .find('.sdt_wrap')
                    .stop(true)
                    .animate({ 'top': '25px' }, 500);
            });
        });
    </script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
3
  • Seu site usa SSL?
    – Sam
    Commented 13/03/2018 às 22:53
  • Já tentou uma versão mais recente do jQuery?
    – Sam
    Commented 13/03/2018 às 22:54
  • Já consegui resolver, vou mostrar para vocês o que tive que fazer na resposta!
    – WPfan
    Commented 14/03/2018 às 15:55

1 Resposta 1

0

Tive que adicionar na pasta de Scripts o arquivo Jquery.easing.1.3 e depois tive que chamá-lo na página _Layout.cshtml da seguinte forma, e dessa forma funcionou perfeitamente:

@Scripts.Render("~/Scripts/jquery.easing.1.3.js")

Lembrando que antes eu estava chamando no topo, ou seja, estava no lugar errado, tinha que ser feito no body.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .