CSS3下拉菜单代码分解

最新推荐文章于 2024-07-29 12:13:58 发布

taijiedi13

最新推荐文章于 2024-07-29 12:13:58 发布

阅读量743

点赞数

分类专栏： Web前端文章标签：下拉菜单 css3

本文链接：https://blog.csdn.net/taijiedi13/article/details/24632811

版权

Web前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

源码出处：http://red-team-design.com/css3-dropdown-menu/ 感谢作者

目标：对代码做个分解顺别复习一下CSS，属性定义摘自W3Cschool。

HTML代码如下

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css" />
</head>
<ul id="menu">
    <li><a href="#">网站首页</a></li>
    <li>
        <a href="#">产品中心▼</a>
        <ul>
            <li><a href="#">产品1</a></li>
            <li><a href="#">产品2</a></li>
            <li><a href="#">产品3</a></li>
            <li><a href="#">产品4</a></li>
        </ul>
    </li>
    <li><a href="#">企业背景</a></li>
    <li><a href="#">新闻动态</a></li>
    <li><a href="#">领先技术</a></li>
    <li><a href="#">服务咨询</a></li>
</ul>
</html>

HTML结构简单，就是一个嵌套的二级列表。

CSS代码分解

#menu {
    width: 90%;
    margin: 50px;
    padding: 10px 0 0 0;
    list-style: none;  
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 50px;
    box-shadow: 0 2px 1px #9c9c9c;
}

整体导航栏样式：

margin 设置外边距（上右下左）

padding 定义元素边框与内容之间的空白区域

list-style 列表属性，可以设定列表标记、标记的位置或标记的图像

background-image 背景图，路径设置：url(图像路径)

background-repeat repeat-x 和 repeat-y no-repeat

以下属于CSS3属性：

linear-gradient 线性渐变，其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

border-radius 定义圆角边框

box-shadow 定义阴影（水平阴影距离垂直阴影距离（模糊距离阴影尺寸颜色 inset/outset内外阴影转换）

#menu li {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

padding使得列表下边距为10px

#menu a {
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

导航中所有的文字都在链接中，通过a元素来定义文字格式

设定文字样式，text-transform对文字进行大小写转换，text-shadow文字阴影。

#menu li:hover > a {
    color: #fafafa;
}

设定文字鼠标悬停效果，做一个颜色变换

#menu li:hover > ul {
    display: block;
}

有下拉菜单的列表项，鼠标悬停展开下级列表，以块元素方式显示。

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background-color: #444;   
    background-image: linear-gradient(#444, #111);    
    -moz-border-radius: 5px;
    border-radius: 5px;
}

下拉子菜单样式

#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    box-shadow: 0 1px 0 #111111, 
                0 2px 0 #777777;
}

下拉子菜单项的样式，每一项的阴影，box-shadow可添加多个阴影，上例中为两个，作为从浅到深的过渡。

#menu ul li:last-child { 
    box-shadow: none;    
}

子菜单最后一项不需要阴影。

#menu ul a {    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

white-space 规定如何处理元素中空白，nowrap 段落内不换行。

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}

整个子菜单背景色和背景渐变，都在hover之后

#menu ul li:first-child a {
    border-radius: 5px 5px 0 0;
}

子菜单第一项上半部分做圆角

#menu ul li:first-child a:after {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec; 
}

在第一项上定义三角，transparent边框透明。下段为悬停是颜色变化。

原理：左右边框与底部边框相交处会形成一个三角

如下测试代码，html略：

#test{
    width:0px;
    height:0px;
    border-left: 50px solid red;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
}

生成结果如下图：

#menu ul li:last-child a {
    border-radius: 0 0 5px 5px;
}

最后将子菜单的最后一项下半部分设定圆角。

原代码效果图

自己改了一个，效果如下：

taijiedi13

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录