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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue实现多页签组件
Jan 14 Vue.js
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
Vuex提升学习篇
2018/01/11 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python实现媒体播放器功能
2018/02/11 Python
Python调用C语言的实现
2019/07/26 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
大学生的自我鉴定范文
2014/01/21 职场文书
金融管理应届生求职信
2014/02/20 职场文书
小学语文业务学习材料
2014/06/02 职场文书
2014教师研修学习体会
2014/07/08 职场文书
教师节班会开场白
2015/06/01 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL