藤藤每日一练——Pure CSS3 Lavalamp Menu

Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery插件制作的，一开始还不知道这种效果就叫Lavalamp呢？后来为之告诉我的，今天使用CSS3写了一个垂直的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然手就是选择器的使用，如果你掌握了这两个部分的知识，那么制作这个效果只是一个思路问题，看看代码你就知道了。

demodownload

HTML Code

<ul class="menu unstyled">
  <li><a href="#" title=""><strong>Steve Careless</strong></a></li>
  <li><a href="#" title=""><strong>Hank Azarena</strong></a></li>
  <li><a href="#" title=""><strong>Joan Rivals</strong></a></li>
  <li><a href="#" title=""><strong>Johnny Dip</strong></a></li>
  <li><a href="#" title=""><strong>Gwyneth Patron</strong></a></li>
  <div class="ribbon_wrap">
    <div class="ribbon_rail">
      <div></div>
    </div>
  </div>
</ul>

CSS code

body {
  background: radial-gradient(#1d1d1d 15%, transparent 20%) 0 1px,
    radial-gradient(#1d1d1d 15%, transparent 20%) 4px 5px;
  background-color:#282828;
  background-size:4px 8px;
}  
.demo {
  margin: 40px auto 0;
  width: 170px;
  text-align: center;
}
.menu {
  position: relative;
  width: 170px;
  padding: 5px 0;
  line-height: 35px;
  border-radius: 5px;
  background: linear-gradient(top,#dbdbdb,#999);
}
.menu a {
  display: block;
  color: #484848;
  text-decoration: none;
  text-shadow: 0 1px 0 #e0e0e0;
  font-size: 14px;
}
.menu li:hover a,
  .menu li:first-child a {
  color: #980202;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.menu li:hover a{
  color: #fff;
}
.menu li {
  position: relative;
  z-index: 2;
}
.ribbon_wrap {
  position: absolute;
  top: 8px;
  left: -20px;
  z-index: 1;
  transition: top 0.4s;
}
.ribbon_rail {
  position: relative;
  width: 170px;
  height: 30px;
  padding: 0 20px;
  color: #e3e3e3;
  text-shadow: 0 1px 0 #6b6b6b;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  background: linear-gradient(top,#ff3f3f,#a50000);
}
.ribbon_rail:before,
  .ribbon_rail:after {
  position:absolute;
  content:"";
  top:100%;
  width:0;
  height:0;
  border: 5px solid transparent;
}
.ribbon_rail:before {
  left:0;
  border-color: #5d0f0f #5d0f0f transparent transparent;
}
.ribbon_rail:after { 
  right:0;
  border-color: #5d0f0f transparent transparent #5d0f0f;
}
.ribbon_rail > div {
  width: 100%;
}
.ribbon_rail > div:before,
  .ribbon_rail > div:after {
  content:"";
  position: absolute;
  top:10px;
  z-index: -1;
  width: 0;
  height:0;
  border-width: 14px;
  border-style: solid;
  border-color: #ff1515 #ff1515 #920000 #ff1515;
}
.ribbon_rail > div:before {
  right: 100%;
  border-left-color: transparent;
  margin-right: -10px;
}
.ribbon_rail > div:after {
  left: 100%;
  border-right-color: transparent;
  margin-left: -10px;
}
.menu li:nth-child(1):hover ~ .ribbon_wrap{ 
  top: 8px; 
}
.menu li:nth-child(2):hover ~ .ribbon_wrap{  
  top: 43px;
}
.menu li:nth-child(3):hover ~ .ribbon_wrap{  
  top: 78px; 
}
.menu li:nth-child(4):hover ~ .ribbon_wrap{
  top: 113px;
}
.menu li:nth-child(5):hover ~ .ribbon_wrap{
  top: 148px;
}

demodownload

如需转载，烦请注明出处：https://www.fedev.cn/demo/pure-css3-lavalamp-menu.html

Air More Uptempo