html+css3+jquery带图片的导航下拉特效
1、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div class="wrapper"> <稆糨孝汶;div class="head"> <div class="topNav"> <div class="topNavList"> <a href="#">关于我们</a> <a href="#">行业考察</a> <a href="#">产品中心</a> <a href="#">技术服务</a> <a href="#">新闻中心</a> <a href="#">联系我们</a> <div class="topNavSub"> <div class="activeLeft"></div> <div class="activeRight"></div> </div> </div> </div> <div class="subNavWrapper"> <div class="subNavSet"> <div class="subNav sub0"> <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span> <ul> <li> <a href="#">关于我们1</a> <a href="#">关于我们2</a> <a href="#">关于我们3</a> </li> </ul> <span class="features"> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>净世界，美生活。</strong></em></a></i> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>诚信 专业 激情。</strong></em></a></i> </span> </div> <div class="subNav sub1"> <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span> <ul> <li> <a href="#">行业考察1</a> <a href="#">行业考察2</a> <a href="#">行业考察3</a> </li> </ul> <span class="features"> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>诚信 专业 激情。</strong></em></a></i> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>行业的领跑者。</strong></em></a></i> </span> </div> <div class="subNav sub2"> <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span> <ul> <li> <a href="#">电子功能材料</a> <a href="#">高性能纤维材料</a> <a href="#">净化工程</a> <a href="#">超净产品</a> <a href="#">医疗产品</a> <a href="#">护理产品</a> <a href="#">精密模具</a> </li> </ul> <span class="features"> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>精雕细刻 巧夺天工。</strong></em></a></i> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>精益求精 无微不至。</strong></em></a></i> </span> </div> <div class="subNav sub3"> <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span> <ul> <li> <a href="#">技术研发</a> <a href="#">专业测试</a> <a href="#" >技术咨询服务</a> </li> </ul> <span class="features"> <i><a href="#" ><img width="177" height="100" src="images/index1.jpg" ><em><strong>高新技术产品的研发和生产。</strong></em></a></i> <i><a href="#"><img width="177" height="100" src="images/index2.jpg"><em><strong>提供优质的品牌产品和服务。</strong></em></a></i> </span> </div> <div class="subNav sub4"> <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span> <ul> <li> <a href="#"> 基本信息</a> <a href="#">公司治理</a> <a href="#">定期报告</a> <a href="#"> 临时公告</a> <a href="#">投资者交流</a> <a href="#">分析研究报告</a> <a href="#"> 股息资料</a> </li> </ul> <span class="features"> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>沟通创造价值。</strong></em></a></i> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>稳定和可持续发展。</strong></em></a></i> </span> </div> <div class="subNav sub5"> <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span> <ul> <li> <a href="#">人才理念</a> <a href="#">人才招聘</a> </li> </ul> <span class="features"> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>xxxxxxxxxxxxx。</strong></em></a></i> <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>xxxxxxxxxxx。</strong></em></a></i> </span> </div> </div> </div> </div></div>
5、书写并添加js代码。<script src="js/jquery-1.9.1.min.js"></script><script>$(document).ready(function() { nav();})var idx;var arr_offsetX = [0, 144, 233, 345, 400, 450];function nav() { $(".topNavList a").hover(function() { idx = $(".topNavList a").index(this); $(".subNavWrapper").show(); $(".activeLeft").show(); $(".activeRight").show(); var offsetXArrow = $(".topNavList a").eq(idx).position().left - 455; var w = $(".topNavList a").eq(idx).width() + 22; $(".topNavList a").eq(idx).addClass("activeTopNav"); $(".activeLeft").css("left", offsetXArrow+'px'); $(".activeRight").css("left", offsetXArrow+w+'px'); $(".subNavSet div").eq(idx).show(); if (idx == 0 || idx == 1 || idx == 3 || idx == 5) { $(".subNavSet .subNav").eq(idx).find("ul").css("width", "132px"); $(".subNavSet .features").eq(idx).css("left", "195px"); } else { $(".subNavSet .subNav").eq(idx).find("ul").css("width", "292px"); $(".subNavSet .features").eq(idx).css("left", "315px"); }; }, function() { $(".subNavWrapper").hide(); $(".activeLeft").hide(); $(".activeRight").hide(); $(".topNavList a").eq(idx).removeClass("activeTopNav"); $(".subNavSet div").eq(idx).hide(); }) $(".subNavSet div").hover(function() { $(".subNavWrapper").show(); $(".topNavList a").eq(idx).addClass("activeTopNav"); $(".activeLeft").show(); $(".activeRight").show(); $(this).show(); }, function() { $(".subNavWrapper").hide(); $(".activeLeft").hide(); $(".topNavList a").eq(idx).removeClass("activeTopNav"); $(".activeRight").hide(); $(this).hide(); })}</script>
7、查看效果。
