iT邦幫忙

0

[鷹問]Jquery 選單

  • 分享至 

  • xImage

這是CODE

<script>
    $(function(){
        var _this = $('#whmenu');
        var _option = $('ul#whmenu li');
        var _sub_menu = $('#whmenu li ul');
        var _sub_option = $('#whmenu li li');
        var _a = $('#whmenu li a');
        
        _this.css({
            position:'relative',
            display:'block'
        });
        _option.css({
            listStyle:'none',
            display:'inline-block',
            textAlign:'center',
            paddingLeft:'20px',
            paddingRight:'20px',
            lineHeight:'30px',
            backgroundColor:'#00559a'
        });
        
        _a.css({
            color:'#fff',
            fontSize:'14px'
        });
        
        _sub_menu.css({
            position:'absolute',
            zIndex:'10',
            boxShadow:'0px 0px 5px #000'
        });
        
        _sub_option.css({
            listStyle:'none',
            display:'block',
            textAlign:'center',
            paddingLeft:'20px',
            paddingRight:'20px',
            lineHeight:'30px',
            backgroundColor:'#00559a'
        });
        
        _sub_menu.hide();
        
        _option.hover(function(){
            $(this).animate({
                backgroundColor:'#9cc163'
            }, 100);
            $(this).children().animate({
                color:'#fff'
            }, 100);
        },function(){
            $(this).animate({
                backgroundColor:'#00559a'
            }, 100);
            $(this).children().animate({
                color:'#fff'
            }, 100);
        });
        
        _option.hover(function(){
            var left = $(this).position().left;
            $(this).children('ul').fadeIn(100);
            $(this).children('ul').css({
                left:left+'px',
                top:'30px'
            });
        },function(){
            $(this).children('ul').hide();
        });
        
    })
</script>

<ul id="whmenu">
    <li>
        <a href="#">關於</a>
    </li>
    <li>
        <a href="#">技術支源</a>
    </li>
    <li>
        <a href="#">線上試用</a>
    </li>
    <li>
        <a href="#">個案分析</a>
    </li>
    <li>
        <a href="#">服務據點</a>
        <ul>
            <li><a href="#">項目1</a></li>
            <li><a href="#">項目2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">客服中心</a>
        <ul>
            <li><a href="#">售後服務</a></li>
            <li><a href="#">聯絡方式</a></li>
        </ul>
    </li>
</ul>

不過會出現一個BUG,移動快的話會出現這樣的問題,緩慢還沒問題

麻煩各位大大幫忙解答,感恩~~!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

4
wordsmith
iT邦高手 1 級 ‧ 2013-12-18 12:30:59
最佳解答

html沒變,css獨立出來,js重寫,目前是沒有你說的那個問題。

http://jsfiddle.net/qfja8/2/

把css寫在js中有什麼特別的考量嗎? 這種把code弄得有點複雜

這是跟朋友研究的,看純粹使用jquery,然就會有這個BUGOrz

感謝 wordsmith 大大解答!
在想想看要怎麼用,不行就分離吧!!Orz

我要發表回答

立即登入回答