脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

CSS中的导航栏和下拉菜单的实现

  发布时间：2018-07-18 15:07:53   作者：dawdler_Bo   我要评论
这篇文章主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、CSS导航栏

（1）导航栏的作用

熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

（2）垂直导航栏

<1>代码如下

<!doctyre html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>垂直导航栏</title> 
        <link rel="stylesheet" href="daohanglan1.css"/>
    </head>
    <body>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <div>
          <h2>垂直导航栏</h2>
          <h3>垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏</p>
          <p>垂直导航栏</p>
          <p>垂直导航栏</p>
          <p>垂直导航栏</p>
          <p>垂直导航栏</p>
          <p>垂直导航栏</p>
          <p>垂直导航栏</p>
          <p>垂直导航栏</p>
        </div>
    </body>
</html>
body{
    margin:0;
}
ul{
    padding:0;
    margin:0;
    list-style-type:none;
    
    width:25%;
    background-color:#f1f1f1;
    
    position:fixed;
    height:100%;
    top:0;
    overflow:auto;
    
    /* border:1px solid #000; */
}
/* ul>li:not(:last-child){
    border-bottom:1px solid #000;
} */
ul a{
    display:block;
    
    text-decoration:none;
    color:#000;
    padding:8px 16px;
    
    text-align:center;
}
li a:hover:not(.active){
    background-color:#555;
    color:white;    
}
a.active{
    background-color:#4caf50;
    color:white;    
}
div{
    margin-left:25%;
    padding:1px 16px;
    height:100px;
    
}

<2>效果图如下：

（3）水平导航栏

<1>代码如下：

<!doctyre html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>水平导航栏</title> 
        <link rel="stylesheet" href="daohanglan2.css"/>
    </head>
    <body>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li style="float:right"><a href="#about">关于</a></li>
        </ul>
        <div class="box">
            <h2>水平导航栏</h2>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            <p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>
            </div>
    </body>
</html>
body{
    margin:0;
}
ul{
    padding:0px;
    margin:0px;
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
    
    position:fixed;
    top:0px;
    width:100%;
}
ul>li{
    float:left;
    border-right:1px solid #fff;
    display:inline;
}
ul>li:last-child{
    border-right:none;
    
}
a{
    padding:14px 16px;
    
    display:block;
    width:60px;
    
    text-align:center;
    
    text-decoration:none;
    color:white;
    
}

li a:hover:not(.active) {
    background-color: #111;
}
    
li a.active {
    color: white;
    background-color: #4CAF50;
}
.box{padding:20px;
margin-top:30px;
background-color:#1abc9c;
height:1500px;}

<2>效果图如下：

二、下拉菜单

（1）下拉菜单的作用

下拉菜单可以使你的网页不在枯燥，可以通过css改变网页的美观，这也是网页排版必不可少的东西。

（2）下拉菜单

<1>代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>


    <link rel="stylesheet" type="text/css" href="xialacaidan.css"/>


</head>
<body>


    <div class="dropdown">
        <span>
            下拉菜单
        </span>
        <div class="di">
            <ul>
                <li>你好！</li>
                <li>我好！</li>
                <li>大家好！</li>
            </ul>
        
        </div>
    </div>


</body>
</html>
body{
    margin:0;
    text-align:center;
}
.dropdown{
    
    background-color:green;
    text-align:center;
    padding:20px;
    display:inline-block;
    cursor:pointer;
    position:relative;
}
.di{
    display:none;
    position:absolute;
    top:61px;
    left:0;
}
.di ul{
    list-style:none;
    padding:0;
    margin:0;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.di ul li{
    min-width:104px;
    padding:10px 15px;
    
}
.dropdown:hover{
    background-color:#3e8e41
}
.dropdown:hover .di{
    display:block;
    
}
.di ul li:hover{
    background-color: #f1f1f1
}

<2>效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

  • CSS 带搜索导航栏的示例代码

    这篇文章主要介绍了CSS 带搜索导航栏的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
    2021-02-22

  • html+css+js实现导航栏滚动渐变效果

    这篇文章主要介绍了html+css+js实现导航栏滚动渐变效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-28

  • css锚点定位被顶部固定导航栏遮住的解决方案

    这篇文章主要介绍了css锚点定位被顶部固定导航栏遮住的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小
    2020-04-09

  • 不可思议的CSS导航栏下划线跟随效果

    这篇文章主要介绍了纯CSS实现导航栏下划线跟随效果，本文图文并茂实例代码详解，给大家介绍的非常详细，需要的朋友参考下吧
    2019-12-09

  • html+css 实现简易导航栏功能

    这篇文章主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
    2021-04-07

  • CSS导航条菜单之带小三角形的实现代码

    这篇文章主要介绍了CSS导航条菜单之带小三角形的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-22

  • css实现导航切换的实例代码

    本文通过实例代码给大家介绍了css实现导航切换效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-08-15

  • CSS设置列表样式和创建导航菜单实现代码

    这篇文章主要介绍了CSS设置列表样式和创建导航菜单实现代码,需要的朋友可以参考下
    2018-07-24

  • 纯CSS + 媒体查询实现网页导航效果

    这篇文章主要介绍了纯CSS + 媒体查询实现网页导航效果,需要的朋友可以参考下
    2018-05-02

  • CSS3 二级导航菜单的制作的示例

    这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-02

最新评论

关注微信公众号

扫一扫