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

<!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"

width="6">
<a href="#">American</a> |
<a href="#">Beijing Style Cuisine</a> |
<a href="#">Cantonese</a> |
<a href="#">Delis & Sandwich</a> |
<a href="#">French</a> |
<a href="#">Hot pot</a> |
<a href="#">Indian</a> |
<a href="#">Italian</a> |
<a href="#">Japanese</a> |
<a href="#">Sichuan</a> |
<a href="#">Southeast Asian</a>
</div>

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

width="2">
<a href="#">Art & Craft Shops</a> |
<a href="#">Clothing</a> |
<a href="#">Antique & Curio shop</a> |
<a href="#">Electrical Goods</a> |
<a href="#">Flowers & Gifts</a> |
<a href="#">Jewelry & Watch</a> |
<a href="#">Souvenir shops</a> |
<a href="#">Sports Goods</a>
</div>

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

width="2">
<a href="#">Beauty salon</a> |
<a href="#">Dental care</a> |
<a href="#">Eye care</a> |
<a href="#">Hair salons</a> |
<a href="#">Traditional Chinese Medicine</a> |
<a href="#">Hospitals & Clinics</a> |
<a href="#">Massage</a> |
<a href="#">SPA & Sauna</a>
</div>

<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"

width="169">
<a href="#">Apartment for Rent</a> |
<a href="#">Apartment for Sale</a> |
<a href="#">Villa for Rent</a> |
<a href="#">Villa for Sale</a> |
<a href="#">Office & Business buildings</a> |
<a href="#">Others</a>
</div>

<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="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="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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值