0
点赞
收藏
分享

微信扫一扫

使用CSS 制作导航菜单

他说Python 2022-03-25 阅读 51
JavaScriptCSSHTMLJQueryhtml


方式一：直接编写代码实现 

代码如下：


<html>

<head>

<title>无需表格的菜单</title>

<style>

<!--

body{

    background-color:#ffdee0;

}

#navigation {

    width:200px;

    font-family:Arial;

}

#navigation ul {

    list-style-type:none;                /* 不显示项目符号 */

    margin:0px;

    padding:0px;

}

#navigation li {

    border-bottom:1px solid #ED9F9F;    /* 添加下划线 */

}

#navigation li a{

    display:block;                        /* 区块显示 */

    padding:5px 5px 5px 0.5em;

    text-decoration:none;

    border-left:12px solid #711515;        /* 左边的粗红边 */

    border-right:1px solid #711515;        /* 右侧阴影 */

    width:175px;     /* xg_超连接以外的部分也触发CSS样式效果 */

}

#navigation li a:link, #navigation li a:visited{

    background-color:#c11136;

    color:#FFFFFF;

}

#navigation li a:hover{                    /* 鼠标经过时 */

    background-color:#990020;            /* 改变背景色 */

    color:#ffff00;                        /* 改变文字颜色 */

}

-->

</style>

</head>

<body>

<div id="navigation">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">News</a></li>

        <li><a href="#">Sports</a></li>

        <li><a href="#">Weather</a></li>

        <li><a href="#">Contact Me</a></li>

    </ul>

</div>

</body>

</html>



效果如下：



  • ​​Home​​
  • ​​News​​
  • ​​Sports​​
  • ​​Weather​​
  • ​​Contact Me​​



方式二：使用jQuery 代码实现 

代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>伸缩的菜单，用toggle()重写</title>

<style>

<!--

body{

    background-color:#ffdee0;

}

#navigation {

    width:200px;

    font-family:Arial;

}

#navigation > ul {

    list-style-type:none;                /* 不显示项目符号 */

    margin:0px;

    padding:0px;

}

#navigation > ul > li {

    border-bottom:1px solid #ED9F9F;    /* 添加下划线 */

}

#navigation > ul > li > a{

    display:block;                        /* 区块显示 */

    padding:5px 5px 5px 0.5em;

    text-decoration:none;

    border-left:12px solid #711515;        /* 左边的粗红边 */

    border-right:1px solid #711515;        /* 右侧阴影 */

}

#navigation > ul > li > a:link, #navigation > ul > li > a:visited{

    background-color:#c11136;

    color:#FFFFFF;

}

#navigation > ul > li > a:hover{        /* 鼠标经过时 */

    background-color:#990020;            /* 改变背景色 */

    color:#ffff00;                        /* 改变文字颜色 */

}


/* 子菜单的CSS样式 */

#navigation ul li ul{

    list-style-type:none;

    margin:0px;

    padding:0px 0px 0px 0px;

}

#navigation ul li ul li{

    border-top:1px solid #ED9F9F;

}

#navigation ul li ul li a{

    display:block;

    padding:3px 3px 3px 0.5em;

    text-decoration:none;

    border-left:28px solid #a71f1f;

    border-right:1px solid #711515;

}

#navigation ul li ul li a:link, #navigation ul li ul li a:visited{

    background-color:#e85070;

    color:#FFFFFF;

}

#navigation ul li ul li a:hover{

    background-color:#c2425d;

    color:#ffff00;

}

-->

</style>

<script language="javascript" src="jquery.min.js"></script>

<script language="javascript">

$(function(){

    $("li").find("ul").prev().click(function(){

        $(this).next().toggle();

    });

    $("li:has(ul)").find("ul").hide();

});

</script>

</head>

<body>

<div id="navigation">

    <ul id="listUL">

        <li><a href="#">Home</a></li>

        <li><a href="#">News</a>

            <ul>

                <li><a href="#">Lastest News</a></li>

                <li><a href="#">All News</a></li>

            </ul>

        </li>

        <li><a href="#">Sports</a>

            <ul>

                <li><a href="#">Basketball</a></li>

                <li><a href="#">Football</a></li>

                <li><a href="#">Volleyball</a></li>

            </ul>        

        </li>

        <li><a href="#">Weather</a>

            <ul>

                <li><a href="#">Today's Weather</a></li>

                <li><a href="#">Forecast</a></li>

            </ul>

        </li>

        <li><a href="#">Contact Me</a></li>

    </ul>

</div>

</body>

</html>


注意：该代码必须加载了jquery.min.js 文件，并且所写的CSS 只能在Firefox 浏览器中正常显示。


方式三：实现伸缩的两级菜单

代码如下：

使用CSS 制作导航菜单_html使用CSS 制作导航菜单_JavaScript_026-14.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>伸缩的菜单</title>

<style>

<!--

body{

    background-color:#ffdee0;

}

#navigation {

    width:200px;

    font-family:Arial;

}

#navigation > ul {

    list-style-type:none;                /* 不显示项目符号 */

    margin:0px;

    padding:0px;

}

#navigation > ul > li {

    border-bottom:1px solid #ED9F9F;    /* 添加下划线 */

}

#navigation > ul > li > a{

    display:block;                        /* 区块显示 */

    padding:5px 5px 5px 0.5em;

    text-decoration:none;

    border-left:12px solid #711515;        /* 左边的粗红边 */

    border-right:1px solid #711515;        /* 右侧阴影 */

}

#navigation > ul > li > a:link, #navigation > ul > li > a:visited{

    background-color:#c11136;

    color:#FFFFFF;

}

#navigation > ul > li > a:hover{        /* 鼠标经过时 */

    background-color:#990020;            /* 改变背景色 */

    color:#ffff00;                        /* 改变文字颜色 */

}


/* 子菜单的CSS样式 */

#navigation ul li ul{

    list-style-type:none;

    margin:0px;

    padding:0px 0px 0px 0px;

}

#navigation ul li ul li{

    border-top:1px solid #ED9F9F;

}

#navigation ul li ul li a{

    display:block;

    padding:3px 3px 3px 0.5em;

    text-decoration:none;

    border-left:28px solid #a71f1f;

    border-right:1px solid #711515;

}

#navigation ul li ul li a:link, #navigation ul li ul li a:visited{

    background-color:#e85070;

    color:#FFFFFF;

}

#navigation ul li ul li a:hover{

    background-color:#c2425d;

    color:#ffff00;

}

#navigation ul li ul.myHide{    /* 隐藏子菜单 */

    display:none;

}

#navigation ul li ul.myShow{    /* 显示子菜单 */

    display:block;

}

-->

</style>

<script language="javascript">

function change(){

    //通过父元素li，找到兄弟元素ul

    var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];

    //CSS交替更换来实现显、隐

    if(oSecondDiv.className == "myHide")

        oSecondDiv.className = "myShow";

    else

        oSecondDiv.className = "myHide";

}

window.onload = function(){

    var oUl = document.getElementById("listUL");

    var aLi = oUl.childNodes;    //子元素

    var oA;

    for(var i=0;i<aLi.length;i++){

        //如果子元素为li，且这个li有子菜单ul

        if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){

            oA = aLi[i].firstChild;    //找到超链接

            oA.onclick = change;    //动态添加点击函数

        }

    }

}

</script>

</head>

<body>

<div id="navigation">

    <ul id="listUL">

        <li><a href="#">Home</a></li>

        <li><a href="#">News</a>

            <ul class="myHide">

                <li><a href="#">Lastest News</a></li>

                <li><a href="#">All News</a></li>

            </ul>

        </li>

        <li><a href="#">Sports</a>

            <ul class="myHide">

                <li><a href="#">Basketball</a></li>

                <li><a href="#">Football</a></li>

                <li><a href="#">Volleyball</a></li>

            </ul>        

        </li>

        <li><a href="#">Weather</a>

            <ul class="myHide">

                <li><a href="#">Today's Weather</a></li>

                <li><a href="#">Forecast</a></li>

            </ul>

        </li>

        <li><a href="#">Contact Me</a></li>

    </ul>

</div>

</body>

</html>

注意：该代码在Firefox 下正常显示，但在IE6 下无法显示正常。


jQuery1.2.3 下载 

举报

相关推荐

使用CSS3动画制作导航菜单

html5css3

第8章 利用CSS制作导航菜单

机器学习决策树人工智能

第8章利用CSS制作导航菜单

前端css

css 实现导航菜单

css前端html二级菜单二级Python后端开发

css3+jQuery制作导航菜单（带动画效果）

jqueryhtmlideHtml/CSS前端开发

第八章 利用CSS制作导航菜单

网络linuxtcp/ip

符合WEB标准的下拉导航菜单（CSS菜单）

csswebfunction产品xhtml编程语言

菜单导航

htmlidejqueryHarmonyOS后端开发

前端如何制作简易的菜单多级导航栏

HTMLcss前端导航栏多级前端开发

CSS实现的大型导航下拉菜单

css前端htmlCSSHTMLPython后端开发
0 条评论