垂直导航菜单制作技巧一

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了垂直导航菜单制作技巧一相关的知识,希望对你有一定的参考价值。

我们导航菜单的制作一般都用ul li  a这几个标签,但是我们可以思考一个问题,这个a标签是一个行内标签,而ul 和li是块级标签,我们写在li上面的样式可以写在最里面的a上面

html代码如下:

1 <ul>
2     <li><a href="">菜单1</a></li>
3     <li><a href="">菜单2</a></li>
4     <li><a href="">菜单3</a></li>
5     <li><a href="">菜单4</a></li>
6     <li><a href="">菜单5</a></li>
7 </ul>

我们常规的css做法就是

<style type="text/css">
    * {
        margin: 0;
        padding: 0;    
        font-size: 14px;
    }
    ul {
        list-style: none;
        width: 100px;
        margin: 0 auto;
    }
    ul li {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #CCC;
        margin-bottom: 1px;
        text-indent: 10px;
    }
    ul li a {
        text-decoration: none;
    }
</style>

而我想表达的就是  li标签上的样式可以全部放到a标签上写     只要给a标签加上  display:block;  让a标签变成块级元素即可。

这样做的好处是,在做hover交互效果时,处理起来比较方便。

修改后的代码如下:

 

<style type="text/css">
    * {
        margin: 0;
        padding: 0;    
        font-size: 14px;
    }
    ul {
        list-style: none;
        width: 100px;
        margin: 0 auto;
    }
    ul li a {
        display: block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #CCC;
        margin-bottom: 1px;
        text-indent: 10px;
        text-decoration: none;
    }
    ul li a:link,ul li a:visited {
        color: #000;
    }
    ul li a:hover, ul li a:active {
        color: #FFF;
        background: green;
    }
</style>

 hover和avtive平时设置成一样的就好,link和visited设置成一样的

在li前面添加个性小图标技巧

以上是关于垂直导航菜单制作技巧一的主要内容,如果未能解决你的问题,请参考以下文章

Web垂直菜单栏的制作

像导航抽屉一样切换片段(带后退箭头)

选择导航菜单项时不会替换上一个片段

垂直菜单导航 - 菜单滚动时不显示子菜单

jquery实现的点击可以展开折叠的垂直导航菜单

导航菜单和在android中的选择性片段上添加按钮