CSS+HTML 实现顶部导航栏功能


Posted in HTML / CSS onAugust 30, 2021

导航栏的实现、固定顶部导航栏、二级菜单实现
效果图:

CSS+HTML 实现顶部导航栏功能

2018/11/16更新:
最近在使用这个导航栏的时候,发现页面在放大和缩小的情况下,导航栏的布局和显示都有些小问题,所以重新改了一下css部分的代码,重新贴上来

新的代码实现(优化布局):

<html>
   <head>
       <style type="text/css">
        .top{
    /* 设置宽度高度背景颜色 */
    height: auto; /*高度改为自动高度*/
    width:100%;
    margin-left: 0;
    background:rgb(189, 181, 181);
    position: fixed; /*固定在顶部*/
    top: 0;/*离顶部的距离为0*/
    margin-bottom: 5px;
}
.top ul{
    /* 清除ul标签的默认样式 */
    width: auto;/*宽度也改为自动*/
    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 5%;
    /* margin-top: 0;          */
    padding: 0;

}
.top li {
    float:left; /* 使li内容横向浮动,即横向排列  */
    margin-right:2%;  /* 两个li之间的距离*/
    position: relative;
    overflow: hidden;
}

.top li a{
   /* 设置链接内容显示的格式*/
    display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
    color:white;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* 去除下划线 */
    
}
.top li a:hover{
    /* 鼠标选中时背景变为黑色 */
    background-color: #111;
}
.top ul li ul{
    /* 设置二级菜单 */
    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; /* 默认隐藏二级菜单的内容 */

}
.top ul li ul li{
    /* 二级菜单li内容的显示 */
    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* 鼠标选中二级菜单内容时 */
    display: block;
}
body{
    background:#eff3f5;
}

       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#"><b>一级菜单</b></a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li>
                        <a href="#">一级菜单</a>
                        <ul>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

下面的原来的代码实现(页面放大缩小的时候导航版排版有问题):

<html>
   <head>
       <style type="text/css">
        .top{
            /* 设置宽度高度背景颜色 */
            height: 50px;
            width:100%;
            background:rgb(189, 181, 181);
            position: fixed; /*固定在顶部*/
            top: 0;/*离顶部的距离为0*/
        }
        .top ul{
            /* 清除ul标签的默认样式 */
            width: 80%;
            list-style-type: none;
            margin: 0;            
            padding: 0;
            overflow: hidden;

        }
        .top li {    
            float:left; /* 使li内容横向浮动,即横向排列  */
            margin-right:50px;  /* 两个li之间的距离*/
        }

        .top li a{
           /* 设置链接内容显示的格式*/
            display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
            color:white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* 去除下划线 */
        }
        .top li a:hover{
            /* 鼠标选中时背景变为黑色 */
            background-color: #111;
        }
        .top ul li ul{
            /* 设置二级菜单 */
            width: auto;
            background:rgb(189, 181, 181);
            position: absolute;
            display: none; /* 默认隐藏二级菜单的内容 */

        }
        .top ul li ul li{
            /* 二级菜单li内容的显示 */
            margin-right:0;
            float:none;
            text-align: center;
        }
        .top ul li:hover ul{
            /* 鼠标选中二级菜单内容时 */
            display: block;
        }
       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#">一集菜单</a></li>
                    <li><a href="#"><b>一级菜单</b></a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li>
                        <a href="#">一级菜单</a>
                        <ul>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

到此这篇关于CSS+HTML 实现顶部导航栏功能的文章就介绍到这了,更多相关css顶部导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 #HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 #HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
如何使用 resize 实现图片切换预览功能
Aug 23 #HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 #HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 #HTML / CSS
css3中transform属性实现的4种功能
Aug 07 #HTML / CSS
You might like
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python中 * 的用法详解
2019/07/10 Python
简单的Python调度器Schedule详解
2019/08/30 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
android面试问题与答案
2016/12/27 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
网络宣传方案
2014/03/15 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
工伤事故证明
2014/10/20 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
色戒观后感
2015/06/12 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
员工安全责任协议书
2016/03/22 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
详解GaussDB for MySQL性能优化
2021/05/18 MySQL