科技类、企业类网站导航

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</link rel="stylesheet" href="css/style.css">

body<!-- 导航nav -->
div class="navbox"="nav">
        li ="drop-menu-effect"><a href="#"span>网站首页></ali> >明景产品>
             二级导航 -->
            ="submenu">
                ="mj_menu_pro_bg">
                    ="mj_menu_pro_main">
                        ="mj_menu_pro_li">
                            ="mj_menu_li_txt">
                                font>摄像机（网络高清）br />
                                >网络高清摄像机系列>网络高清球型摄像机系列>网络高清云台摄像机系列p>
                                    >摄像机（SDI高清）/>
                                    >SDI数字高清摄像机系列>SDI数字高清球型摄像机系列>SDI数字高清云台摄像机系列div="mj_menu_pro_li" style="padding-left:48px;">摄像机（模拟）>摄像机系列>智能分析系列>夜视监控系列>云台摄像机系列>高速球型摄像机系列>存储产品="padding:20px 0px 0px 48px;">中低速球型摄像机系列>监视器系列>控制键盘系列>支架系列p style="padding-top:24px;">编解码产品>行业解决方案>车载系统解决方案>行业产品="padding-top:66px;">智能交通产品>防爆产品>防爆产品（高清）>防爆产品（模拟）>平台软件="clear:both; height:0px; overflow:hidden;">资讯中心="mj_menu_news_bg"="mj_menu_news_main"="mj_menu_news_li">公司新闻>行业新闻>展会信息="mj_menu_news_img"img src="images/p.png" /></>
                            >下载中心>总览>认证证书下载>说明书下载>协议下载>样本目录下载>其它="drop-menu-e    ffect">企业概况>公司简介>质量方针>企业理念>发展历程>公司荣誉>企业风采>公司概况>
                         >联系我们="submenu"="left:-347px;"="mj_menu_news_li2">联系方式>智能地图>人才招聘>在线留言="mj_menu_news_img2">工程技术中心="mj_menu_news_li3">工程实例名录>部分案例图片="mj_menu_news_img3">工程科技研究中心>

    script ='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'script="js/script.js"html>

style.css

*{ margin:0; padding: list-style:none;}
img{ border:0;}
body{font-size:12px;color:#555555;background:url(../images/bg.jpg) no-repeat center top;}

.navbox{height:40px;position:relative;z-index:9;auto;#554b4a;filter:alpha(opacity=90);-moz-opacity:0.90;opacity:font-family:'微软雅黑';}
.nav{width:1002px;margin:0 auto;
.nav li{float:left;
.nav li.last{
.nav li a{text-decoration:
.nav li a span{display:block;line-height:14px;#ffffff;cursor:pointer;143px;text-align:center; }
.mj_hover_menu{none; width: background:url(../images/menu_hover.jpg); height:40px;}
.nav li.selected .submenu{block;}
.nav li .submenu{absolute;top:left:-9px;}
.nav li .submenu li{padding:border-bottom:dotted 0px #BEBEBE;}
.mj_menu_pro_bg{825px;235px;url(../images/menu_pro_bg.png) no-repeat;}
.mj_menu_pro_main{765px; padding-top:12px;}
.mj_menu_pro_li{ float:left;}
.mj_menu_li_txt{22px; font-size: color:#696969;}
.mj_menu_li_txt font{#bb1721;}
.mj_menu_li_txt a{#696969; text-decoration:
.mj_menu_li_txt a:hover{underline;}

.mj_menu_news_bg{480px;185px;url(../images/menu_news_bg.png) no-repeat;}
.mj_menu_news_main{440px;
.mj_menu_news_li{0px 30px; margin-right:30px;150px; border-right:solid 1px #cccccc; }
.mj_menu_news_img{ text-align:#bb1721; line-height:14px;}
.mj_menu_news_li2{right; border-left:
.mj_menu_news_img2{ margin-left:
.mj_menu_news_li3{0px 25px;
.mj_menu_news_img3{10px;14px;}

script.js

$(function(){
    menu(".drop-menu-effect");
});
 menu(_this){
    $(_this).each((){
        var $this = $(this);
        var theMenu = $this.find(".submenu"var tarHeight = theMenu.height();
        theMenu.css({height:0});
        $.hover(
            (){
                $(this).addClass("mj_hover_menu");
                theMenu.stop().show().animate({height:tarHeight},400);
            },this).removeClass("mj_hover_menu");
                theMenu.stop().animate({height:0},400,(){
                    $(this).css({display:"none"});
                });
            }
        );
    });
}

图片素材如下

科技类、企业类网站导航

相关文章