ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

科技类、企业类网站导航

2020-05-07 11:05:21  阅读：210  来源： 互联网

标签：科技类 none 网站 menu mj li height 导航 left


效果图

 

index.html

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

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

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

style.css

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

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

script.js

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

图片素材如下

 

标签：科技类,none,网站,menu,mj,li,height,导航,left
来源： https://www.cnblogs.com/chenyingying0/p/12841557.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有