HTML
-------------------------------------------------------------------------
<div id="navBox"><div></div></div>
    <ul>
        <li><img src="images/nav/nav_left.jpg" /></li>
        <li><img src="images/nav/btn_nav1.jpg" alt="�P於新�]和�I" /></li>
        <li><img src="images/nav/btn_nav2.jpg" alt="�a品展示" /></li>
        <li><img src="images/nav/btn_nav3.jpg" alt="技能培��中心" /></li>
        <li><img src="images/nav/btn_nav4.jpg" alt="服��" /></li>
        <li><img src="images/nav/btn_nav5.jpg" alt="要��" /></li>
        <li><a href="member/member_login.php"><img src="images/nav/
btn_nav6.jpg" alt="���T���^" /></a></li>
        <li><img src="images/nav/btn_nav7.jpg" alt="人才招聘" /></li>
        <li><img src="images/nav/nav_right.jpg" /></li>
        <div class="clear"></div>
    </ul>
</div>

<script language="javascript">
<!--
        $(document).ready(function()
        {
                /*navigation initial*/
                navInitial();
        });
//-->
</script>


CSS
-------------------------------------------------------------------------
#nav
{
        position:relative;
        cursor:pointer;
}
#nav img
{
        border:0px;
}
#nav ul
{
        margin:0px;
        padding:0px;
        list-style:none;
}
#nav li
{
        float:left;
}
.clear
{
        clear:both;
}
#navBox
{
        position:absolute;
        width:120px;
        height:44px;
        border:1px solid #999900;
        overflow:hidden
}
#navBox div
{
        background-color:#F8965A;
        width:120px;
        height:44px;
}

Javascript
-------------------------------------------------------------------------
function navInitial()
{
        var $nb = $('#navBox');
        $('#navBox div').css('opacity',0.3);
        $arr = {'b1':60,'b2':179,'b3':300,'b4':420,'b5':540,'b6':660,'b7':
780};
        $('#nav li:gt(0):lt(7)').mouseover(function()
        {
                var index = $('#nav li').index(this);
                var move = $arr['b'+index] + 'px';
                $nb.stop().animate({left:move});
                if(index == 6)
                {
                        $nb.click(function()
                        {
                           window.location = 'member/member_login.php';
                        });
                }
                else
                {
                        $nb.click(function()
                        {
                                window.location = '';
                        });
                }
        });
}

Hi, I use li and image for navigation button, and the script means,
when I mouse over any button, there will be a transparent div slide
above the button, but the div will cover the button, therefore, I
can't click the button to go to the page, so I write another code to
give the div a hyper link, here comes the question, some button do not
have hyper link, because it got sub menu, I will do another effect
when mouse over those button, that's mean I need to cancel if the div
move to the button which have hyper link, how to do that?

Reply via email to