卡卡網

關于下拉菜單，在前面曾介紹過一些漂亮的實例，如：

• 漂亮的CSS下拉菜單設計
• css實現(xiàn)漂亮的下拉菜單，簡單方便實用

本文給大家介紹一個樣式新穎又好看的下拉菜單，它是由CSS+JavaScript實現(xiàn)的。這個菜單的設計突破了一貫我們對菜單“下拉”的思維。

效果如圖

demodownload

實例介紹

菜單右側有一個向上和向下的小箭頭，左側為當前所選項。當點擊菜單時，在菜單上面顯示一個覆蓋層，覆蓋層里列出所有菜單項目，我們可以點擊任一項目選擇它。

HTML代碼

<select data-menu>
    <option>Easy</option>
    <option selected>Normal</option>
    <option>Hard</option>
    <option>Expert</option>
</select>

菜案盒子為一個select標簽，它有一個data-menu的屬性。

菜單項目列舉使用option標簽。

所以，HTML代碼結構還是很簡單明了的。

CSS代碼

CSS有幾個主要樣式類。

.select-menu、.select-menu select設置菜單所選項的樣式，這里可以設置菜單的文字樣式。

.select-menu {
  --background: #242836;
  --text: #fff;
  --icon: #fff;
  --icon-active: #3F4656;
  --list: #1C212E;
  --list-text: rgba(255, 255, 255, .2);
  --list-text-hover: rgba(255, 255, 255, .5);
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
}
.select-menu select,
.select-menu .button {
  font-family: inherit;
  margin: 0;
  border: 0;
  text-align: left;
  text-transform: none;
  -webkit-appearance: none;
}
.select-menu select {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  padding: 8px 36px 8px 12px;
  visibility: hidden;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
}

.select-menu ul、.select-menu ul li設置覆蓋層菜單項目列舉的樣式。這里可以設置覆蓋層的背景顏色等樣式。

.select-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  transform: translateY(var(--t));
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.select-menu ul li {
  padding: 8px 36px 8px 12px;
  cursor: pointer;
}
.select-menu > ul {
  background: var(--list);
  color: var(--list-text);
  border-radius: 6px;
}
.select-menu > ul li {
  transition: color 0.3s ease;
}
.select-menu > ul li:hover {
  color: var(--list-text-hover);
}

.select-menu .button設置菜單按鈕樣式。這里可以設置菜單的長度、寬度、間距邊距、位置等樣式。

.select-menu .button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  z-index: 1;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  color: var(--text);
  background: var(--background);
}
.select-menu .button em {
  --r: 45deg;
  display: block;
  position: absolute;
  right: 12px;
  top: 0;
  width: 7px;
  height: 7px;
  margin-top: 13px;
  -webkit-backface-visibility: hidden;
}
.select-menu .button em:before, .select-menu .button em:after {
  --o: .4;
  content: "";
  width: 7px;
  height: 7px;
  opacity: var(--o);
  display: block;
  position: relative;
  transition: opacity 0.2s ease;
  transform: rotate(var(--r)) scale(0.75);
}
.select-menu .button em:before {
  border-left: 2px solid var(--icon);
  border-top: 2px solid var(--icon);
  top: 1px;
}
.select-menu .button em:after {
  border-right: 2px solid var(--icon);
  border-bottom: 2px solid var(--icon);
  bottom: 1px;
}

JavaScript

本實例需要JavaScript編程，用來實現(xiàn)菜單按鈕的交互操作。

1、我們看到的菜單的樣子，是在HTML代碼加載完后，使用如下JS代碼建立的。

$('select[data-menu]').each(function () {

  let select = $(this),
  options = select.find('option'),
  menu = $('<div />').addClass('select-menu'),
  button = $('<div />').addClass('button'),
  list = $('<ul />'),
  arrow = $('<em />').prependTo(button);

  options.each(function (i) {
    let option = $(this);
    list.append($('<li />').text(option.text()));
  });

  menu.css('--t', select.find(':selected').index() * -41 + 'px');

  select.wrap(menu);

  button.append(list).insertAfter(select);

  list.clone().insertAfter(button);

});

2、當點擊菜單按鈕時，打開項目列表覆蓋層。

$(document).on('click', '.select-menu', function (e) {
  let menu = $(this);
  if (!menu.hasClass('open')) {
    menu.addClass('open');
  }
});

3、當點擊菜單項目時，關閉覆蓋層，同時在菜單上顯示所選的項目。

$(document).on('click', '.select-menu > ul > li', function (e) {

  let li = $(this),
  menu = li.parent().parent(),
  select = menu.children('select'),
  selected = select.find('option:selected'),
  index = li.index();

  menu.css('--t', index * -41 + 'px');
  selected.attr('selected', false);
  select.find('option').eq(index).attr('selected', true);

  menu.addClass(index > selected.index() ? 'tilt-down' : 'tilt-up');

  setTimeout(() => {
    menu.removeClass('open tilt-up tilt-down');
  }, 500);

});

總結

本文介紹了CSS實現(xiàn)的樣式新穎又好看的下拉菜單，本實例需要用到一些JavaScript編程。本實例打破了以往一貫的菜單“下拉”模式，它添加了一個菜單項目列舉的覆蓋層，我們在這個覆蓋層里選擇項目?？傮w來說，這是一個新穎而又好看，并且又有特色的菜單。喜歡的朋友可以直接下載源碼使用。

相關文章

• 漂亮的CSS下拉菜單設計
• 可以展開和閉合子菜單的CSS3垂直導航菜單
• CSS3+JQuery實現(xiàn)的三級下拉導航菜單
• css實現(xiàn)漂亮的下拉菜單，簡單方便實用

標簽: 菜單  下拉菜單  css