立体菜单、带箭头的菜单、带说明信息的菜单

最新推荐文章于 2025-09-05 10:48:47 发布

原创最新推荐文章于 2025-09-05 10:48:47 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍如何设计并实现一种立体效果的菜单，同时菜单项附带有详细的说明信息，增强了用户体验。

带说明信息的菜单

<!DOCTYPE html>
<head>
    <style>
        #menu { 				/*对menu层设置*/
            font-family:Arial;			/*字体*/
            font-size:16px;			/*字号*/
            width:140px; 			/*宽度*/
            margin:0;				/*菜单项之间间隔0.5em，并水平居中*/
            border:solid 1px #ccc;		/*灰色细边框*/
        }
        #menu a, #menu a:visited {
            text-decoration:none; 		/*文字无下划线*/
            text-align:center; 			/*文字水平居中对齐*/
            color:#c00; 			/*红色文字*/
            display:block;                      /*设置为块级元素*/
            padding:4px;			/*内边距*/
            background-color:#fff; 		/*背景色*/
            border:solid 1px #fff;		/*与背景色相同边框，防止跳动*/
            position:relative;			/*使用相对定位*/
            width:130px;
        }
        #menu a span {
            display:none;
        }
        #menu a:hover {
            border-color:#c00;			/*边框颜色红色*/
        }
        #menu a:hover span {
            display:block;              /*设置为块级元素*/
            position:absolute;          /*使用绝对定位*/
            height:0;                   /*高度为0*/
            width:0; 			/*宽度为0*/
            overflow:hidden; 		/*防止溢出*/
            border:solid 8px #fff;	/*设置默认的边框样式*/
            top:4px;			/*竖直方向的定位*/	
        }
        #menu a:hover span.left {
            border-left-color:#c00;
            left:8px;
        }
        #menu a:hover span.right {
            border-right-color:#c00;
            right:8px;
        }
        #menu a:hover span.intro {
            font-size:12px;
            display:block; 
            position:absolute; /*绝对定位*/
            left:150px; 
            top:0px; 
            padding:5px; 
            width:100px;
            height:auto;
            background-color:#eee; 
            color:#000; 
            border:1px dashed #234;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>带说明信息的菜单</title></head>
<body>
    <div id="menu">
        <a href="#">
            <span class="left"></span> 
            Home 
            <span class="right"></span>
            <span class="intro">这里说明Home菜单项</span>
        </a> 
        <a href="#">
            <span class="left"></span>
            Contact Us
            <span class="right"></span>
            <span class="intro">这里说明Contact Us菜单项</span>
        </a>
        <a href="#">
            <span class="left"></span>
            Web Dev
            <span class="right"></span>	   
            <span class="intro">这里说明Web Dev菜单项</span>
        </a> 
        <a href="#">
            <span class="left"></span>
            Web Design
            <span class="right"></span>	
            <span class="intro">这里说明Web Design菜单项</span>
        </a> 
        <a href="#">
            <span class="left"></span>
            Map
            <span class="right"></span>
            <span class="intro">这里说明Map菜单项</span>
        </a>    
    </div>
</body>
</html>

带箭头的菜单

<!DOCTYPE html>
<html>
    <head>
        <style>
            #menu { 					/*对menu层设置*/
                font-family:Arial;			/*字体*/
                font-size:16px;				/*字号*/
                width:140px; 				/*宽度*/
                margin:0 auto;				/*菜单项之间间隔0.5em，并水平居中*/
                border:solid 1px #ccc;			/*灰色细边框*/
            }
            #menu a, #menu a:visited {
                text-decoration:none; 			/*文字无下划线*/
                text-align:center; 			/*文字水平居中对齐*/
                color:#c00; 				/*红色文字*/
                display:block;				/*设置为块级元素*/
                padding:4px;				/*内边距*/
                background-color:#fff; 			/*背景色*/
                border:solid 1px #fff;			/*与背景色相同边框，防止跳动*/
                position:relative;			/*使用相对定位*/
                width:130px;
            }
            #menu a span {
                display:none;
            } 
            #menu a:hover {
                border-color:#c00;			/*边框颜色红色*/
            }
            #menu a:hover span {
                display:block; 				/*设置为块级元素*/
                position:absolute; 			/*使用绝对定位*/
                height:0; 				/*高度为0*/
                width:0; 				/*宽度为0*/
                border:solid 8px #fff;			/*设置默认的边框样式*/
                top:4px;				/*竖直方向的定位*/	
                overflow:hidden;
            }
            #menu a:hover span.left {
                border-left-color:#c00;
                border-right-color:#c00;
                left:8px;
            }
            #menu a:hover span.right {
                border-right-color:#c00;
                right:8px;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>箭头菜单</title></head>
    <body>
        <div id="menu">
            <a href="#"><span class="left"></span> Home <span class="right"></span></a> 
            <a href="#"><span class="left"></span> Contact Us <span  class="right"></span></a>
            <a href="#"><span class="left"></span> Web Dev <span class="right"></span></a> 
            <a href="#"><span class="left"></span> Web Design <span class="right"></span></a> 
            <a href="#"><span class="left"></span> Map <span class="right"></span></a>    
        </div>
    </body>
</html>

立体菜单

<!DOCTYPE html>
<html>
    <head>
        <title>立体菜单</title>
        <style>
            #menu { 					/*对menu层设置*/
                font-family:Arial;			/*字体*/
                font-size:14px;				/*字号*/
            }
            #menu a, #menu a:visited {
                text-decoration:none; 			/*文字无下划线*/
                text-align:center; 			/*文字水平居中对齐*/
                color:#fff; 				/*白色文字*/
                display:block;				/*设置为块级元素*/
                width:10em; 				/*宽度*/
                padding:0.25em;				/*内边距*/
                margin:0.5em auto;			/*菜单项之间间隔0.5em，并水平居中*/
                background-color:#8ab; 			/*背景色*/
                border:2px solid #fff;			/*边框粗细2像素*/
                border-color:#def #678 #345 #cde;	/*边框颜色显示突起效果*/
                position:relative;			/*使用相对定位*/
            }
            #menu a:hover {
                top:2px;				/*向下移动2像素*/
                left:2px;				/*向右移动2像素*/
                border-color:#345 #cde #def #678;	/*边框颜色显示突起效果*/
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>

    <body>
        <div id="menu">
            <a href="#"> Home</a> 
            <a href="#"> Contact Us</a>
            <a href="#"> Web Dev</a> 
            <a href="#"> Web Design</a> 
            <a href="#"> Map</a> 
        </div>
    </body>
</html>