下拉水平菜单 js div+css 超实用可链接数据库

最新推荐文章于 2022-08-07 22:34:52 发布

陈涛-项目开发

最新推荐文章于 2022-08-07 22:34:52 发布

阅读量1.2k

点赞数

文章标签： div css javascript object function xhtml

<!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 = "jsfile/imagesa36/nav_" + i + "_on.gif";
            sub_nav.style.display = "block";

        }
        else
        {
            nav_img.src = "jsfile/imagesa36/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="jsfile/imagesa36/nav_1_off.gif" alt="Nightlife" name="nav_1" width="80" height="33" id="nav_1" οnmοuseοver="javascript:toggle_nav(1)"></a><a href="#"><img src="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/pixel.gif" alt="blank" height="2"

<div id="sub_nav_3" style="display: none;"><img src="jsfile/imagesa36/pixel.gif" alt="blank" height="2"

<div id="sub_nav_4" style="display: none;"><img src="jsfile/imagesa36/pixel.gif" alt="blank" height="2"

<div id="sub_nav_5" style="display: none;"><img src="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/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="jsfile/imagesa36/pixel.gif" alt="blank" height="2"

<div id="sub_nav_9" style="display: none;"><img src="jsfile/imagesa36/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="jsfile/imagesa36/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>