CSS导航栏和CSS下拉菜单怎么实现

这篇文章主要介绍“CSS导航栏和CSS下拉菜单怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS导航栏和CSS下拉菜单怎么实现”文章能帮助大家解决问题。

成都创新互联主营卡若网站建设的网络公司,主营网站建设方案,app开发定制,卡若h5重庆小程序开发搭建,卡若网站营销推广欢迎卡若等地区企业咨询

导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的。
在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用

和
• 元素非常有意义，公共HTML：

  
      
  主页
      
  新闻
      
  联系
      
  关于

  现在，让我们从列表中删除边距和填充：

  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;}

  

  例子解析：
  list-style-type:none – 移除列表前小标志，一个导航栏并不需要列表标记。
  移除浏览器的默认设置将边距和填充设置为0。

  上面的例子中的代码是垂直和水平导航栏使用的标准代码。

  
      
      
      
  
      
  主页
      
  新闻
      
  联系
      
  关于

  垂直导航栏

  上面的代码，我们只需要 元素的样式，建立一个垂直的导航栏：

  li a {
    display: block;
    width: 60px;
    background-color: #dddddd;}

  示例说明：

  display:block 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度 width:60px 。

  块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

  注意： 请务必指定 元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

  

  
      
      
      
  
      
  主页
      
  新闻
      
  联系
      
  关于

  垂直导航条实例

  创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

  

  
      
      
      
  
      
  主页
      
  新闻
      
  联系
      
  关于

  激活/当前导航条实例

  在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：
  

  li a.active {
      background-color: #4CAF50;
      color: white;}li a:hover:not(.active) {
      background-color: #555;
      color: white;}

  示例代码：

  
      
      
      
      
  主页
      
  新闻
      
  联系
      
  关于

创链接并添加边框

可以在

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */}

    
    
    
    
主页
    
新闻
    
联系
    
关于

ul {
    list-style-type:none;
    margin:0;
    padding:0;}li {
    display:inline;}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;}li {
    float:left;}li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;}

   float:left – 使用浮动块元素的幻灯片彼此相邻。
display:block – 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
   width:60px – 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠标移动到选项上修改背景颜色 */li a:hover {
    background-color: #111;}

关于

添加分割线

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}

  
主页
  
新闻
  
联系
  
关于

ul {
    position: fixed;
    top: 0;
    width: 100%;}

ul {
    position: fixed;
    bottom: 0;
    width: 100%;}

    
    
    
    
主页
    
新闻
    
联系
    关于

示例 1

    
    
    
    首页
    
产品中心
    
新闻资讯
    
文档下载
    
联系我们

CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

    
    
    
    鼠标移动到我这看到下拉菜单！
    
        
CSDN博客
        
wgchen.blog.csdn.net
    

实例解析

HTML 部分

我们可以使用任何的 HTML 元素来打开下拉菜单，如： , 或 a 元素。

使用容器元素 (如：

) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用

元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分

.dropdown 类使用 position:relative：
这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute ) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。
默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。

注意：如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%
( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项：

    
    
    

    
        下拉菜单

                     CSDN博客 1             CSDN博客 2             CSDN博客 3         

关于“CSS导航栏和CSS下拉菜单怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。