js 網頁開發

jQuery教學-打造自已專屬的下拉選單樣式

2012/02/14

梅問題-jQuery教學-自訂專屬下拉選單樣式

  自從Google服務面頁不斷的改版後,有個功能令梅干相當感興趣,那就是下拉選單,以往下修改樣拉選單要式相當的麻煩,更別說要在裡面增加圖示或做點變化,但梅干發現Google的下拉選單,不但變化性大,且竟然不是用表單中的下拉標籤語法,而是用ul li所組合而成,在與好友男丁不斷的討論與修正下,終於也順利的打造出屬於自已的下拉選單樣式,而這邊各位只要把碼直接貼上,完全無需做修改,唯一只需自行設定下拉圖示與色彩,立即就可使用了喔!


css樣式 (放在<head>…..</head>之間):
body,.select_menu,dl, dt, dd, ol, ul, li {
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
}

/* ======================= / / 下拉選單區塊 / / ======================= */ .select_menu { margin: auto; padding: 0 30px; }

.select_menu ul li { display: block; float: left; position: relative; }

/* ======================= / / 下拉選單的高度-可自修改 / / ======================= */ .select_menu ul li ul { margin: -4px 0 0; display: none; position: absolute; width: 198px; z-index: 350; border: 1px solid #E1E1E1; height: 200px; overflow: auto; border-image: initial; }

.select_menu ul li ul li { background: #fff; }

.select_menu ul li ul li a { display: block; padding: 0 10px; font-size: 12px; overflow: hidden; line-height: 29px; color:#555; }

/* ======================= / / 子層選單 / / ======================= */ .select_menu ul li ul li ul.children{ margin: -4px 0 0; display: none; position: inherit; width: 100%; z-index:none; border: 0; height:inherit; }

.select_menu ul li ul li ul.children li a{padding-left:30px;}

/* ======================= / / 當選到時-可自行修改圖示 / / ======================= */ .option_selected { background: url(“images/dropdown.png”) no-repeat scroll 0 0 transparent; color: #555; display: block; font-size: 12px; line-height: 29px; margin-top: 9px; padding: 0 8px; position: relative; width: 200px; z-index: 400; }

.option_list li{ float:none; width:100%; }

/* ======================= / / 滑入選項變色-可自修改/ / ======================= */ .hovered_item{ background: #eee; font-weight: bold; color:#333; }


jQuery控制 (放在<head>…..</head>之間):
<script type=“text/javascript” src=“js/jquery-1.7.1.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
        $(‘.select_menu’).each(function(){
            var $this = $(this),
                $subMenu = $this.find(”> ul li ul”);

        $this.find(".option_selected").click(function(){
            var $selected = $(this), 
                $nowSelected = $('.selected');
            $nowSelected.removeClass('selected').parents('.select_menu').find('ul li ul').hide();

            if($selected[0] != $nowSelected[0]){
                $subMenu.toggle($selected.toggleClass('selected').hasClass('selected'));
            }

            return false;
        });

        $this.find(".option_list ul li a").click(function() {
            var current = $(this),
                menuname = current.text();

            //連姞
            location.href = current.attr("href");
            $this.find('.selected').removeClass('selected').end().find(".option_list a.option_selected").text(menuname);
            $subMenu.hide();
            return false;

        }).hover(function(){
            $this.find('.hovered_item').removeClass('hovered_item');
            $(this).addClass('hovered_item');
        });
    });

}).click(function(){
    $('.selected').removeClass('selected').parents('.select_menu').find('ul li ul').hide();
}); 

</script>


Html語法 (放在<body>…..</body>之間):
<div class=“select_menu”>
  <ul>
    <li class=“option_list”>
        <a class=“option_selected” href=“#”>請選擇</a>
        <ul>
            <li><a href=“http://buy.minwt.com">buy</a>
                <ul class=“children”>
                    <li><a href=“http://item1">item1</a></li>
                    <li><a href=“http://item2">item2</a></li>
                </ul>
            </li>
            <li><a href=“http://iapp.minwt.com" >iAPP</a> </li>
        </ul>
    </li>
  </ul>
</div>

  大至上來說,在jQuery的控制碼上,不用作任何的修改,唯一比較要注意的是在CSS的部分,所有的樣式都是由CSS所控制,包含下拉選單的圖示,以及下拉選單的區塊大小,和滑到變色的部分,各位都可自行作修改,而上方梅干有幫各位標明了,所以各位只要看到「可自行修改」的註解,就表示裡面可自行作設定,完成後效果如下:

梅問題-jQuery教學-自訂專屬下拉選單樣式
[範例預覽] [範例下載]