I'm doing a website in ASP.NET MVC, and I'm trying to make a really creative menu, so I already have everything ready that tested in html and css is usually working, but here in ASP NET MVC I'm not getting it to work, I think I'm doing something wrong, I'm going to leave all the layout page code.
<!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>© @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><scriptsrc="~/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>