jquery带下拉菜单和焦点图代码分享
作者:bea
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的jquery带下拉菜单和焦点图如下 <head><meta http-equiv="Content-Type" content="text/htm
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧 运行效果图: ----------------------查看效果 下载源码-----------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的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="http://" title="登录">登录</a>
/
<A href="http://" title="注册">注册</A>/
<A href="http://" title="免费试用" >免费试用</A>
</span>
</div>
<!-- menu -->
<div class="nav_bar">
<ul class="nav clearfix">
<!-- 单一菜单 | end -->
<li class="m">
<h3><a target="_blank" href="http://" title="合作专区">合作专区</a></h3>
<ul class="sub">
<LI ><A href="http://">欢迎合作</A> </LI>
<LI ><A href="http://">合作伙伴</A> </LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a target="_blank" href="http://" title="客户服务">客户服务</a></h3>
<ul class="sub">
<LI ><A href="http://">常见问题</A> </LI>
<LI ><A href="http://">购买指南</A> </LI>
<LI ><A href="http://">备案流程</A> </LI>
<LI ><A href="http://">售后服务</A></LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a target="_blank" href="http://" title="我的云">我的云</a></h3>
<ul class="sub">
<LI ><A href="http://">服务控制台</A> </LI>
<LI ><A href="http://">会员中心</A> </LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a target="_blank" href="http://" title="产品服务">产品服务</a></h3>
<ul class="sub">
<LI ><A href="http://">云主机购买</A> </LI>
<LI ><A href="http://">360XP盾甲</A> </LI>
<LI ><A href="http://">360天擎</A> </LI>
<LI ><A href="http://">数据中心</A> </LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a href="http://" 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://"></a></li>
<li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://"></a></li>
<li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://"></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带下拉菜单和焦点图代码,希望大家可以喜欢。
有用 | 无用
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的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="http://" title="登录">登录</a>
/
<A href="http://" title="注册">注册</A>/
<A href="http://" title="免费试用" >免费试用</A>
</span>
</div>
<!-- menu -->
<div class="nav_bar">
<ul class="nav clearfix">
<!-- 单一菜单 | end -->
<li class="m">
<h3><a target="_blank" href="http://" title="合作专区">合作专区</a></h3>
<ul class="sub">
<LI ><A href="http://">欢迎合作</A> </LI>
<LI ><A href="http://">合作伙伴</A> </LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a target="_blank" href="http://" title="客户服务">客户服务</a></h3>
<ul class="sub">
<LI ><A href="http://">常见问题</A> </LI>
<LI ><A href="http://">购买指南</A> </LI>
<LI ><A href="http://">备案流程</A> </LI>
<LI ><A href="http://">售后服务</A></LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a target="_blank" href="http://" title="我的云">我的云</a></h3>
<ul class="sub">
<LI ><A href="http://">服务控制台</A> </LI>
<LI ><A href="http://">会员中心</A> </LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a target="_blank" href="http://" title="产品服务">产品服务</a></h3>
<ul class="sub">
<LI ><A href="http://">云主机购买</A> </LI>
<LI ><A href="http://">360XP盾甲</A> </LI>
<LI ><A href="http://">360天擎</A> </LI>
<LI ><A href="http://">数据中心</A> </LI>
</ul>
</li>
<li class="s">|</li>
<li class="m">
<h3><a href="http://" 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://"></a></li>
<li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://"></a></li>
<li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://"></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带下拉菜单和焦点图代码,希望大家可以喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 基于jQuery实现在线选座之高铁版
- jQuery实现TAB风格的全国省份城市滑动切换效果代码
- jquery实现像栅栏一样左右滑出式二级菜单效果代码
- jQuery实现的fixedMenu下拉菜单效果代码
- 基于jquery实现在线选座订座之影院篇
- js淡入淡出的图片轮播效果代码分享
- jquery地址栏链接与a标签链接匹配之特效代码总结
- jquery实现鼠标滑过显示二级下拉菜单效果
- js实现的简洁网页滑动tab菜单效果代码
- jquery+html5烂漫爱心表白动画代码分享
- jquery+CSS实现的多级竖向展开树形TRee菜单效果
- jQuery超酷平面式时钟效果代码分享
- jquery实现可横向和竖向展开的动态下滑菜单效果
- jQuery支持添加事件的日历特效代码分享(3种样式)
- jQuery实现的多级下拉菜单效果代码
- js贪吃蛇网页版游戏特效代码分享(挑战十关)
- jquery马赛克拼接翻转效果代码分享
- jquery+CSS实现的水平布局多级网页菜单效果
- jQuery实现的背景动态变化导航菜单效果