网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

会移动的JQ导航菜单

关注我吧
 2014/5/2 16:21:14 阅读次数:2940

下拉菜单是企业网站开发中常用的到的东西,下面我介绍一个基于jquery实现的下拉菜单效果,会移动的JQ导航菜单。效果如下:

会移动的JQ导航菜单

源代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>会移动的JQ导航菜单-幸凡学习网</title>
<style>
/*reset*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0;}
body{ font: 12px/1.5  "宋体"; *line-height: 1.5;}
button, input, select, textarea { font: 12px/1.5 tahoma, arial, "宋体"; *line-height: 1.5;}
html{overflow-y: scroll;*overflow-y:inherit;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
address, cite, dfn, em, var {font-style: normal;}
code, kbd, pre, samp { font-family: courier new, courier, monospace;}
small { font-size: 12px;}
ul, ol { list-style: none;}
a {  text-decoration: none;color:#4d4d4d;}
sup { vertical-align: text-top;}
sub { vertical-align: text-bottom;}
legend {  color: #000;}
fieldset, img { border: 0;}
button, input, select, textarea {  font-size: 100%;vertical-align:middle;}
table { border-collapse: collapse; border-spacing: 0;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {*zoom: 1;}
/*End reset*/

.hh-nav {margin:20px auto;width:800px;height: 34px;color: #fff;background: #9c0800; z-index:188;text-align: left;position:relative;z-index:99;}
.hh-nav a {line-height: 34px;font-family: "Microsoft YaHei";font-size: 16px;font-weight:normal;color: #7a2d1e;}
.hn-buy {float: left;width: 198px;background: #800000;text-align: center; font-size:18px;}
.hn-con {float:left;z-index: 190;position: relative}
.hn-con li {float: left;font-size:16px;width:100px;}
.hn-con a {display:block;height:34px;text-align:center;color: #fff;}

.hn-con a:hover {color:#fff;}
a.hn-nowat, a.hn-nowat:hover {background: #700000;}

.nav-slider{width:100px;left: 72px;height: 34px;background: #850000;position: absolute;display: none;}
.hh-nav .drop-box{position: absolute;z-index:190;top:34px;left:100px;border: solid #9c0800;border-width: 0 2px 2px; background: #fff9df;display: none;}
.hh-nav .drop-box li{position: relative; background: #fff9df;width:96px;text-align:center;vertical-align: middle;}
.hh-nav .drop-box li.on{background: #ffe8b6;}
</style>
</head>
<body>
<script type="text/javascript" src="http://www.86y.org/js/jq.js"></script>
<script type="text/javascript">
    //新版头部导航效果
    var navigation=function(){
        var dom={
            "navMenu":$("#nav_menu .show-list"),//主导航
            "navSlider":$("#nav_slider"),//滑动块
            "navSlide":$("#nav_slide")//下拉菜单项
        };
		var m_width=100;
        /*主导航切换[[*/
        var switchNav=function(_this){
            var _ele=$(_this).parent();
            var _index= dom.navMenu.index(_this);
            var _menuData=_ele.find("ul").clone(true).show();
            var _w=_ele.width();
            var _isData=_ele.find("ul").length>0;

            if( dom.navSlide.is(":visible")){//下拉菜单是否隐藏 隐藏代表从外面进来
                _isData?dom.navSlide.html(_menuData).show():dom.navSlide.hide();//如果没有下拉菜单的选项就隐藏
                dom.navSlide.stop(true,false).animate({"height":_menuData.height()||"hide","left":m_width+(_w*_index)},200,function(){
                    var _iframe=$.browser.version=="6.0"?"<iframe src=\"about:blank\" style=\"position:absolute;left:0px;top:0px;\" height="+dom.navSlide.height()+" width="+dom.navSlide.width()+" class=\"nav-slide-iframe\" scrolling=\"no\" frameborder=\"0\" ></iframe>":"";
                    $(this).prepend(_iframe);
                });
            }else{
                _isData?dom.navSlide.html(_menuData).show():dom.navSlide.hide(); //如果没有下拉菜单的选项就隐藏
                dom.navSlide.css({"left":m_width+(_w*_index),"height":"0px"}).stop(true,false).animate({"height":_menuData.height()||"hide"},200,function(){
                    var _iframe=$.browser.version=="6.0"?"<iframe src=\"about:blank\" style=\"position: absolute; left:0px; top:0px;\" height=\""+dom.navSlide.height()+"\" width=\""+dom.navSlide.width()+"\" class=\"nav-slide-iframe\" scrolling=\"no\" frameborder=\"0\" ></iframe>":"";
                    $(this).prepend(_iframe);
                });
            }
            if( dom.navSlider.is(":visible")){//滑动块是否隐藏 隐藏代表从外面进来
                dom.navSlider.show().stop(true,false).animate({"left":m_width+(_w*_index)},200);//导航滑动块
            }else{
                dom.navSlider.show().css({"left":m_width+(_w*_index)});//导航滑动块
            }

        }
        dom.navMenu.bind("mouseenter",function(){//鼠标进入导航选项的时候
            switchNav(this);
            /*导航下拉样式[[*/
            dom.navSlide.find("li").hover(function(){
                $(this).addClass("on");
            },function(){
                $(this).removeClass("on");
            });
            /*导航下拉样式]]*/
        });

        dom.navSlide.bind("mouseenter",function(){//鼠标进入下拉菜单的时候
            $(this).show().stop(true,false).animate({"height":$(this).height()},200);
            dom.navSlider.show();//滑动块不隐藏
        });
        $("#nav_menu .show-list,#nav_slide").bind("mouseleave",function(){//鼠标离开导航||下拉菜单的时候
			if(dom.navSlide.is(":visible") || dom.navSlide.is(":hidden")){
                dom.navSlide.stop(true,false).animate({"height":"hide"},200,function(){$("#nav_slide,#nav_slider").hide();});
            }
        });
    }

    $(document).ready(function(){
        navigation();
    })
</script>
<!-- 头部begin [[-->
<div class="hh-nav">
  <ul class="hn-con" id="nav_menu">
    <li> <a class="hn-nowat" href="#">首页</a> </li>
    <li><a class="show-list" href="#">菜单1</a>
      <ul style="display: none;">
        <li><a href="#">子菜单1</a></li>
      </ul>
    </li>
    <li><a class="show-list" href="#">菜单2</a>
      <ul style="display: none;">
        <li><a href="#">子菜单1</a></li>
      </ul>
    </li>
    <li> <a class="show-list" href="#">菜单3</a>
      <ul style="display: none;">
        <li><a href="#" >子菜单1</a></li>
        <li><a href="#" >子菜单1</a></li>
        <li><a href="#" >子菜单1</a></li>
        <li><a href="#" >子菜单1</a></li>
        <li><a href="#" >子菜单1</a></li>
      </ul>
    </li>
    <li><a class="show-list" href="#">菜单4</a>
      <ul style="display: none;">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
      </ul>
    </li>
    <li> <a class="show-list" href="#">菜单5</a>
      <ul style="display: none;">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
      </ul>
    </li>
    <li><a class="show-list" href="#">菜单6</a>
      <ul style="display: none;">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单1</a></li>
      </ul>
    </li>
    <li><a class="show-list" href="#">菜单17</a> </li>
  </ul>
  <div id="nav_slider" class="nav-slider"></div>
  <div id="nav_slide" class="drop-box"></div>
</div>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭