jquery带下拉菜单和焦点图代码分享

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2016-04-04
这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧
运行效果图:                           ----------------------查看效果 下载源码-----------------------

jquery带下拉菜单和焦点图代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery带下拉菜单和焦点图如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带下拉菜单和焦点图</title>
<!-- base.css | 元素还原基础样式 -->
<link  type="text/css" href="templets/default/styles/base.css" />
<!-- main.css | 页面主体样式 -->
<link  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="http://www.jb51.net" title="登录">登录</a>
      /
      <A href="http://www.jb51.net" title="注册">注册</A>/
      <A href="http://www.jb51.net" title="免费试用" >免费试用</A>

     </span>
    </div>
    <!-- menu -->
    <div class="nav_bar">
     <ul class="nav clearfix">
          
      <!-- 单一菜单 | end -->
      
      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="合作专区">合作专区</a></h3>
       <ul class="sub">
        <LI ><A href="http://www.jb51.net">欢迎合作</A> </LI>
        <LI ><A href="http://www.jb51.net">合作伙伴</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="客户服务">客户服务</a></h3>
       <ul class="sub">
        <LI ><A href="http://www.jb51.net">常见问题</A> </LI>
        <LI ><A href="http://www.jb51.net">购买指南</A> </LI>
        <LI ><A href="http://www.jb51.net">备案流程</A> </LI>
        <LI ><A href="http://www.jb51.net">售后服务</A></LI> 
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="我的云">我的云</a></h3>
       <ul class="sub">
       <LI ><A href="http://www.jb51.net">服务控制台</A> </LI>
        <LI ><A href="http://www.jb51.net">会员中心</A> </LI>
  </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="产品服务">产品服务</a></h3>
       <ul class="sub">
       <LI ><A href="http://www.jb51.net">云主机购买</A> </LI>
       <LI ><A href="http://www.jb51.net">360XP盾甲</A> </LI>
       <LI ><A href="http://www.jb51.net">360天擎</A> </LI>
       <LI ><A href="http://www.jb51.net">数据中心</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a href="http://www.jb51.net" 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="http://www.jb51.net"></a></li>
 <li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li>
 <li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></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带下拉菜单和焦点图代码,希望大家可以喜欢。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • php好代码风格的阶段性总结
    这篇文章主要介绍了php好代码风格,阶段性总结了php程序设计中变量.函数.参数的相关使用注意事项与编程技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文总结了php好代码的风格,分享给大家供大家参考,具体如下: 1.避免使用魔数 if($age<18){ } 这个18不太明白为什么要这样子. 可以将28定义在一个变量里面,这个变量命名表明了这个值的 ...
  • 探讨Ajax中有关readyState状态值和status状态码)的问题
    这篇文章主要介绍了探讨Ajax中有关readyState状态值和status状态码的问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function () { t ...
  • php微信开发之批量生成带参数的二维码
    php微信开发之批量生成带参数的二维码
    这篇文章主要介绍了php微信开发之批量生成带参数的二维码 的相关资料,需要的朋友可以参考下带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个接口,那下面就来研究一下吧. 具体接口说明请参见,微信公众平台开发者文档(http://mp.weixin.qq.com/wiki ...
  • jQuery如何用正则表达式验证手机号、身份证号、中文名称
    这篇文章主要介绍了jQuery如何用正则表达式验证手机号.身份证号.中文名称 的相关资料,需要的朋友可以参考下数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • JavaWeb实现图形报表折线图的方法
    这篇文章主要介绍了JavaWeb实现图形报表折线图的方法,涉及JSP包的引用.图形操作.配置文件设置及字符串操作技巧,需要的朋友可以参考下本文实例讲述了JavaWeb实现图形报表折线图的方法.分享给大家供大家参考,具体如下: 步骤说明: 1. 导入log4j.jar,jfreechart-0.9.18.jar,jdom.jar,jcommon-0.9.3.j ...
猜你喜欢