Sliding animation on Nav Menu in mvc 4 application

最新推荐文章于 2024-11-03 12:03:00 发布

apple443322

最新推荐文章于 2024-11-03 12:03:00 发布

阅读量78

点赞数

文章标签：测试 javascript ui ViewUI

原文链接：http://www.cnblogs.com/happy-Chen/p/3689092.html

版权

You can try with the below code for a sliding animation on navigation menu

<!DOCTYPE html><html><head><linkhref="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css"rel="stylesheet"type="text/css"/><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script><metacharset="utf-8"><title>JS Bin</title><script>
         $(function(){// insert slider
          $('ul').append('<div id="slider"></div>');// initially resetvar left = $('ul li:first-child a').parent().position().left;var width = $('ul li:first-child a').width();
          $('#slider').css({'left': left,'width': width});// sliding
          $('ul li a').hover(function(){var left = $(this).parent().position().left;var width = $(this).width();

              $('#slider').stop().animate({'left': left,'width': width
              });});});</script><style>
      ul {position:relative;margin:50px;}

        ul li {display: inline-block;}

        ul li a {padding:5px15px;border:1px solid #000;color:#000;text-decoration: none;}#slider {position:absolute;top:-5px;left:0;height:100%;width:0;padding:5px15px;margin-left:1px;background-color:#f00;z-index:-1;}</style></head><body><ul><li><ahref="#">Test Menu 1</a></li><li><ahref="#">Test Menu 2</a></li><li><ahref="#">Test Menu 3</a></li><li><ahref="#">Test Menu 4</a></li><li><ahref="#">Test Menu 5</a></li></ul></body></html>

Sample Working Demo

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="Scripts/jquery-2.1.0.js"></script>
    <script>
        $(function () {
            $('#selected').css('width', $('li').width());
            $('li').hover(function () {
                var menuItem = $(this);
                $('#selected').stop().animate({ width: menuItem.width(), left: $(this).position().left }, 'medium', 'linear');
            });
        });
    </script>
    <style>
        ul {
            float: left;
            height: 40px;
            width: 960px;
            list-style: none;
        }

        li {
            display: block;
            float: left;
            list-style: none;
        }

        #selected {
            background: #D10000;
            height: 40px;
            position: absolute;
        }

        li a {
            float: left;
            line-height: 40px;
            padding: 0 20px;
            z-index: 20;
            display: block;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form id="myform" runat="server">
        <ul>
            <li><a>HOME</a></li>
            <li><a>SQUADS</a></li>
            <li><a>STREET ACADEMY</a></li>
            <li><a>CONTACT US</a></li>
            <li id="selected"></li>
        </ul>
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/happy-Chen/p/3689092.html