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隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 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连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Vue实现验证码功能
2019/12/03 Javascript
python encode和decode的妙用
2009/09/02 Python
使用python分析git log日志示例
2014/02/27 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python openpyxl使用方法详解
2019/07/18 Python
python打包成so文件过程解析
2019/09/28 Python
python3实现单目标粒子群算法
2019/11/14 Python
基于FME使用Python过程图解
2020/05/13 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
婚礼主持词开场白
2014/03/13 职场文书
高考励志标语
2014/06/05 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
质量整改通知单
2015/04/21 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python