卡卡網(wǎng)

關(guān)于下拉菜單，在前面曾介紹過一些漂亮的實(shí)例，如：

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

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

效果如圖

demodownload

實(shí)例介紹

菜單右側(cè)有一個(gè)向上和向下的小箭頭，左側(cè)為當(dāng)前所選項(xiàng)。當(dāng)點(diǎn)擊菜單時(shí)，在菜單上面顯示一個(gè)覆蓋層，覆蓋層里列出所有菜單項(xiàng)目，我們可以點(diǎn)擊任一項(xiàng)目選擇它。

HTML代碼

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

菜案盒子為一個(gè)select標(biāo)簽，它有一個(gè)data-menu的屬性。

菜單項(xiàng)目列舉使用option標(biāo)簽。

所以，HTML代碼結(jié)構(gòu)還是很簡單明了的。

CSS代碼

CSS有幾個(gè)主要樣式類。

.select-menu、.select-menu select設(shè)置菜單所選項(xiàng)的樣式，這里可以設(shè)置菜單的文字樣式。

.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設(shè)置覆蓋層菜單項(xiàng)目列舉的樣式。這里可以設(shè)置覆蓋層的背景顏色等樣式。

.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設(shè)置菜單按鈕樣式。這里可以設(shè)置菜單的長度、寬度、間距邊距、位置等樣式。

.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

本實(shí)例需要JavaScript編程，用來實(shí)現(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、當(dāng)點(diǎn)擊菜單按鈕時(shí)，打開項(xiàng)目列表覆蓋層。

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

3、當(dāng)點(diǎn)擊菜單項(xiàng)目時(shí)，關(guān)閉覆蓋層，同時(shí)在菜單上顯示所選的項(xiàng)目。

$(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);

});

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: 菜單  下拉菜單  css