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中matrix函数的使用
Jun 06 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 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
php实现微信发红包功能
2018/07/13 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
javascript实现yield的方法
2013/11/06 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
Express.JS使用详解
2014/07/17 Javascript
node.js超时timeout详解
2014/11/26 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
javascript运动详解
2015/07/06 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python装饰器原理与用法分析
2018/04/30 Python
Django中的forms组件实例详解
2018/11/08 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python列表推导式入门学习解析
2019/12/02 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
小班评语大全
2014/05/04 职场文书
销售类求职信
2014/06/13 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python