10、动态导航菜单 - 博客界面改造文章(202203)

       此文写的是博客顶部的动态导航菜单。

       这里菜单包括两个动态效果，一个是菜单效果，一个是菜单的页面加载跳动效果。

1、        CSS样式表；

https://files.cnblogs.com/files/lzhdim/webwidget.css?t=1648103673

       这个菜单的样式表定义。具体只是顶部菜单的效果。

2、        JS脚本；

https://files.cnblogs.com/files/lzhdim/jquery.widgemenu.js?t=1648030707

       https://files.cnblogs.com/files/lzhdim/jquery.menujump.js?t=1648040328

       这里包括两个效果的JS脚本文件。

<div id="divTopLogoMenu">

        <div>

            <div id="webwidget_menu_glide" class="webwidget_menu_glide">

            <div class="webwidget_menu_glide_sprite"></div>

                <ul id="ul_webwidget_menu_glide_sprite">

                    <li class="current"><a target="_self" href="https://www.cnblogs.com/lzhdim/">首页</a></li>

                    <li><a target="_blank" href="https://msg.cnblogs.com/send/lzhdim">短消息</a></li>

                    <li>

                        <a id="blog_nav_rss" class="menu" href="javascript:void(0)" data-rss="https://www.cnblogs.com/lzhdim/rss/">订阅</a>

                    </li>

                    <li><a target="_blank" href="http://www.cnblogs.com/lzhdim/archive/2009/08/16/1547046.html">联系我们</a></li>

                    <li><a target="_blank" href="http://www.cnblogs.com/lzhdim/archive/2009/08/16/1547042.html">帮助中心</a></li>

                    <li><a target="_blank" href="http://www.cnblogs.com/lzhdim/archive/2009/08/15/1546926.html">关于我们</a></li>

                    <li><a target="_blank" href="https://lzhdim.com/userinfo/wnl/index.html">万年历</a></li>

                    <li><a target="_self" href="https://i.cnblogs.com/">管理</a></li>

                </ul>

                <div style="clear: both;"></div>

            </div>

            <script language="javascript" type="text/javascript">

                $("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"80", menu_height:"28", menu_text_size:"12", menu_text_color:"#fff", menu_sprite_color:"#99CC33", menu_background_color:"#3F444A", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });

            </script>

        </div>

   </div>

       上面这个是HTML代码定义。包括了JS代码的调用。另一个菜单跳动的代码：

       $.FN_MenuJump.MenuJump($('#ul_webwidget_menu_glide_sprite li'), 20, 300);

       这个的时间和高度，需要手动调。效果见博客首页。