> 웹 프론트엔드 > JS 튜토리얼 > 드롭다운 메뉴와 포커스 맵 코드가 있는 jquery

드롭다운 메뉴와 포커스 맵 코드가 있는 jquery

WBOY
풀어 주다: 2016-05-16 15:43:06
원래의
1227명이 탐색했습니다.

드롭다운 메뉴와 포커스 이미지가 있는 jquery는 보조 드롭다운 메뉴와 배너 탐색 메뉴 코드가 있는 상단 표시줄입니다. 관심 있는 친구들은 와서 배워보세요
작동 효과 다이어그램: ​​ ​ ​ ​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​---------- --

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.

공유해주신 jquery 드롭다운 메뉴와 포커스 이미지는 다음과 같습니다



위 내용은 여러분에게 공유된 jquery 드롭다운 메뉴와 포커스 이미지 코드입니다.
<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>
로그인 후 복사
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿