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>
实现一个纵向滚动导航栏,可以使用 HTMLCSS 和 JavaScript 来完成。下面是一些步骤和示例代码,可以帮助你实现这个功能。 1. 首先,我们需要创建一个 HTML 结构来定义导航栏和它的菜单项。可以使用 `<ul>` 和 `<li>` 标签来创建一个有序列表,然后在列表项中添加链接。 ```html <nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> </ul> </nav> ``` 2. 接下来,我们需要使用 CSS 来设置导航栏的样式。可以给 `<nav>` 元素设置一个固定的高度和宽度,并设置其 `overflow-y` 属性为 `scroll`,以便在内容溢出时显示滚动条。然后,可以设置 `<li>` 元素的样式,例如背景颜色、字体大小和间距。 ```css nav { height: 400px; width: 150px; overflow-y: scroll; } li { background-color: #f6f6f6; font-size: 16px; margin-bottom: 10px; padding: 10px; } ``` 3. 现在,我们需要使用 JavaScript 来添加一些交互性。我们可以使用 `window.addEventListener()` 方法来监听滚动事件,并在导航栏中高亮显示当前所在的节。 ```javascript window.addEventListener('scroll', function() { var sections = document.querySelectorAll('section'); var navHeight = document.querySelector('nav').offsetHeight; var currentSectionIndex = 0; for (var i = 0; i < sections.length; i++) { if (sections[i].offsetTop - navHeight <= window.scrollY) { currentSectionIndex = i; } } var activeLink = document.querySelector('nav li.active'); if (activeLink) { activeLink.classList.remove('active'); } var newActiveLink = document.querySelectorAll('nav li')[currentSectionIndex]; newActiveLink.classList.add('active'); }); ``` 在这段代码中,我们首先获取所有的节,并获取导航栏的高度。然后,我们遍历所有的节,如果某个节的顶部位置小于或等于滚动条的位置加上导航栏的高度,就将当前节的索引设置为 `currentSectionIndex`。最后,我们移除当前激活的菜单项的 `active` 类,然后将新的激活菜单项添加 `active` 类。 4. 最后,我们可以使用 CSS 来设置渐变效果。我们可以给 `.active` 类添加一个渐变背景色,使其从浅色逐渐变成深色。这样,用户就可以很容易地看出当前所在的节。 ```css li.active { background: linear-gradient(to bottom, #f6f6f6, #ccc); } ``` 这样,我们就完成了一个纵向滚动导航栏,并添加了滚动渐变效果。完整的 HTMLCSS 和 JavaScript 代码如下所示: ```html <!DOCTYPE html> <html> <head> <style> nav { height: 400px; width: 150px; overflow-y: scroll; } li { background-color: #f6f6f6; font-size: 16px; margin-bottom: 10px; padding: 10px; } li.active { background: linear-gradient(to bottom, #f6f6f6, #ccc); } </style> </head> <body> <nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> </ul> </nav> <section id="section1">Section 1</section> <section id="section2">Section 2</section> <section id="section3">Section 3</section> <section id="section4">Section 4</section> <script> window.addEventListener('scroll', function() { var sections = document.querySelectorAll('section'); var navHeight = document.querySelector('nav').offsetHeight; var currentSectionIndex = 0; for (var i = 0; i < sections.length; i++) { if (sections[i].offsetTop - navHeight <= window.scrollY) { currentSectionIndex = i; } } var activeLink = document.querySelector('nav li.active'); if (activeLink) { activeLink.classList.remove('active'); } var newActiveLink = document.querySelectorAll('nav li')[currentSectionIndex]; newActiveLink.classList.add('active'); }); </script> </body> </html> ```
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值