中英文切换导航

最新推荐文章于 2022-12-17 16:36:47 发布

77314

最新推荐文章于 2022-12-17 16:36:47 发布

阅读量689

点赞数

分类专栏：前端学习文章标签： jquery css3 导航中英文切换

本文链接：https://blog.csdn.net/qq_14886653/article/details/52612672

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。
css3版：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>中英文切换导航条</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            li{list-style: none;}
            a{
                text-decoration: none;
            }
            .nav{
                width: 100%;
                height: 40px;
                background: #222;
                margin-top: 100px;
                overflow: hidden;
            }
            .list{
                width: 1000px;
                height: 40px;
                margin: 0 auto;
            }
            .list li{float: left;}
            .list li a{display: block;transition:.3s;}
            .list b,.list i{
                display: block;
                padding: 0 30px;
                color: #aaa;
                line-height: 40px;
                text-align: center;
            }
            .list b{
                font-weight: normal;
            }
            .list i{
                font-style: normal;
                background: #333;
                color: #fff;
            }
            .list a:hover{
                margin-top: -40px;
            }
        </style>
    </head>

    <body>
        <div class="nav">
            <ul class="list">
                <li>
                    <a href="javascript:(void);">
                        <b>Index</b>
                        <i>首页</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <b>course</b>
                        <i>职业课程</i>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <b>study</b>
                        <i>就业学习</i>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <b>BBS</b>
                        <i>极客社区</i>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <b>JiKe+</b>
                        <i>极客+</i>
                    </a>
                </li>
            </ul>
        </div>
    </body>

</html>

原理是通过改变a标签的margin-top值，来切换显示。使用css3 transition属性。

jquery版：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jq中英文切换滚动条</title>
        <style>
            *{padding: 0;margin: 0;}
            .nav{width: 100%;height: 40px;background: #222; margin-top: 100px;overflow: hidden;}
            .list{width: 1000px;margin: 0 auto;height: 40px;}
            li{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            .list li{
                float: left;
            }
            .list li b,.list li i{
                display: block;
                line-height: 40px;
                color: #aaa;
                text-align: center;
                padding: 0 30px;
            }
            .list  li a{
                display: block;
            }
            .list b{
                font-weight: 100;
            }
            .list i{
                font-style: normal;
                background: #333;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <ul class="list">
                <li>
                    <a href="javascript:(void);">
                        <b>Index</b>
                        <i>首页</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <b>course</b>
                        <i>职业课程</i>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <b>study</b>
                        <i>就业学习</i>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <b>BBS</b>
                        <i>极客社区</i>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <b>JiKe+</b>
                        <i>极客+</i>
                    </a>
                </li>
            </ul>
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(".list li a").hover(function(){
                $(this).stop().animate({'margin-top':-40},300);
            },function(){
                $(this).stop().animate({'margin-top':0},300);
            });
        </script>
    </body>
</html>

原理相同，只不过通过jquery改变，兼容性更好。

77314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中英文切换导航

总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。 css3版：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>中英文切换导航条</title> <style> *{ padding: 0;
复制链接

扫一扫

专栏目录