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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
jQuery bind事件使用详解
May 05 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 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
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
不安全的常用的js写法
2009/09/15 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python爬取京东的商品分类与链接
2016/08/26 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python实现关键词提取的示例讲解
2018/04/28 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
迟到检讨书1000字
2014/01/15 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
网络管理专业求职信
2014/03/15 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
《颐和园》教学反思
2016/02/19 职场文书
人民调解协议书
2016/03/21 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技
TS 类型收窄教程示例详解
2022/09/23 Javascript