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教學-自訂專屬下拉選單樣式
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼