Maison > Article > interface Web > jquery avec menu déroulant et code de carte de focus Sharing_jquery
jquery avec menu déroulant et image de focus est une barre supérieure avec un menu déroulant secondaire et un code de menu de navigation de bannière. Amis intéressés, venez apprendre
Diagramme des effets de fonctionnement : ------------- --
Le menu déroulant jquery et l'image de focus partagée avec vous sont les suivants
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery带下拉菜单和焦点图</title> <!-- base.css | 元素还原基础样式 --> <link rel="stylesheet" type="text/css" href="templets/default/styles/base.css" /> <!-- main.css | 页面主体样式 --> <link rel="stylesheet" type="text/css" href="templets/default/styles/main.css" /> <!-- js --> <script type="text/javascript" src="templets/default/scripts/jquery-1.8.0.min.js" /></script> <script type="text/javascript" src="templets/default/scripts/jquery.SuperSlide.2.1.1.js" /></script> <script type="text/javascript" src="templets/default/scripts/public.js"></script> </head> <body> <!-- header --> <div class="header_full w_100"> <div class="header"> <!-- top_left | logo --> <div class="logo f_l"> </div> <!-- top_right --> <div class="top_right f_r"> <!-- top_link --> <div class="top_link"> <i>服务热线 12345678</i> <span> <a href="http://www.jb51.net" title="登录">登录</a> / <A href="http://www.jb51.net" title="注册">注册</A>/ <A href="http://www.jb51.net" title="免费试用" >免费试用</A> </span> </div> <!-- menu --> <div class="nav_bar"> <ul class="nav clearfix"> <!-- 单一菜单 | end --> <li class="m"> <h3><a target="_blank" href="http://www.jb51.net" title="合作专区">合作专区</a></h3> <ul class="sub"> <LI ><A href="http://www.jb51.net">欢迎合作</A> </LI> <LI ><A href="http://www.jb51.net">合作伙伴</A> </LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.jb51.net" title="客户服务">客户服务</a></h3> <ul class="sub"> <LI ><A href="http://www.jb51.net">常见问题</A> </LI> <LI ><A href="http://www.jb51.net">购买指南</A> </LI> <LI ><A href="http://www.jb51.net">备案流程</A> </LI> <LI ><A href="http://www.jb51.net">售后服务</A></LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.jb51.net" title="我的云">我的云</a></h3> <ul class="sub"> <LI ><A href="http://www.jb51.net">服务控制台</A> </LI> <LI ><A href="http://www.jb51.net">会员中心</A> </LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.jb51.net" title="产品服务">产品服务</a></h3> <ul class="sub"> <LI ><A href="http://www.jb51.net">云主机购买</A> </LI> <LI ><A href="http://www.jb51.net">360XP盾甲</A> </LI> <LI ><A href="http://www.jb51.net">360天擎</A> </LI> <LI ><A href="http://www.jb51.net">数据中心</A> </LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a href="http://www.jb51.net" title="首页">首页</a></h3> </li> <li class="block"></li><!-- 滑动块 --> </ul> </div> <!-- menu | end --> </div> </div> </div> <!-- header | end --> <!-- banner --> <div class="full_banner"> <div class="bd"> <ul> <li style="background:url(templets/default/images/banner.jpg) #56C1ED center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li> <li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li> <li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li> </ul> </div> <div class="hd"><ul></ul></div> </div> <!-- banner | end --> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>