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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript的函数作用域
2014/11/12 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
python中re模块知识点总结
2021/01/17 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
采购助理岗位职责
2014/02/16 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS