CSS界面组件之导航菜单

---

title: CSS界面组件之导航菜单
date: 2016-09-17 16:39
tags: CSS界面组件 CSS

---

0x00 纵向菜单

代码示例:

    
    
    


    

        

            
Home
            
APP
            
Contents
            
About
        
    

注释:

1. 使用 非首位子元素 选择符。
   li + li 选择符意思为：任何跟在 li 之后的 li。在上面表示给除第一个 li 之外的所有列表项上方加一条边框。

其它实现效果:

.list li{
 border-top:1px solid #069;
}
.list li:first-child{
  border-top:none;
}

2. 让列表可点击。
   为了不让只有文本可以点击（因为链接 a 是行内元素，它会收缩并包住其中的文本。），为了提高用户体验，我们需要 让列表项所在的整行都能点击。方法就是首先把内边距从 li 元素转移到链接内部，然后让链接完全填满整个列表项。

---

0x01 横向菜单

代码示例:

    
    
    


    

        

            
Home
            
Pages
            
Content
            
About
        
    

注释:

1. 浮动可以让 li 元素从垂直变成水平。当然可以使用 display:inline-block 属性将 li 变成水平方向的。

2. ul { overflow:hidden;} 可以使 ul 强制包裹 浮动的 li。

---

0x02 下拉菜单

html示例代码:

    
    
    


    

    

        
人类
        
植物
        
动物
            

                
犬科
                
猫科
                
鸟科
                    

                        
大鸟
                        
中鸟
                        
小鸟
                        
小小鸟
                    
                
                
昆虫科
            
        

        
微生物
    
    

CSS示例代码：

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}


#nav{
    font:1em "宋体";
}

/*显示样式规则*/
/*一级菜单显示*/
    /*设置所有 a 标签的显示样式*/
#nav li a {
    color:#555;
    background-color: gray;
    padding: .2em 1em;
    border-width: 3px;
    border-color:transparent;
    border-right-style: solid;
    background-clip: padding-box;
}

#nav li:hover > a{
    color: #fff;
    background-color: #aaa;
}
    /* a 标签显示样式结束 */
/*一级菜单显示结束*/

/*二级菜单显示样式*/

#nav ul{
    height: 2em;
    
}
#nav li ul{
    
    width:9em;
    height: 7em;
}

#nav li li a{
    /*去掉继承的右边框*/
    border-right: none; 
    border-top:2px solid transparent;
}
/*结束二级菜单显示演示*/
/*显示样式规则结束*/


/*开始设置功能样式*/

#nav {
    position: relative;
}

#nav li{
    float: left;
    position: relative;
}

#nav li a{
    display: block;
}

/*二级菜单功能样式*/
#nav li ul {
    /*隐藏二级菜单*/
    display: none;
    /*相对父元素绝对定位*/
    position: absolute;
    left: 20px;
    top: 100%;

}

#nav li:hover > ul{
    /*一级菜单悬浮时显示二级菜单*/
    display: block;
    
}
/*二级菜单功能演示结束*/

#nav li li{
    /*二级菜单停止悬浮，恢复重叠*/
    float: none;
    border:none;

}

/*三级菜单功能样式*/
#nav li li ul{
    position: absolute;
    left: 100%;
    top:0;

}
/*结束三级菜单功能样式*/
/*结束功能样式*/

核心代码

div.menu-bar ul ul { display: none;}
div.menu-bar li:hover > ul { display: block;}