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 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
生成二维码方法汇总
Dec 26 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
解决vue项目router切换太慢问题
Jul 19 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调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
php中的依赖注入实例详解
2019/08/14 PHP
javascript定义函数的方法
2010/12/06 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
jsonp原理及使用
2013/10/28 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python抖音表白程序源代码
2019/04/07 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python3中eval函数用法使用简介
2019/08/02 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
java字符串格式化输出实例讲解
2021/01/06 Python
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
银行实习生的自我评价
2013/12/09 职场文书
党员自我评价分享
2013/12/13 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书