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 backgroundImage控制
May 19 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php仿ZOL分页类代码
2008/10/02 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
js 编写规范
2010/03/03 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
公司授权委托书样本
2014/09/15 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript