Javascript, 網頁設計

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教學-自訂專屬下拉選單樣式
[範例預覽] [範例下載]