您是否對一成不變的下拉選單感到厭煩，有沒有想過在下拉選單的選項中加個小圖示。那您可以試試這支Javascript Custom Dropdown。

只要跟著底下的步驟、就可以完成這個美化下拉選單的效果哦！

先來看看原本的HTML

<select name="webmenu" id="webmenu"  onchange="showValue(this.value)">
   <option value="calendar">Calendar</option>
   <option value="shopping_cart">Shopping Cart</option>
   <option value="cd">CD</option>
   <option value="email"  selected="selected">Email</option>
   <option value="faq">FAQ</option>
   <option value="games">Games</option>
 </select>

我們要利用data-image來設定小圖示。修改之後的HTML會變成底下的樣子。

<select name="webmenu" id="webmenu">
   <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
   <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
   <option value="cd" data-image="icons/icon_cd.gif">CD</option>
   <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
   <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
   <option value="games" data-image="icons/icon_games.gif">Games</option>
 </select>

載入jQuery以及Javascript Custom Dropdown v3.3要用到的javascript及css

<script src="js/msdropdown/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />

最後再加上底下的javascript就完成了。

<script language="javascript">
$(document).ready(function(e) {
   try {
       $("body select").msDropDown();
   } catch (e) {
       alert(e.message);
   }
});
</script>

注意：

下載marghoobsuleman ms-Dropdown之後、會看到3個資料夾分別為：css、images、js。請保持這三個資料夾彼此間的相對位置，才不會在使用的時候找不到下拉選單的箭頭。

從GitHub.com下載JavaScript image combobox

在設計響應式網頁設計時、通常會依瀏覽器視窗的寬度指定不同的設計，包含CSS配置與JavaScript互動效果。

在CSS的世界裡判斷瀏覽器視窗寬度的方法是media query

@media (max-width: 767px)
{
    /* CSS here */
    /* 當視窗寬度小於767px時執行 */
}

在JavaScript的世界裡，則是使用 $(window).width()來檢測瀏覽器視窗的寬度：

if($(window).width() < 767)
{
    // JavaScript here 
    // 當視窗寬度小於767px時執行
} else {
    // JavaScript here
    // 當視窗寬度不小於767px時執行
}

但是透過 CSS media query 和 $(window).width()得到的寬度並不相同、二者之間有些微的落差。底下有幾個方法可以解決這個問題： Read More