jquery带下拉菜单和焦点图代码分享


Posted in Javascript onAugust 24, 2015

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧
运行效果图:                           ----------------------查看效果 下载源码-----------------------

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="https://3water.com" title="登录">登录</a>
      /
      <A href="https://3water.com" title="注册">注册</A>/
      <A href="https://3water.com" title="免费试用" >免费试用</A>

     </span>
    </div>
    <!-- menu -->
    <div class="nav_bar">
     <ul class="nav clearfix">
          
      <!-- 单一菜单 | end -->
      
      <li class="m">
       <h3><a target="_blank" href="https://3water.com" title="合作专区">合作专区</a></h3>
       <ul class="sub">
        <LI ><A href="https://3water.com">欢迎合作</A> </LI>
        <LI ><A href="https://3water.com">合作伙伴</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="https://3water.com" title="客户服务">客户服务</a></h3>
       <ul class="sub">
        <LI ><A href="https://3water.com">常见问题</A> </LI>
        <LI ><A href="https://3water.com">购买指南</A> </LI>
        <LI ><A href="https://3water.com">备案流程</A> </LI>
        <LI ><A href="https://3water.com">售后服务</A></LI> 
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="https://3water.com" title="我的云">我的云</a></h3>
       <ul class="sub">
       <LI ><A href="https://3water.com">服务控制台</A> </LI>
        <LI ><A href="https://3water.com">会员中心</A> </LI>
  </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="https://3water.com" title="产品服务">产品服务</a></h3>
       <ul class="sub">
       <LI ><A href="https://3water.com">云主机购买</A> </LI>
       <LI ><A href="https://3water.com">360XP盾甲</A> </LI>
       <LI ><A href="https://3water.com">360天擎</A> </LI>
       <LI ><A href="https://3water.com">数据中心</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a href="https://3water.com" 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="https://3water.com"></a></li>
 <li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="https://3water.com"></a></li>
 <li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="https://3water.com"></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>

以上就是为大家分享的jquery带下拉菜单和焦点图代码,希望大家可以喜欢。

Javascript 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
canvas时钟效果
Feb 16 Javascript
原生js实现轮播图
Feb 27 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 #Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 #Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 #Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 #Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 #Javascript
You might like
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python网页解析器使用实例详解
2020/05/30 Python
python 实现两个npy档案合并
2020/07/01 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
团队精神演讲稿
2013/12/31 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
运动会通讯稿200字
2014/02/16 职场文书
2014年健康教育工作总结
2014/11/20 职场文书