竖直右侧滑动的可控菜单，JavaScript+CSS_菜单导航特效

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

竖直的滑动门菜单，在右侧控制滑动，JavaScript+CSS,兼容IE6/IE7/FF/opera等浏览器，灰色风格，实用简约，希望大家喜欢哦，可以做一个标准的滑动门教程。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>滑动门导航</title>
<style type="text/css">
body{font-size:9pt;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.warp{width:586px; height:269px !important; height:271px;border:1px solid #dbdcd7;}
.main{width:562px; height:269px !important;height:271px;padding:5px; margin-left:15px;overflow:hidden;float:left;}
.news{position:absolute;z-index:4;width:24px; float: left; margin-left:565px !important; margin-left:582px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{ height:84px !important;height:88px;width:20px;margin-bottom:0px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle; background-color:#e5e5e5; border-left:#dbdcd7 solid 1px;border-bottom:#dbdcd7 solid 1px;}
.news ul li.on{background-color:#ffffff; border:#FFFFFF 0px}
.news span{display:block; margin-top:9px !important; margin-top:20px;}
.dis{display:block;}
.undis{display:none;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
</script>
</head>
<body>
<div class="warp">
    <div class="news">
        <ul>
            <li class="on" id="tb_11" onmouseover="HoverLi(1,1,3);"><span>产品</span></li>
            <li class="" id="tb_12" onmouseover="HoverLi(1,2,3);"><span>新闻</span></li>
            <li class="" id="tb_13" onmouseover="HoverLi(1,3,3);"><span>案例</span></li>
        </ul>
    </div>
<div class="dis" id="tbc_11">
        <div class="main">产品</div>
    </div>
    <div class="undis" id="tbc_12">
        <div class="main">新闻</div>
    </div>
        <div class="undis" id="tbc_13">
        <div class="main">案例</div>
    </div>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-21

[收藏][报错][返回列表]

竖直右侧滑动的可控菜单，JavaScript+CSS_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

闂備浇銆€閸嬫捇鏌熼婊冾暭妞ゃ儻鎷�&闂備礁鎲＄敮鎺懳涢弮鍫燁棅闁跨噦鎷�