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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
ios中视频的最后一桢问题解决
May 14 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
Cakephp 执行主要流程
2010/03/24 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php时间戳转换的示例
2014/03/31 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
wxPython色环电阻计算器
2019/11/18 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Python Map 函数的使用
2020/08/28 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
业务代表的岗位职责
2013/11/16 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
文明单位申报材料
2014/12/23 职场文书
三好学生事迹材料
2014/12/24 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python