html+ js+ jq+css导航条菜单的制作(水平，竖直，伸缩，带有动画效果等等。。。)

最新推荐文章于 2024-01-25 08:52:22 发布
最新推荐文章于 2024-01-25 08:52:22 发布
阅读量3.4k 收藏 9
点赞数 1
分类专栏： 前端学习笔记 文章标签： html导航菜单 css js j
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITzhongzi/article/details/51889442
版权

第一种导航菜单，最普通的：（竖直的）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
ul{list-style: none;width: 100px;}
a{text-decoration: none;display: block;height: 30px;
line-height: 30px;width: 100px;background-color: #ccc;
margin-bottom: 1px;text-indent: 10px;}
a:hover{background-color: #f60;color: #fff;}
</style>
</head>
<body>
<ul>
<li><a href="#">首       页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>


</ul>
</body>
</html>



水平的导航菜单：：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
ul{list-style: none;}
li{float: left;}
a{text-decoration: none;display: block;height: 30px;
line-height: 30px;width: 100px;background-color: #ccc;
margin-bottom: 1px;text-align: center;}
a:hover{background-color: #f60;color: #fff;}
</style>
</head>
<body>
<ul>
<li><a href="#">首       页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>


</ul>
</body>
</html>



圆角的菜单导航：：：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
ul{list-style: none;height:50px;border-bottom: 5px solid #F60;padding-left: 30px;}
li{float: left;margin-top: 22px;}
a{text-decoration: none;display: block;
line-height: 30px;width: 120px;background-color: #ccc;
margin-bottom: 1px;text-align: center;background: url(img/btnBg.png);}
.on,a:hover{color: #fff;background-position: 0 -30px;}
</style>
</head>
<body>
<ul>
<li><a  class="on" href="#">首       页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>


</ul>
</body>
</html>



竖直伸缩的菜单导航：：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
ul{list-style: none;height:50px;border-bottom: 5px solid #F60;padding-left: 30px;}
li{float: left;margin-top: 22px;}
a{text-decoration: none;display: block;
line-height: 30px;width: 120px;background-color: #ccc;
margin-bottom: 1px;text-align: center;}
.on,a:hover{color: #fff;background-color: #F60;height:40px;line-height:40px;margin-top: -10px;}
</style>
<script >
window.onload = function(){
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length;i++)
{
aA[i].onmouseover = function(){
clearInterval(this.time);
var This = this;
This.time = setInterval(function(){
This.style.width = This.offsetWidth+8+"px";
if(This.offsetWidth>=160)
{
clearInterval(This.time);
}
},30)
}
aA[i].onmouseout = function(){
clearInterval(this.time);
var This = this;
This.time = setInterval(function(){
This.style.width = This.offsetWidth-8+"px";
if(This.offsetWidth<=120)
{
This.style.width="120px";
clearInterval(This.time);
}
},30)
}
}
}
</script>
</head>
<body>
<ul>
<li><a  class="on" href="#">首       页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>


</ul>
</body>
</html>


水平伸缩的菜单单行：：：：用jq写的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
ul{list-style: none;height:50px;border-bottom: 5px solid #F60;padding-left: 30px;}
li{float: left;margin-top: 22px;}
a{text-decoration: none;display: block;
line-height: 30px;width: 120px;background-color: #ccc;
margin-bottom: 1px;text-align: center;}
.on,a:hover{color: #fff;background-color: #F60;height:40px;line-height:40px;margin-top: -10px;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script >
$(function(){
$('a').hover(
function(){
$(this).stop().animate({"width":"160px"},300);
},
function(){
$(this).stop().animate({"width":"120px"},300);
}
)
})
</script>
</head>
<body>
<ul>
<li><a  class="on" href="#">首       页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>


</ul>
</body>
</html>


ITzhongzi
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html+css+js+jq的一些学习小demo.zip
01-01
html+css+js+jq的一些学习小demohtml+css+js+jq的一些学习小demo html+css+js+jq的一些学习小demohtml+css+js+jq的一些学习小demo html+css+js+jq的一些学习小demohtml+css+js+jq的一些学习小demo html+css+js+jq的...
jQ+CSS3创意动画添加删除效果特效代码
03-20
"jQ+CSS3创意动画添加删除效果特效代码"就是一个针对这个目标设计的资源，它结合了jQuery和CSS3的强大功能，为网页列表项提供创新的添加和删除动画。 首先，jQuery是一个广泛使用的JavaScript库，它简化了...
编程笔记 html5&css&js 057 CSS导航栏
明月看潮生的博客
01-25 1190
导航栏。易用的导航对于任何网站都很重要。通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。
HTML/CSS导航菜单-伸缩菜单的制作(垂直方向）
01-01的博客
09-17 1万+
*{ padding:0px; margin:0px; font-size: 14px; } ul{ height: 31px; padding-top: 60px; list-style: none; border-bottom: 5px solid brown; } li{ } a{
html竖中心,HTML5 竖向导航菜单栏
weixin_35566895的博客
05-30 1047
CSS语言：CSSSCSS确定* {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}body {background: #2d2c41;font-family: 'Open Sans', Arial, Helvetica, Sans-ser...
垂直导航栏JS版
小白小白从不日别的博客
04-14 1833
1.概述 对于该案例静态部分主要利用了无序列表、自定义列表以及定位 第一部分： 首先定义一个容器，为其父类 其次书写内容部分，使得内容的总高度为100%，也就是与父元素的高度相等 再者利用百分比来平均分配，使每个小的子类的高度总和为100%，这样设计的目的也就是为了更好的、更灵活的平均分配父类的高度 最后关于里面的小图标就利用定位来实现；样式在这里就不去叙述了 接下来直接上代码，看结果 <div class="wrapper"> <nav class="side-nav" id="
html文字纵向导航栏,JS+CSS实现另类带提示效果的竖向导航菜单
weixin_42524703的博客
06-02 1013
本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单。分享给大家供大家参考。具体如下：这是一款JS+CSS打造另类带提示的竖向导航菜单，觉得挺不错，只是美工水平有限，有兴趣的朋友就请继续完善吧。运行效果截图如下：在线演示地址如下：具体代码如下：带提示的竖向导航菜单#coolmenu{border: 1px solid black;width: 160px;background-color: ...
使用html+css+js+jq制作一个2048的小游戏
最新发布
03-12
在本项目中，我们将探讨如何使用HTML、CSS、JavaScript（以及jQuery库）来创建一个2048小游戏。2048是一款广受欢迎的数字拼图游戏，玩家通过上下左右滑动屏幕，使得相同数字的方块合并，目标是达到2048这个数值。 ...
前端教程（html+css+js+jq+jsp还有项目）
04-11
html+css+js+jq+jsp+php还有一些项目开发。
JQ+CSS3过滤动画效果特效代码
03-20
在这个“JQ+CSS3过滤动画效果特效代码”项目中，我们将探讨如何结合这两者来创建引人入胜的过滤动画效果。 首先，jQuery是一个快速、简洁的JavaScript库，它极大地简化了JavaScript代码的编写，尤其是对于DOM操作、...
页面右侧可收缩菜单图标.zip
08-05
页面右侧可收缩菜单图标，常用于购物页面右侧悬浮的菜单，可以收缩减少页面占用。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
竖排着的导航菜单 html5
06-23
竖排着的导航菜单，向古书写在竹子上的一样，菜单多的时候可以向一边卷。
javascript制作的动态导航栏
08-23
javascript制作的动态导航栏，javascript制作的动态导航栏
JS之三级竖向展开/收缩导航菜单
netuser1937的博客
02-07 3568
JS之三级竖向展开/收缩导航菜单
Html+CSS+JS实现侧边下拉导航栏（web前端开发基础）
热门推荐
weixin_40841866的博客
10-20 2万+
该代码源自我昨天在B站看的一个视频课（av27073032），造福群众，不喜勿喷。 HTML源代码（建议用Chrome浏览器打开，兼容性强，不易出现乱码现象）： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&quot
Js+CSS横向导航菜单
旺仔专栏
11-28 5392
效果图： 以下是源代码：>  html>      head>          meta http-equiv="Content-Type" content="text/html; charset=gb2312" />          meta http-equiv="Content-Language" content="zh-CN" />          tit
纯css实现垂直导航栏
wangjun5159的专栏
02-24 1576
ul.nav{ margin:0; padding:0; width: 8em; list-style-type: none; background-color: #8BD400; border:1px solid #486B02; font-size: 2em; } /*去掉最后一个li中a的border-bottom*/ ul.nav li:last-child a{ bord
HTML+CSS+JS+JQ测试题 - 副本.pdf
11-26
HTML+CSS+JS+JQ测试题是一份针对HTML、CSS、JavaScript (JS) 和jQuery基础知识的考核材料。以下是部分题目及其解析： 1. **HTML基础** - HTML是HyperText Markup Language的缩写，它是一种用于创建网页结构的语言...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITzhongzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值