CSS导航栏菜单制作大全

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量2.3k 收藏 38
点赞数 8
分类专栏： HTML JavaScript 文章标签： css 导航栏 菜单栏 二级菜单

1.垂直导航栏

看代码：

<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:120px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>

<body>

<ul class="nav">
    <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>

注意点：
1.display:block; text-indent:20px;，将a元素设置为块状元素，并内缩20px，如果用padding内缩会增加宽度。
2.<a href="#">首　　页</a>，这句代码中的空格是全角输入法下的空格，半角下是这样的：
1 正确的效果：2

2.水平菜单栏

我们只需要将li标签浮动下，然后将a标签文本居中text-align:center;

*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav li{float:left;}//
.nav li a{ display:block;text-align:center; height:30px; line-height:30px; width:120px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}

3

可以看到还有li标签的黑点，加一句.nav{list-style:none;}就好：

4

3.圆角菜单制作

需要一张图片背景：5，可以看到这张图片上下是一样的，所以我们给每个a标签设置其为背景，然后hover时将背景向下移动即可。background-position:0 -30px;

*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(images/btnBg.png); margin-left:1px;}
.nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;}

6

4.垂直伸缩菜单栏

效果：6

相对于上面的水平菜单2，我们增加几句代码：

.nav{list-style:none;margin-top:20px;}
.nav li a:hover{ background-color:#F60; color:#fff;height:40px;
    margin-top:-10px;}

把hover时的高度设为40px，同时要设margin向上移。

5.水平菜单动画

7
当鼠标移上时增加宽度，并加上动画，我们用js代码实现：

<script text="text/javascript">
    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){
                        clearInterval(This.time);
                    }
                },30);
            }
        }
    }
</script>

当然，用jQuery更加简单：

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script text="text/javascript">
    $(function(){
        $("a").hover(
        function(){
            $(this).stop().animate({"width":"160"},200);
        },
        function(){
            $(this).stop().animate({"width":"120"},200);
        }
        );
    });
</script>

6.二级菜单制作

<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
a { color: #333; text-decoration: none }
ul{ list-style: none; }
.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}
.nav li { float: left; position:relative; height:30px; width:120px }
.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}
.subNav li a{ background:#ddd }
.subNav li a:hover{ background:#efefef}
</style>
<script>
window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    for(var i=0; i<aLi.length; i++){
        aLi[i].onmouseover=function(){
            //鼠标经过一级菜单，二级菜单动画下拉显示出来
            var sub = this.getElementsByTagName('ul')[0];
            if(sub!=null){
                var This = sub;
                clearInterval(This.id);
                This.id=setInterval(function(){
                    This.style.height=This.offsetHeight+20+"px";
                    if(This.offsetHeight>=160){
                        clearInterval(This.id);
                    }
                },30);
            }
        }
        //鼠标离开菜单，二级菜单动画收缩起来。        
        aLi[i].onmouseout=function(){
             var sub = this.getElementsByTagName('ul')[0];
            if(sub!=null){
                var This = sub;
                clearInterval(This.id);
                This.id=setInterval(function(){
                    This.style.height=This.offsetHeight-20+"px";
                    if(This.offsetHeight<=0){
                        clearInterval(This.id);
                    }
                },30);
            }
        }


    }
}
</script>
</head>
<body>
<ul class="nav">
    <li><a href="#">一级菜单</a>
        <ul class="subNav">
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a>
        <ul class="subNav">
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
</ul>
</body>

8

悟初境
关注
  • 8
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于html和CSS3制作简单侧边导航栏
09-24
本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下
CSS：导航菜单的制作
波西塔塔博客
07-14 526
css代码 *{ color:#000000; padding: 0; margin: 0; font-size: 16px; } #mainbody{ width: 1
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 3030
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 1068
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
CSS+HTML实现菜单栏
lunabar的博客
09-10 451
ul不能用flex布局，虽说li不用计算宽度（弹性布局），但是ul没有设高度，li+二级菜单ul时，会撑开整个li高度，那么ul就是最长li的那个高度。a.无浮动   b.无position   c.有宽度 d.display:block。li只能用float，ul没有设高度，子盒子float => 父盒子高度坍塌为0。felx设置在父上，好处是子弹性布局（内部盒子宽度自行调整排列）选择器1：hover 选择器2{ }  鼠标放1上，设置2样式。选择器1：hover{ }  鼠标放1上，设置1样式。
css 实现导航菜单
wgchen
07-04 2324
css 实现导航菜单...
HTML+CSS制作导航栏
qq_64867440的博客
10-13 4491
1.1效果展示。
如何快速编写纯CSS菜单？制作CSS精美菜单优化精简代码详细教程
qq_37344648的博客
08-29 938
当您复制测试后，一定能看到，这个页面是能实现我们要的效果的，而且PC和移动端都自适应，不过，有个小问题，就是li没加上超链接。这个很重要，不直接写PX就是为了让字体随着浏览器大小变化而自动变化，以适用于各类浏览器；就是在li这个方块盒子中，顶部预留10个像素，左右不做任何预留值的设定；width:19.5%，这里设置li宽度为19.5%，属于相对宽度，是为了适用各种浏览器的要求；这里表达的以上就是hover可以在任何模块下适用，只要有鼠标行为都可以，不局限有a标签；标签赋值，如 a:hover{}；...
使用CSS制作立体导航栏
09-24
本文将详细介绍如何使用CSS（层叠样式表）来创建具有立体感的导航栏，包括其基本结构、样式设置以及实现立体效果的关键技术。 首先，一个基本的HTML结构是创建导航栏的基础。在提供的代码片段中，我们看到一个`<ul>...
使用CheckBox的属性制作纯css动态导航栏
09-24
传统的做法是利用JavaScript库如jQuery来实现这些动态效果，但随着CSS3的不断发展，我们可以使用纯CSS来实现一些复杂的交互，例如本文提到的使用CheckBox的`checked`属性来制作动态导航栏。 `Checkbox`在HTML中是一...
CSS中的导航栏和下拉菜单的实现
09-22
主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS打造的菜单栏
10-29
效果不错的CSS打造的菜单栏，里面有很多属性，包括浏览器器之间的兼容性都是不错的
CSS菜单栏 超级强大
05-07
各式各样的CSS菜单栏 实用加实用 谢谢支持
20款精美的纯CSS菜单源码
07-23
20款绝对让您满意的精美纯CSS菜单，里面包含有博客专用的，以及标准的菜单，各种样式的，各种颜色风格的，相信总有一款会适合您，不多说了，下载尽情体验。
12种超酷的css+div 导航菜单
08-26
12种超酷的css+div 导航菜单，很不错呵呵，希望你能喜欢
css+div 菜单
03-15
NULL 博文链接：https://guona.iteye.com/blog/328184
黑色css3导航栏下拉菜单动画特效
11-19
制作黑色css3导航栏下拉菜单的关键在于利用选择器、伪类和过渡效果。以下是一些关键知识点： 1. **选择器**：CSS3引入了更强大的选择器，如类选择器（`.class`）、ID选择器（`#id`）和后代选择器（`>`和` `）。在...
css基础 CSS 导航栏、CSS 下拉菜单
wgchen
04-27 4493
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割线固定导航条源码示例 1CSS 下拉菜单基本下拉菜单实例解析下拉菜单 导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用
侧边导航栏（抽屉式设计）界面 (html + css)
热门推荐
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
css导航栏怎么制作
05-26
制作 CSS 导航栏一般有以下几个步骤： 1. HTML 结构：首先，需要在 HTML 中创建导航栏的结构，一般可以使用 `ul` 和 `li` 标签来创建一个无序列表，每个列表项（`li` 标签）代表一个导航链接。 2. CSS 样式：接...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值