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传递变量: 值传递?引用传递?
Feb 22 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
js密码强度校验
Nov 10 Javascript
js实现无缝滚动特效
Dec 20 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python字典基本操作实例分析
2015/07/11 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python实现Zabbix-API监控
2018/09/17 Python
浅谈Python中的bs4基础
2018/10/21 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
自荐信要包含哪些内容
2013/11/06 职场文书
物业管理专业自荐信
2014/07/01 职场文书
区域经理岗位职责
2015/02/02 职场文书
会计求职自荐信
2015/03/26 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python