jquery 横向导航栏 免费

最新推荐文章于 2020-11-20 23:44:08 发布
最新推荐文章于 2020-11-20 23:44:08 发布
阅读量1k 收藏 14
点赞数 4
分类专栏： jquery 文章标签： jquery 导航栏 免费导航栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zeng092210/article/details/89926993
版权

导航栏效果图：

就不多啰嗦，这东西不难就是大多人不想写样式

直接上代码： 

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery下拉导航例子</title>
<link media="screen" rel="stylesheet" href="demo.css"/>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">

jQuery(document).ready(function(){

	var qcloud={};

	$('[_t_nav]').hover(function(){

		var _nav = $(this).attr('_t_nav');

		clearTimeout( qcloud[ _nav + '_timer' ] );

		qcloud[ _nav + '_timer' ] = setTimeout(function(){

		$('[_t_nav]').each(function(){

		$(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected');

		});

		$('#'+_nav).stop(true,true).slideDown(200);

		}, 150);

	},function(){

		var _nav = $(this).attr('_t_nav');

		clearTimeout( qcloud[ _nav + '_timer' ] );

		qcloud[ _nav + '_timer' ] = setTimeout(function(){

		$('[_t_nav]').removeClass('nav-up-selected');

		$('#'+_nav).stop(true,true).slideUp(200);

		}, 150);

	});

});

</script>
<body>
<div class="head-v3">
    <div class="navigation-up">
        <div class="navigation-inner">
            <div class="navigation-v3">
                <ul>
                    <li class="nav-up-selected-inpage" _t_nav="home">
                        <h2> <a href="#">首页</a> </h2>
                    </li>
                    <li class="" _t_nav="product">
                        <h2> <a href="#">云产品</a> </h2>
                    </li>
                    <li class="" _t_nav="wechat">
                        <h2> <a href="#">微信建站</a> </h2>
                    </li>
                    <li class="" _t_nav="solution">
                        <h2> <a href="#">行业解决方案</a> </h2>
                    </li>
                    <li class="" _t_nav="cooperate">
                        <h2> <a href="#">合作伙伴</a> </h2>
                    </li>
                    <li _t_nav="support">
                        <h2> <a href="#">帮助与支持</a> </h2>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="navigation-down">
        <div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
            <div class="navigation-down-inner">
                <dl style="margin-left: 100px;">
                    <dt>计算机与网络</dt>
                    <dd> <a hotrep="hp.header.product.compute1" href="#">云服务器</a> </dd>
                    <dd> <a hotrep="hp.header.product.compute2" href="#">弹性Web引擎</a> </dd>
                    <dd> <a hotrep="hp.header.product.compute3" href="#">负载均衡</a> </dd>
                </dl>
                <dl>
                    <dt>存储与CDN</dt>
                    <dd> <a hotrep="hp.header.product.storage1" href="#">云数据库</a> </dd>
                    <dd> <a hotrep="hp.header.product.storage2" href="#">NoSQL高速存储</a> </dd>
                    <dd> <a hotrep="hp.header.product.storage4" href="#">对象存储服务(beta)</a> </dd>
                    <dd> <a hotrep="hp.header.product.storage3" href="#">CDN</a> </dd>
                </dl>
                <dl>
                    <dt>监控与安全</dt>
                    <dd> <a hotrep="hp.header.product.monitoring1" href="#">云监控</a> </dd>
                    <dd> <a hotrep="hp.header.product.monitoring2" href="#">云安全</a> </dd>
                    <dd> <a hotrep="hp.header.product.monitoring3" href="#">云拨测</a> </dd>
                </dl>
                <dl>
                    <dt>数据分析</dt>
                    <dd> <a hotrep="hp.header.product.analysis1" href="#">腾讯云分析</a> </dd>
                    <dd> <a hotrep="hp.header.product.analysis2" href="#">关键因子</a> </dd>
                </dl>
                <dl>
                    <dt>开发者工具</dt>
                    <dd> <a hotrep="hp.header.product.devtool1" href="#">移动加速</a> </dd>
                    <dd> <a hotrep="hp.header.product.devtool2" href="#">应用加固</a> </dd>
                    <dd> <a hotrep="hp.header.product.devtool3" href="#">信鸽推送</a> </dd>
                </dl>
                <dl>
                    <dt>开发者服务</dt>
                    <dd> <a hotrep="hp.header.product.service1" href="#">安全认证服务</a> </dd>
                    <dd> <a hotrep="hp.header.product.service2" href="#">域名备案</a> </dd>
                </dl>
            </div>
        </div>
        <div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
            <div class="navigation-down-inner">
                <dl style="margin-left: 380px;">
                    <dd> <a class="link" hotrep="hp.header.solution.1" href="#">微信</a> </dd>
                </dl>
                <dl>
                    <dd> <a class="link" hotrep="hp.header.solution.2" href="#">游戏</a> </dd>
                </dl>
                <dl>
                    <dd> <a class="link" hotrep="hp.header.solution.3" href="#">移动应用</a> </dd>
                </dl>
            </div>
        </div>
        <div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
            <div class="navigation-down-inner">
                <dl style="margin-left: 610px;">
                    <dd> <a class="link" hotrep="hp.header.support.1" href="#">资料库</a> </dd>
                </dl>
                <dl>
                    <dd> <a class="link" hotrep="hp.header.support.2" href="#">论坛</a> </dd>
                </dl>
                <dl>
                    <dd> <a class="link" hotrep="hp.header.support.3" href="#">亿元扶持</a> </dd>
                </dl>
            </div>
        </div>
        <div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
            <div class="navigation-down-inner">
                <dl style="margin-left: 480px;">
                    <dd> <a hotrep="hp.header.partner.1" href="#">代理商</a> </dd>
                </dl>
                <dl>
                    <dd> <a hotrep="hp.header.partner.2" href="#">微信服务商</a> </dd>
                </dl>
                <dl>
                    <dd> <a hotrep="hp.header.partner.3" href="#">创投机构</a> </dd>
                </dl>
            </div>
        </div>
    </div>
</div>
</body>
</html>

dome.css

@charset "UTF-8";
html{font-size:62.5%;font-family:'helvetica neue',tahoma,arial,'hiragino sans gb','Simsun',sans-serif} 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr{margin:0;padding:0}
body{line-height:1.333;font-size:12px}
h1,h2,h3,h4,h5,h6{font-size:100%;font-family:arial,'hiragino sans gb','microsoft yahei','Simsun',sans-serif}
li{list-style:none}
a:link,a:visited{text-decoration:none}


.head-v3{position:relative;z-index:100;min-width:1000px}
.head-v3 .navigation-inner{margin:0 auto;width:980px;position:relative}
.navigation-up{height:60px;background:#27303f}
.navigation-up .navigation-v3{margin-left:155px;float:left;_margin-left:10px}
.navigation-up .navigation-v3 ul{float:left}
.navigation-up .navigation-v3 li{float:left;font:normal 16px/59px "microsoft yahei";color:#fff}
.navigation-up .navigation-v3 .nav-up-selected{background:#344157}
.navigation-up .navigation-v3 .nav-up-selected-inpage{background:#202833}
.navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0}
.navigation-up .navigation-v3 li h2 a{padding:0 25px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei"}

.navigation-down{position:absolute;top:60px;left:0px;width:100%}
.navigation-down .nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px}
.navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative}
.navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0}
.navigation-down .menu-1 dl{margin:20px 80px 25px 0}
.navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#61789e;padding-bottom:10px;border-bottom:1px solid #61789e;margin-bottom:10px}
.navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"}
.navigation-down .menu-1 dd a:hover{color:#60aff6}
.navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"}

接着引入jquery-1.7.1.min.js  或 其他版本jquery库

对部分自己需要的调整就可以了！ 请大家多多指正 共同进步 ~

zeng092210
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html导航栏横向展开,jquery实现可横向和竖向展开的动态下滑菜单效果
weixin_42488542的博客
05-30 1260
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下：这里演示了两个下拉导航菜单的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现，最新的jquery版本也可以引入，在演示页面中，分别有横向水平向下滑出的下拉菜单，还有纵向垂直布局...
jquery横向导航菜单
09-08
非常漂亮的横向导航菜单 Fluid Navigation CSS & jQuery
jQueryUI横向导航栏
11-10
插件描述：基于jQueryUI的三级菜单导航栏，横向全屏，蓝色商务风格，简约大方。我们公司正在用这个插件。
jquery横向滑动导航栏
10-14
精简的代码实现导航栏滑动效果，实现详解： 1.滑块位置：通过父节点position=fixed，子节点position=absolute方式，实现子节点浮动； 2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right=auto实现； 3.通过jQuery动态改变滑块的Left和Width，然后通过animate实现动画效果。
原生js和jquery分别实现横向导航菜单效果
11-22
本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下 原生javascript实现： 这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。 开始用javascript进行编写： 首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;}  之后开始写javascript脚本： [removed] [removed]=function(
jquery漂亮的横向滑出导航
12-18
jquery HTML漂亮的横向滑出导航
jquery横向动态滑动导航菜单插件
06-05
而“jQuery横向动态滑动导航菜单插件”则为开发者提供了一种高效且吸引人的解决方案，使得网页的导航功能更加直观和互动。这个插件特别适用于那些希望提升用户体验，增加网站视觉吸引力的设计师和开发者。 jQuery是...
jquery实现横向伸缩菜单导航
06-06
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
jquery下拉横向导航菜单
06-05
代码，二级下拉菜单可以直接调用另外一个html页面内容。
jQuery横向导航选项卡下拉菜单显示代码
11-19
jQuery横向导航选项卡下拉菜单显示代码 jQuery横向导航选项卡下拉菜单显示代码 jQuery横向导航选项卡下拉菜单显示代码 jQuery横向导航选项卡下拉菜单显示代码
jquery easyui 三级菜单导航
01-03
通过jquery easyui 实现三级菜单导航栏
jQuery+css实现非常漂亮的水平导航菜单效果
10-21
主要介绍了jQuery+css实现非常漂亮的水平导航菜单效果,通过each方法遍历元素再使用removeClass与addClass变换页面元素样式实现导航菜单的切换效果,需要的朋友可以参考下
JQuery 横向纵向菜单
楚人子游的专栏
11-09 1680
JScript.js Code:$(document).ready(function() { $(".ulcss > a,.hulcss > a").click(function() { var ChildrenNode = $(this).next("ul"); //实现方法一 // if (ChildrenN
横向导航菜单-用图片美化的横向列表导航菜单
养有道
06-13 1387
例子一： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decorati
jQuery水平滑动导航栏
shmilyhq的博客
05-30 470
html代码 <div class="header"> <ul class="menu"> <li class="first"> <a href="index.html" target="_self">首&nbsp;&nbsp;页</a> <dl class="li_1_content"> <dt></dt> </dl>
jquery水平二级导航代码
lijunlinlijunlin的专栏
04-23 726
jquery水平二级导航代码 - www.97zzw.com body {     font: 10px normal Verdana, Arial, Helvetica, sans-serif;     margin: 0;     padding: 0; } h1 {     font: 4.7em normal Georgia, 'Times New Roman', Tim
实现左侧导航和横向导航
有 prepare , No out
04-10 6747
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here Home Edit Ok
js easyui 标签页_【实战演练】Python+Django网站开发系列04-Django导航BASE页开发
weixin_39715907的博客
11-20 91
#本文欢迎转载，转载请注明出处和作者。上一篇讨论了如何编写静态页面，静态页面通过html语言书写，但是html写出来的页面实在是丑，所以需要进行美化，这就需要用到CSS与JS了。另外，像导航条，每一页都是一样的，因此没必要每个html页面里面把代码重复写一遍，就需要制作BASE页面了。1、CSS1.1 CSS语法CSS叫层叠样式表，主要是用来批量修改html元素的样式的（例如字体、颜色、大小等）。...
jquery水平导航栏动态菜单
Wangzx的博客
06-28 1903
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;jQuery点击展开收缩树形菜单&amp
jquery滑动导航条
最新发布
04-05
以下是一个简单的 jQuery 滑动导航条的示例： HTML 代码： ``` <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值