Home >Web Front-end >JS Tutorial >jquery with drop-down menu and focus map code sharing_jquery

jquery with drop-down menu and focus map code sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:43:061204browse

jquery with drop-down menu and focus image is a top bar with secondary drop-down menu and banner navigation menu code. Friends who are interested, come and learn
Operation effect diagram: ​​ ​ ​ ​ ​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​---------------

Tips: If the browser does not work properly, you can try switching the browsing mode.

The jquery drop-down menu and focus image shared with you is as follows



The above is the jquery drop-down menu and focus image code shared with you. I hope you like it.
<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>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn