前端技巧集：菜单栏全解析

菜单栏.jpg

前文导航栏全解析中我们做了水平和垂直的导航栏，现在我们做一下水平和垂直的菜单栏。菜单栏与导航栏区别不大，只要在导航栏的条目上加上菜单即可。
我们先上垂直导航栏的代码，在上面加菜单。不会做垂直导航栏，点这里。

HTML

CSS

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }

效果如下图：

我们在【精品】中加上三个菜单

效果如下：

新加的菜单把原来的导航栏撑开，我们在菜单上加上绝对定位。

.menu {
    position: absolute;
}

为了使菜单参照导航栏的条目定位，我们在导航栏的li上加上相对定位。

 position : relative;

效果如下：

菜单的宽度有些不够，我们来设置一下，给 .menu加个宽度。

 width: 90px;

看上去宽度差不多吧，位置菜单有些问题，默认菜单在li的左下角，我们要把它移动到右上角。需要距离top 0；距离left 100%。

 top: 0;
 left: 100%;

导航栏的线在菜单中显示，我们给菜单加上个白色背景色。

background: #fff;

样子差不多了。但是鼠标放到菜单上，菜单上的字没了。

原因是我们在li:hover上把字体颜色设置成了白色。我们只要给.menu加个颜色，就可以解决这个问题。

  color: #000;

这里的字体变粗也是导航栏li:hover既存特效。可以不改变，如果想改变，加个font-weight:normal即可。

菜单基本上成型，最后我们只需要加上显示控制即可。默认菜单隐藏。

  display: none;

鼠标放到导航栏的li上显示。

li:hover .menu {
            display: inline-block;
}

OK，我们的垂直菜单栏好了。

如果想给【女装】加上菜单怎么做呢？

这个更简单，只要给【女装】的li嵌套一个无序列表即可。

简单把后面的菜单只需要加上 menu这个类，一切都是菜单了。

代码总结
HTML

CSS

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
            position: relative;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }
        
        .menu {
            position: absolute;
            width: 90px;
            top: 0;
            left: 100%;
            background: #fff;
            color: #000;
            display: none;
        }
        
        li:hover .menu {
            display: inline-block;
        }

如果我们要做成水平菜单栏，怎么做了？
修改li的display把垂直导航栏改成水平导航栏

    display: inline-block;

导航栏变成水平的了，但是菜单显示在右上角，有些合适了。改到左下角显示比较好。

  left: 0;
  top: 100%;

两步完成了“华丽转身”，帅吧。

童鞋们多加练习体会当中的每一步，实际使用中可能不需要一些步骤（如设置字体或者背景颜色）。但是，基本流程很清晰的。大家试一下吧。

如有问题请留言，如有帮助请点赞。

前端技巧集：菜单栏全解析

你可能感兴趣的:(前端技巧集：菜单栏全解析)