自從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所控制，包含下拉選單的圖示，以及下拉選單的區塊大小，和滑到變色的部分，各位都可自行作修改，而上方梅干有幫各位標明了，所以各位只要看到「可自行修改」的註解，就表示裡面可自行作設定，完成後效果如下：
[範例預覽] [範例下載]