菜单效果2_菜单导航特效

菜单效果2,您可以先修改部分代码再运行.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>菜单效果02</title>
<script type="text/javascript">
function fetch_object(idname)
{
    var my_obj = document.getElementById(idname);
    return my_obj;
}

function toggle_nav(obj)
{
    for (i = 1; i<= 11; i++  )
    {
        
        var nav_img = fetch_object("nav_" + i);
        var sub_nav = fetch_object("sub_nav_" + i);
        var sub_nav_index =  fetch_object("sub_nav_0");
        sub_nav_index.style.display = "none";
        if (obj == i)
        {
            nav_img.src = "http://p1.mb5u.com/texiao/nav_" + i + "_on.gif";
            sub_nav.style.display = "block";

}
        else
        {
            nav_img.src = "http://p1.mb5u.com/texiao/nav_" + i + "_off.gif";
            sub_nav.style.display = "none";
        }
    }
}
</script>

<style>

img {
    border:0
    }
.navmain{
    width:960px;
    height:33px;
}
.navsub{
    background-color: #ebf0f4;
    height: 24px;
    width: 960px;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    border-left:1px solid #cccccc;
}
.navsub a{
    font-size: 12px;
    color: #000000;
    text-decoration: none;    
}
</style>

<div class="navmain">
<a href="#"><img src="http://p1.mb5u.com/texiao/nav_1_off.gif" alt="Nightlife" name="nav_1" width="80" height="33" id="nav_1" onmouseover="javascript:toggle_nav(1)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_2_off.gif" alt="Dining" name="nav_2" width="80" height="33" id="nav_2" onMouseOver="javascript:toggle_nav(2)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_3_off.gif" alt="Shopping" name="nav_3" width="80" height="33" id="nav_3" onMouseOver="javascript:toggle_nav(3)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_4_off.gif" alt="Health & Beauty" name="nav_4" width="80" height="33" id="nav_4" onMouseOver="javascript:toggle_nav(4)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_5_off.gif" alt="For Kids" name="nav_5" width="80" height="33" id="nav_5" onMouseOver="javascript:toggle_nav(5)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_6_off.gif" alt="Travel" name="nav_6" width="80" height="33" id="nav_6" onMouseOver="javascript:toggle_nav(6)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_7_off.gif" alt="Culture&Entertainment" name="nav_7" width="120" height="33" id="nav_7" onMouseOver="javascript:toggle_nav(7)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_8_off.gif" alt="Housing & Real Estate" name="nav_8" width="80" height="33" id="nav_8" onMouseOver="javascript:toggle_nav(8)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_9_off.gif" alt="Education & Training" name="nav_9" width="120" height="33" id="nav_9" onMouseOver="javascript:toggle_nav(9)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_10_off.gif" alt="Sports" name="nav_10" width="80" height="33" id="nav_10" onMouseOver="javascript:toggle_nav(10)"></a><a href="#"><img src="http://p1.mb5u.com/texiao/nav_11_off.gif" alt="Services" name="nav_11" width="80" height="33" id="nav_11" onMouseOver="javascript:toggle_nav(11)"></a></div>

<div class="navsub">
<div id="sub_nav_0" style="display: none;"></div>
<div id="sub_nav_1" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2" width="3">
<a href="#">Bars</a> | 
<a href="#">Cafes</a> | 
<a href="#">KTV</a> | 
<a href="#">Live Music</a> | 
<a href="#">Nightclubs</a> | 
<a href="#">Teahouses</a> | 
<a href="#">Others</a> 
</div>

<div id="sub_nav_2" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

<div id="sub_nav_3" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

<div id="sub_nav_4" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

<div id="sub_nav_5" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

width="123">
<a href="#">Children's Activities</a> | 
<a href="#">Children's Bookstores</a> | 
<a href="#">Shop for Children</a> | 
<a href="#">Children's Health</a> | 
<a href="#">Children's schools& Kindergarten</a>
</div>

<div id="sub_nav_6" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

width="171">
<a href="#">Folkloric travel around Beijing</a> | 
<a href="#">Hotel</a> | 
<a href="#">Tourist attraction</a> | 
<a href="#">Travel agencies</a> | 
<a href="#">Airlines</a>
</div>

<div id="sub_nav_7" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

width="258">
<a href="#">Bookstores</a> | 
<a href="#">Concert Halls</a> | 
<a href="#">Libraries & Museums</a> | 
<a href="#">Theaters</a> | 
<a href="#">Others</a>
</div>

<div id="sub_nav_8" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

<div id="sub_nav_9" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

width="552">
<a href="#">Schools & Colleges</a> | 
<a href="#">Language School</a> | 
<a href="#">Others</a>
</div>

<div id="sub_nav_10" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

width="338">
<a href="#">Bowling</a> | 
<a href="#">Fitness centers</a> | 
<a href="#">Golf</a> | 
<a href="#">Gyms</a> | 
<a href="#">Outdoor Pursuits</a> | 
<a href="#">Yoga</a> | 
<a href="#">Winter sports</a> | 
<a href="#">Tennis</a>
</div>
<div id="sub_nav_11" style="display: none;"><img src="http://p1.mb5u.com/texiao/pixel.gif" alt="blank" height="2"

width="598">
<a href="#">Homemaking</a> | 
<a href="#">Law</a> | 
<a href="#">Tickets</a> | 
<a href="#">Veterinary/Pet Services</a>
</div>
</div>

所属频道：菜单导航特效/更新时间：2011-02-23

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

菜单效果2_菜单导航特效

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

菜单导航特效推荐

猜你也喜欢看这些