UL LI结构实现二级导航菜单(HTML+CSS+JS)

怼烎@ 2023-01-24 04:20 207阅读 0赞

[http://blog.digitalforest.cn/cssdivulli-nav][http_blog.digitalforest.cn_cssdivulli-nav]

**1.    创建无序列表：**  
<div>  
    <ul>  
        <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
        <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
        <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
        <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
        <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
        <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
    </ul>  
</div>

【[点击这里查看效果][Link 1]】

**2.    将“li”默认样式“圆点”利用CSS隐藏：**  
    <style type="text/css">  
        .ullicss ul\{list-style:none;\}  
    </style>  
    <div class="ullicss">  
        <ul>  
            <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
            <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
            <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
            <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
            <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
            <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
        </ul>  
    </div>

【[点击这里查看效果][Link 2]】

**3.    通过浮动使 “li”元素横向排列：**  
    <style type="text/css">  
        .ullicss ul\{list-style:none;\}  
        .ullicss li\{float:left;\}  
    </style>  
    <div class="ullicss">  
        <ul>  
            <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
            <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
            <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
            <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
            <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
            <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
        </ul>  
    </div>

【[点击这里查看效果][Link 3]】

**4.    调整“li”元素的宽度：**  
    <style type="text/css">  
        .ullicss ul\{list-style:none;\}  
        .ullicss li\{float:left; width:100px;\}  
    </style>  
    <div class="ullicss">  
        <ul>  
            <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
            <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
            <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
            <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
            <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
            <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
        </ul>  
    </div>

【[点击这里查看效果][Link 4]】

**5.    通过CSS伪类设置菜单效果：**  
    <style type="text/css">  
        .ullicss ul\{list-style:none;\}  
        .ullicss li\{float:left; width:100px;\}  
        .ullicss a:link   \{color:pink; font-weight:bold; text-decoration:none; background:green;\}  
        .ullicss a:visited\{color:pink; font-weight:bold; text-decoration:none; background:green;\}  
        .ullicss a:hover  \{color:green; font-weight:bold; text-decoration:none; background:yellow;\}  
    </style>  
    <div class="ullicss">  
        <ul>  
            <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
            <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
            <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
            <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
            <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
            <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
        </ul>  
    </div>

【[点击这里查看效果][Link 5]】（ **提示**：将鼠标放在菜单上看看）

**6.    将链接以块级元素显示并细微调整：**  
    <style type="text/css">  
        .ullicss ul\{list-style:none;\}  
        .ullicss li\{float:left; width:100px; margin-left:3px; line-height:30px;\}  
        .ullicss a:link   \{color:pink; font-weight:bold; text-decoration:none; background:green;\}  
        .ullicss a:visited\{color:pink; font-weight:bold; text-decoration:none; background:green;\}  
        .ullicss a:hover  \{color:green; font-weight:bold; text-decoration:none; background:yellow;\}  
        .ullicss a  \{display:block; text-align:center; height:30px;\}  
    </style>  
    <div class="ullicss">  
        <ul>  
            <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
            <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
            <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
            <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
            <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
            <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
        </ul>  
    </div>

**CSS调整解释**：  
text-align:center：将菜单文字居中；  
height:30px：增加背景的高度；  
margin-left:3px：使每个菜单之间空3px距离；  
line-height:30px：定义行高，使链接文字纵向居中

【[点击这里查看效果][Link 6]】

**7.    进一步调整：**  
    <style type="text/css">  
        .ullicss \{height:30px;background:green;\}  
        .ullicss ul\{list-style:none;\}  
        .ullicss li\{float:left; width:100px; margin-left:3px; line-height:30px;\}  
        .ullicss a:link   \{color:pink; font-weight:bold; text-decoration:none; background:green;\}  
        .ullicss a:visited\{color:pink; font-weight:bold; text-decoration:none; background:green;\}  
        .ullicss a:hover  \{color:green; font-weight:bold; text-decoration:none; background:yellow;\}  
        .ullicss a  \{display:block; text-align:center; height:30px;\}  
    </style>  
    <div class="ullicss">  
        <ul>  
            <li><a target="\_blank" href="http://www.baidu.com">菜单例一</a></li>  
            <li><a target="\_blank" href="http://www.google.com">菜单例二</a></li>  
            <li><a target="\_blank" href="http://www.bing.com">菜单例三</a></li>  
            <li><a target="\_blank" href="http://www.jike.com">菜单例四</a></li>  
            <li><a target="\_blank" href="http://www.soso.com">菜单例五</a></li>  
            <li><a target="\_blank" href="http://www.youdao.com">菜单例六</a></li>  
        </ul>  
    </div>

【[点击这里查看效果][Link 7]】

（版权归[数码林网站分析博客][Link 8]所有，欢迎转载，但转载请注明出处。）

【**小 结**】

本例子通过将无序列表浮动并加以修饰得到一个横向导航菜单。

【**留个思考题**】

如果将遇到的将CSS中的“background”和“color”用“background-image”代替是不是会得到更好的效果呢？

如果图片利用合理，你会创造出更好的导航菜单！这里请读者自己动手实践吧！

【**附录1： 本文用到的相关示例代码下载**】

点击下载：[ULLICSS\_HTML.zip][ULLICSS_HTML.zip]

【**附录2： 相关知识参考**】

无序列表   ：http://www.w3school.com.cn/html/html\_lists.asp  
CSS列表   ：http://www.w3school.com.cn/css/css\_list.asp  
CSS浮动   ：http://www.w3school.com.cn/css/css\_positioning\_floating.asp  
CSS背景   ：http://www.w3school.com.cn/css/css\_background.asp  
CSS文本   ：http://www.w3school.com.cn/css/css\_text.asp  
CSS伪类   ：http://www.w3school.com.cn/css/css\_pseudo\_classes.asp  
CSS display 属性 ：http://www.w3school.com.cn/css/pr\_class\_display.asp

CSS完整教程       ：http://www.w3school.com.cn/css/index.asp  
HTML完整教程     ：http://www.w3school.com.cn/html/index.asp

**改善网站导航文章，有兴趣的话阅读：**

1.  [网站分析工具维析路径分析帮你清晰导航][Link 9]
2.  [网站导航分析之不要让我迷路（上篇）][Link 10]
3.  [网站导航分析之不要让我迷路（下篇）][Link 10]

[http_blog.digitalforest.cn_cssdivulli-nav]: http://blog.digitalforest.cn/cssdivulli-nav
[Link 1]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss1.html
[Link 2]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss2.html
[Link 3]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss3.html
[Link 4]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss4.html
[Link 5]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss5.html
[Link 6]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss6.html
[Link 7]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ullicss7.html
[Link 8]: http://blog.digitalforest.cn/
[ULLICSS_HTML.zip]: http://blog.digitalforest.cn/wp-content/uploads/2012/06/ULLICSS_HTML.zip
[Link 9]: http://www.visionalist.cn/pages/function/behavior.php
[Link 10]: http://blog.digitalforest.cn/not-getlost-navigation2